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

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

آخر تعديل في 2021-09-02 بواسطة Rami .M
javascript,تقليل وقت تحميل الموقع,defer parsing of javascript,defer javascript,javascript defer,javascript tutorial,slidenerd javascript,javascript defer loading,javascript tutorials 2018,javascript defer attribute,إزالة javascript غير المستخدم,defer parsing of javascript code,javascript programming language,تأجيل تحليل JavaScript

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

javascript,تقليل وقت تحميل الموقع,defer parsing of javascript,defer javascript,javascript defer,javascript tutorial,slidenerd javascript,javascript defer loading,javascript tutorials 2018,javascript defer attribute,إزالة javascript غير المستخدم,defer parsing of javascript code,javascript programming language,تأجيل تحليل JavaScript

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

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

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

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

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

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

javascript,تقليل وقت تحميل الموقع,defer parsing of javascript,defer javascript,javascript defer,javascript tutorial,slidenerd javascript,javascript defer loading,javascript tutorials 2018,javascript defer attribute,إزالة javascript غير المستخدم,defer parsing of javascript code,javascript programming language,تأجيل تحليل JavaScript

خيار آخر ، استخدم برنامجًا نصيًا لاستدعاء ملف 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.
javascript,تقليل وقت تحميل الموقع,defer parsing of javascript,defer javascript,javascript defer,javascript tutorial,slidenerd javascript,javascript defer loading,javascript tutorials 2018,javascript defer attribute,إزالة javascript غير المستخدم,defer parsing of javascript code,javascript programming language,تأجيل تحليل JavaScript

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

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

javascript,تقليل وقت تحميل الموقع,defer parsing of javascript,defer javascript,javascript defer,javascript tutorial,slidenerd javascript,javascript defer loading,javascript tutorials 2018,javascript defer attribute,إزالة javascript غير المستخدم,defer parsing of javascript code,javascript programming language,تأجيل تحليل JavaScript

2. استخدم WP Rocket

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

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

javascript,تقليل وقت تحميل الموقع,defer parsing of javascript,defer javascript,javascript defer,javascript tutorial,slidenerd javascript,javascript defer loading,javascript tutorials 2018,javascript defer attribute,إزالة javascript غير المستخدم,defer parsing of javascript code,javascript programming language,تأجيل تحليل 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؟ اسأل في التعليقات!

"لا تقرأ وترحل، ضع بصمتك.. وشاركنا برأيك ..."
** تقديرًا لجهودنا ودعمًا للموقع.. يرجى مشاركة المقال عبر أزرار المشاركة الاجتماعية بالأسفل **

أحدث المقالات

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

تم تصميم الموقع بواسطة منشئ الصفحات Oxygen Builder بشكل كامل.
لطلب خدمة تصميم الموقع تواصل معنا من الزر بالإسفل
خدمة تصميم الموقع
منتجات أوصي بها
إشترك فى قناتنا على يوتيوب ليصلك كل جديد
جميع الحقوق محفوظة لـ نور للمعلوماتية © 2021
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram