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

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

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

إليك ما ستتعلمه في هذا المقال:

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

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

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

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

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

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

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

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

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

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

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

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

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

الطرق المختلفة لتأجيل تحليل JavaScript

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

1. Async (غير متزامن)
2. Defer (تأجيل)

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

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

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

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

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

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

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

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

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

تأجيل تحليل JavaScript بأستخدام البرنامج المساعد

1. Async JavaScript

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

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

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

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

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

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

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

2. استخدم WP Rocket

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

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

طريقة استخدام مقتطف الشفرة

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

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

هذا هو الكود :

<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 hook لحقن الكود عبر ملف function.php الخاص بالقالب الفرعي الخاص بك.

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

/**
تأجيل تحليل JavaScript مع مقتطف الشفرة
*/
add_action( 'wp_footer', 'my_footer_scripts' );
function my_footer_scripts(){
?>

اضف كود الشفرة اعلاه بدل هذا النص

<?php
}

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

أخيرًا ، يمكنك أيضًا إضافة سمة defer إلى ملفات JavaScript الخاصة بك دون الحاجة إلى مكون إضافي عن طريق إضافة مقتطف الشفرة التالي إلى ملف functions.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 );

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

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

ملخص

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

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

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

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