كيفية تأجيل تحليل JavaScript في وورد بريس (4 طرق)

هل قمت بتشغيل موقع وورد بريس الخاص بك من خلال أداة اختبار الأداء فقط لتتوافق مع تعليمات لتأجيل تحليل JavaScript في وورد بريس؟

يمكن أن يكون لتنفيذ هذا التغيير تأثير إيجابي على أوقات تحميل صفحات موقعك ، وخاصة بالنسبة لزوار الجوال. ولكن قد يكون من الصعب بعض الشيء فهم التحذير ، ولهذا السبب سنشرح بالضبط ما يعنيه تأجيل تحليل JavaScript وكيف يمكنك تنفيذ هذا التغيير على موقع وورد بريس الخاص بك.

ماذا يعني تأجيل تحليل JavaScript في وورد بريس؟

إذا سبق لك تشغيل موقع وورد بريس الخاص بك من خلال Google PageSpeed ​​Insights أو GTmetrix أو غيرها من أدوات اختبار سرعة الصفحة ، فمن المحتمل أنك صادفت اقتراحًا لتأجيل تحليل JavaScript.

ولكن ماذا يعني ذلك في الواقع؟ ولماذا يعتبر اعتبارًا مهمًا في الأداء؟

بشكل أساسي ، عندما يزور شخص ما موقع وورد بريس الخاص بك ، يقوم خادم موقعك بتسليم محتويات HTML لموقع الويب الخاص بك إلى متصفح ذلك الزائر.

يبدأ متصفح الزائر بعد ذلك من الأعلى ويمر عبر الشفرة لعرض موقعك. إذا عثر ، أثناء الانتقال من أعلى إلى أسفل ، على أي JavaScript ، فسيتوقف عن عرض بقية الصفحة حتى يتمكن من جلب ملف JavaScript وتحليله.

سيفعل ذلك مع كل برنامج نصي يعثر عليه ، والذي يمكن أن يكون له تأثير سلبي على أوقات تحميل صفحة موقعك لأن الزائر يحتاج إلى التحديق في شاشة فارغة أثناء تنزيل المتصفح الخاص به وتحليل جميع جافا سكريبت.

إذا لم يكن نصًا برمجيًا معينًا ضروريًا للأداء الأساسي لموقعك ( على الأقل عند تحميل الصفحة الأولى ) ، فأنت لا تريده أن يعترض طريق تحميل أجزاء أكثر أهمية من موقعك ، وهذا هو سبب هذه الصفحة تخبرك أدوات اختبار السرعة دائمًا بتأجيل تحليل JavaScript.

إذن ماذا يعني تأجيل تحليل جافا سكريبت؟

أساسا، موقعك سوف اقول المتصفحات الضيف الانتظار لتحميل و / أو تحليل جافا سكريبت حتى بعد المحتوى الرئيسي موقع الويب الخاص بك لديه تحميل انتهى بالفعل. في هذه المرحلة ، يمكن للزوار رؤية صفحتك والتفاعل معها ، وبالتالي فإن أوقات الانتظار للتنزيل والتحليل لم يعد لـ JavaScript مثل هذا التأثير السلبي.

من خلال تسريع أوقات تحميل المحتوى الخاص بك في الجزء المرئي من الصفحة ، فإنك تجعل Google سعيدة وتخلق تجربة أفضل وأسرع للزائرين.

كيف تتحقق مما إذا كنت بحاجة إلى تأجيل تحليل جافا سكريبت

لاختبار ما إذا كان موقع وورد بريس الخاص بك يحتاج إلى تأجيل تحليل JavaScript ، يمكنك تشغيل موقعك من خلال GTmetrix .

ستمنحك GTmetrix درجة كما تسرد أيضًا نصوصًا محددة يجب تأجيلها:

تأجيل تحليل اختبار JavaScript في GTmetrix

تأجيل تحليل اختبار JavaScript في GTmetrix

الطرق المختلفة لتأجيل تحليل جافا سكريبت

هناك عدة طرق مختلفة لتأجيل تحليل JavaScript. أولاً ، هناك سمتان يمكنك إضافتهما إلى نصوصك:

تريد أن تعرف كيف زدنا من حركة المرور لدينا أكثر من 1000 ٪؟

انضم إلى أكثر من 20000 آخرين ممن يتلقون رسائلنا الإخبارية الأسبوعية مع نصائح من الداخل حول وورد بريس!

إشترك الآن

غير متزامن

تأجيل

تسمح كلتا السمتين لمتصفحات الزوار بتنزيل JavaScript دون إيقاف تحليل HTML مؤقتًا. ومع ذلك ، فإن الاختلاف هو أنه بينما لا يؤدي عدم التزامن إلى إيقاف تحليل HTML مؤقتًا لجلب البرنامج النصي (كما هو الحال مع السلوك الافتراضي) ، فإنه يقوم بإيقاف محلل HTML مؤقتًا لتنفيذ البرنامج النصي بمجرد جلبه.

مع التأجيل ، ستستمر متصفحات الزوار في تنزيل البرامج النصية أثناء تحليل HTML ، لكنهم سينتظرون تحليل النص إلى ما بعد اكتمال تحليل HTML.

يقوم هذا الرسم البياني من Growing with the Web بعمل رائع في شرح الاختلاف:

رسم يوضح عدم التزامن مقابل التأجيل

رسم يوضح عدم التزامن مقابل التأجيل

خيار آخر ، أوصى به باتريك سيكستون من Varvy ، يستخدم برنامجًا نصيًا لاستدعاء ملف JavaScript خارجي فقط بعد انتهاء تحميل الصفحة الأولية. هذا يعني أن متصفحات الزوار لن تقوم بتنزيل أو تنفيذ أي جافا سكريبت حتى انتهاء التحميل الأولي للصفحة.

أخيرًا ، هناك طريقة أخرى ستراها وهي ببساطة نقل JavaScript إلى أسفل الصفحة. ومع ذلك ، فإن هذه الطريقة ليست حلاً رائعًا لأنه على الرغم من أن صفحتك ستكون مرئية في وقت قريب ، إلا أن متصفحات الزوار ستظل تعرض الصفحة قيد التحميل حتى تنتهي جميع النصوص البرمجية. قد يمنع هذا بعض الزائرين من التفاعل مع صفحتك لأنهم يعتقدون أن المحتوى لم يتم تحميله بالكامل.

كيفية تأجيل تحليل JavaScript في وورد بريس (4 طرق)

لتأجيل تحليل JavaScript في وورد بريس ، هناك ثلاثة مسارات رئيسية يمكنك اتباعها:

البرنامج المساعد – هناك بعض الإضافات الرائعة المجانية والمتميزة في وورد بريس لتأجيل تحليل JavaScript. سنوضح لك كيفية القيام بذلك باستخدام مكونين إضافيين شائعين.

طريقة Varvy – إذا كنت خبيرًا في التكنولوجيا ، يمكنك تحرير كود موقعك مباشرة واستخدام مقتطف الشفرة من Varvy.

ملف Functions.php – يمكنك إضافة مقتطف رمز إلى ملف function.php الخاص بسمة الطفل لتأجيل البرامج النصية تلقائيًا.

يمكنك النقر أعلاه للانتقال مباشرة إلى طريقتك المفضلة أو قراءة جميع التقنيات للعثور على الطريقة الأفضل لك.

1. Free Async JavaScript Plugin

Async JavaScript هو مكون إضافي مجاني لبرنامج وورد بريس من Frank Goossens ، وهو نفس الشخص الذي يقف وراء المكون الإضافي Autoptimize الشهير .

يمنحك طريقة بسيطة لتأجيل تحليل JavaScript باستخدام إما غير متزامن أو تأجيل.

للبدء ، يمكنك تثبيت وتنشيط المكون الإضافي المجاني من وورد بريس.org. بعد ذلك ، انتقل إلى Settings → Async JavaScript لتهيئة المكون الإضافي.

في الجزء العلوي ، يمكنك تمكين وظيفة المكون الإضافي والاختيار بين غير متزامن وتأجيل. تذكر:

يقوم Async بتنزيل JavaScript أثناء استمرار تحليل HTML ، ثم يوقف تحليل HTML مؤقتًا لتنفيذ JavaScript.

تأجيل تنزيل JavaScript أثناء استمرار تحليل HTML وانتظر تنفيذه حتى انتهاء تحليل HTML.

كيفية استخدام البرنامج المساعد Async JavaScript

كيفية استخدام البرنامج المساعد Async JavaScript

علاوة على ذلك ، يمكنك أيضًا اختيار كيفية التعامل مع jQuery. تعتمد الكثير من السمات والمكونات الإضافية بشكل كبير على jQuery ، لذلك إذا حاولت تأجيل تحليل نصوص jQuery ، فقد تعطل بعض الوظائف الأساسية لموقعك. الطريقة الأكثر أمانًا هي استبعاد jQuery ، ولكن يمكنك تجربة تأجيلها. فقط تأكد من اختبار موقعك بدقة.

علاوة على ذلك ، يمكنك أيضًا تضمين أو استبعاد نصوص برمجية محددة يدويًا من التأجيل ، بما في ذلك ميزة سهلة الاستخدام للسماح لك باستهداف سمات أو مكونات إضافية معينة نشطة على موقعك:

تضمين / استبعاد القواعد JavaScript غير متزامن

تضمين / استبعاد القواعد JavaScript غير متزامن

2. استخدم WP Rocket Plugin

على الرغم من أننا لا نسمح بمعظم المكونات الإضافية للتخزين المؤقت في Kinsta ، فإننا نسمح للمكون الإضافي WP Rocket لأنه يتضمن تكاملًا مدمجًا للعب بشكل جيد مع التخزين المؤقت على مستوى الخادم الخاص بـ Kinsta .

بالإضافة إلى مجموعة من تقنيات تحسين الأداء الأخرى ، يمكن أن يساعدك WP Rocket في تأجيل تحليل JavaScript في علامة التبويب File Optimization في لوحة معلومات WP Rocket. ابحث عن خيار تحميل JavaScript مؤجل في قسم ملفات JavaScript .

تبسيط تحليل جافا سكريبت باستخدام المكونات الإضافية المدارة من لوحة تحكم مركزية. جرب Kinsta مجانًا .

لقد أخذنا معرفتنا بالإدارة الفعالة لمواقع الويب على نطاق واسع ، وحولناها إلى كتاب إلكتروني ودورة فيديو. انقر  هنا  لتنزيل دليل 2020 لإدارة أكثر من 40 موقعًا من مواقع وورد بريس!

مثل المكوّن الإضافي Async JavaScript ، يتيح لك WP Rocket أيضًا استبعاد jQuery لتجنب المشكلات المتعلقة بمحتوى موقعك:

كيفية تأجيل تحليل JavaScript باستخدام WP Rocket

كيفية تأجيل تحليل JavaScript باستخدام WP Rocket

3. استخدم طريقة Varvy الموصى بها (رمز)

ذكرنا سابقًا أن Patrick Sexton من Varvy يوصي باستخدام مقتطف الشفرة الذي ينتظر كل من تنزيل JavaScript وتنفيذها حتى يكمل موقعك تحميل الصفحة الأولية.

يمكنك تنفيذ هذه الطريقة عن طريق تعديل مقتطف الشفرة الذي يوفره Varvy ثم إضافة البرنامج النصي إلى قالبك مباشرة قبل علامة الإغلاق </body>.

هذا هو الكود من Varvy :

<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "defer.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>

تأكد من استبدال “defer.js” باسم / مسار الملف الفعلي لملف JavaScript الذي تريد تأجيله. بعد ذلك ، يمكنك استخدام خطاف wp_footer لحقن الكود عبر ملف function.php الخاص بالقالب الفرعي الخاص بك.

باستخدام هذا الأسلوب ، يمكنك تغليف كود Varvy بشيء مثل هذا:

/**
Defer parsing of JavaScript with code snippet from Varvy
*/
add_action( 'wp_footer', 'my_footer_scripts' );
function my_footer_scripts(){
?>
REPLACE_WITH_VARVY_SCRIPT
<?php
}

4. تأجيل JavaScript عبر ملف jobs.php

أخيرًا ، يمكنك أيضًا إضافة سمة defer إلى ملفات JavaScript الخاصة بك دون الحاجة إلى مكون إضافي عن طريق إضافة مقتطف الشفرة التالي إلى ملف function.php الخاص بك:

function defer_parsing_of_js( $url ) {
    if ( is_user_logged_in() ) return $url; //don't break WP Admin
    if ( FALSE === strpos( $url, '.js' ) ) return $url;
    if ( strpos( $url, 'jquery.js' ) ) return $url;
    return str_replace( ' src', ' defer src', $url );
}
add_filter( 'script_loader_tag', 'defer_parsing_of_js', 10 );

بشكل أساسي ، يخبر هذا المقتطف وورد بريس بإضافة سمة defer إلى جميع ملفات JavaScript باستثناء jQuery.

إنه سريع وسهل ، لكنه لا يمنحك مستوى التحكم الدقيق الذي يوفره شيء مثل المكوّن الإضافي Async JavaScript.

هل تحصل على رسالة * تأجيل تحليل تحذير جافا سكريبت *؟ لا تقلق … أصلحه الآن بهذه الطرق الأربع! 🚀⏳

انقر للتغريد

ملخص

يعد تأجيل تحليل JavaScript على موقع وورد بريس الخاص بك أحد اعتبارات الأداء المهمة.

بمجرد استخدام إحدى الطرق المذكورة أعلاه لتأجيل تحليل JavaScript في وورد بريس ، نوصي بعمل شيئين:

اختبر موقعك للتأكد من أن تأجيل بعض البرامج النصية لم يعطل محتوى الجزء المرئي من الصفحة. مرة أخرى ، يمكن أن يحدث هذا بشكل شائع مع jQuery ، ولهذا السبب تسمح لك الكثير من الأدوات باستبعاد jQuery.js. ومع ذلك ، يمكن أن يحدث ذلك مع البرامج النصية الأخرى أيضًا.

قم بتشغيل موقعك من خلال GTmetrix مرة أخرى للتأكد من أن موقعك يؤجل أكبر عدد ممكن من البرامج النصية (قد لا تحصل على درجة مثالية إذا قمت باستبعاد jQuery – ولكن يجب أن تكون درجاتك أفضل).

هل لديك أي أسئلة حول كيفية تأجيل تحليل JavaScript في وورد بريس؟ اسأل بعيدا في التعليقات!

وفر الوقت والتكاليف وحقق أقصى قدر من أداء الموقع من خلال:

مساعدة فورية من خبراء استضافة وورد بريس ، 24/7.

تكامل Cloudflare Enterprise.

يصل الجمهور العالمي إلى 28 مركز بيانات حول العالم.

التحسين من خلال مراقبة أداء التطبيقات المضمنة لدينا.

كل ذلك وأكثر من ذلك بكثير ، في خطة واحدة بدون عقود طويلة الأجل ، وعمليات الترحيل المدعومة ، وضمان استرداد الأموال لمدة 30 يومًا. تحقق من خططنا أو تحدث إلى قسم المبيعات للعثور على الخطة المناسبة لك.