تأجيل تحليل جافا سكريبت - 5 طرق لإصلاحها وزيادة السرعة (2024)

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

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

إذا كان لديك وقت قصير ، فإليك بعض الإجراءات السريعة التي يمكنك القيام بها:

تعليمات حول كيفية تأجيل تحليل جافا سكريبت

1. قم بتنزيل البرنامج المساعد Async هنا.
2. انقر على الإضافات> إضافة جديد> تحميل البرنامج المساعد وحدد الملف الذي قمت بتنزيله للتو.
3. انقر على تفعيل من البرنامج المساعد المثبت.
4. انتقل إلى الإضافات وانقر فوق الإعدادات للمكوِّن الإضافي Async الذي قمت بتثبيته للتو.
5. النقر على تفعيل Async Javascriptالطرق أو تطبيق Async كطريقتين من أكثر الطرق شيوعًا لتطبيق الإصلاح.
6. اختبر موقع الويب الخاص بك ، لترى أن كل شيء لا يزال يعمل بشكل جيد.

ما أهمية إجراء تحليل تأجيل جافا سكريبت؟ إذا لم تؤجل تحليل جافا سكريبت ، سيبدو موقع الويب الخاص بك وكأنه يتم تحميله ببطء. تعد Javascript أساسًا لبنة مهمة في لغة الويب ، فهي تتيح لمطوري الويب إنشاء وظائف "ديناميكية".

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

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

تتفاقم المشكلة على الأجهزة المحمولة ، حيث تتوافر قوة المعالجة ، جنبًا إلى جنب مع النطاق الترددي المتاح ، مما يجعل التجربة تبدو أسوأ.

وماذا سيفعل المستخدمون الذين يحصلون على مثل هذه التجربة؟ سوف يرتدون بعيدًا عن موقع الويب الخاص بك ، ولن يعودوا أبدًا!

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

وإذا كنت قد استخدمت Google PageSpeed ​​Insights للتحقق من موقع الويب الخاص بك ، فبالإضافة إلى "تأجيل تحليل جافا سكريبت" ، فهناك المزيد من التحذيرات المشفرة ، مثل التحذيرات التي تنص على "إزالة موارد حظر العرض".

يبدو أن هذه العناصر الفنية لها التأثير الأكبر على سرعة التحميل لديك! 

القضاء؟! ولكن كيف يفترض بي حذف هذه الملفات المهمة من موقع الويب الخاص بي؟

لا تقلق ، نحن هنا لمساعدتك في إصلاح هذه التحذيرات وحل هذه المشكلات وتسريع تحميل صفحاتك في النهاية!

لانك انت لا داعي لإزالتها. كل ما عليك فعله هو تأجيل تحليل JavaScript.

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

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

هذا لأنه إذا لم تؤجل تحليل جافا سكريبت ، فإن تحويل موقع الويب يصبح عملية ثقيلة للغاية ، وكما قلنا أعلاه ، سيبدو موقع الويب وكأنه معطل.

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

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

إذا كنت مهتما، WP Rocket يمكن إعداد تأجيل تحليل جافا سكريبت والعديد من التعديلات الأخرى لجعل موقعك أسرع ، فقط انقر فوق اللافتة أدناه للتحقق من ذلك. 

ألست مستعدًا لاستخدام مكون إضافي في الوقت الحالي؟ واصل القراءة... 

ما هو تأجيل تحليل جافا سكريبت؟

يعني تأجيل تحليل جافا سكريبت استخدام "defer"أو"async"لتجنب حظر عرض الصفحة. يوجه أمر HTML هذا المتصفح إلى تنفيذ / تحليل النصوص البرمجية بعد (تأجيل) أو بشكل غير متزامن (بالتوازي) مع تحميل الصفحة. وهذا يسمح للمحتوى بالظهور دون انتظار تحميل البرامج النصية .

من خلال إعداد التحليل المؤجل لجافا سكريبت ، ستتمكن من السماح بتحميل المحتوى الخاص بك بشكل أسرع وبأولوية عالية.

لماذا؟

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

بالاستمرار في الفيديو أعلاه ، دعونا نلقي نظرة سريعة على ما يحدث عندما يزور شخص ما موقع الويب الخاص بك: 

1. عندما ينقر المستخدم على رابط يشير إلى موقع الويب الخاص بك ، سيطلبه متصفح المستخدم من الخادم الخاص بك ، والذي سيقوم الخادم بعد ذلك "بخدمته" إلى متصفح المستخدم الخاص بك.
2. بعد ذلك ، يتلقى متصفح المستخدم محتوى HTML لصفحة الويب الخاصة بك ويشاهدها وسيبدأ في عرضها. سيبدأ في بناء صفحة الويب الخاصة بك من أعلى إلى أسفل.
3. إذا عثر على ملفات JavaScript على طول الطريق ، فسيتوقف المتصفح ويجلبها (إذا كان ملفًا خارجيًا) ، ثم يحللها
4. فقط بعد الجلب والتحليل الكامل لكل نص برمجي ، سيستمر تحميل بقية المحتوى الخاص بك.

ربما بدأت بالفعل في رؤية أين تكمن المشكلة.

عندما تحتوي صفحاتك على الكثير من ملفات JavaScript ، يمكن أن يؤثر ذلك بشكل كبير على وقت تحميل موقع الويب الخاص بك - بشكل سلبي.

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

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

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

إذا انتظر المستخدم أكثر من 4 ثوانٍ ، فسيبدأ في الانفعال. بعد مرور 8 ثوانٍ ، يكون موقع الويب الخاص بك جيدًا مثل الموت - سيرتد المستخدم بعيدًا إلى موقع ويب آخر.

لقد فقدت زائرًا ، وربما فقدت نشاطه التجاري. 

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

فماذا عليك أن تفعل؟

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

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

إذا كنت قد شاهدت الفيديو أعلاه ، فقد رأيت أن السمتين "غير متزامن" و "تأجيل" تساعدان بشكل كبير.

لكن كيف ستفعل ذلك في WordPress؟ أيضًا ، ما هو الوقت المناسب لاستخدامها؟ دعنا نرى ودعنا نبدأ!

تحليل موقع الويب الخاص بك

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

فيما يلي بعض الأمثلة:

1. GTMetrix

يعمل هذا عن طريق التحقق من مقاييس PageSpeed ​​و Yslow ويمنحك درجة من F إلى A. كما يقدم لك توصيات بالإضافة إلى نصائح حول كيفية تحسين موقع الويب الخاص بك إذا تم العثور على مشكلات. سيخبرك على وجه التحديد ما إذا كنت بحاجة إلى تأجيل تحليل JavaScript. 

بشكل عام ، يجب أن تكون النتيجة 71 على الأقل.

تُظهر الصورة أدناه موقع ويب لا يحتاج إلى تأجيل. 

2. أدوات PageSpeed

أداة تم تطويرها بواسطة Google ، PageSpeed ​​Insights هي أداة شاملة أخرى توفر لك معلومات شاملة حول مشكلات أداء موقعك جنبًا إلى جنب مع نصائح لإصلاحها تمامًا مثل GTMetrix.

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

3. أدوات Pingdom 

أداة أخرى شائعة لاختبار أداء مواقع الويب متاحة مجانًا للجميع.

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

تُظهر الصورة أدناه موقعًا يحتوي على نصف صفحته تقريبًا تتكون من JavaScript - وهو مؤشر رائع قد ترغب في تأجيل البرامج النصية الخاصة بك. 

4.  Varvy سرعة الصفحة 

أداة أخرى ممتازة تخبرك ما إذا كان موقعك يحتوي على نصوص برمجية لحظر العرض.

الأفضل هو أنه يتيح لك معرفة ما هي عليه بالضبط ، تمامًا كما في الصورة أدناه: 

حسنًا ، رائع!

الآن لديك حق الوصول إلى الأدوات التي يمكن أن تساعدك في تحديد ما إذا كنت بحاجة إلى تنفيذ التحليل المؤجل لملفات JavaScript.

لكن قد تسأل لماذا لا يتم تنفيذها فقط وتركها بمفردها؟ إذا قمت بتأجيل تحليل JavaScript بشكل غير صحيح ، فقد يؤدي ذلك إلى كسر الأشياء وقد يكون من المحبط إصلاحها إذا لم تكن خبيرًا في التكنولوجيا.

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

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

بالإضافة إلى ذلك ، ستجد أن هناك الكثير من الأسئلة على Stack Overflow حول jQuery و async و defer والتي غالبًا ما تتعلق بكيفية تنفيذ التأجيل وغير المتزامن ، إذا كان يجب عليك ذلك على الإطلاق ، إلى البرامج النصية التي تعتمد على jQuery. 

إذن ما هي النتائج؟ هل تحتاج إلى تأجيل البرامج النصية الخاصة بك؟

إذا كان الأمر كذلك ، فلنكتشف الآن كيفية تأجيل JavaScript في WordPress!

كيفية تأجيل إعراب JavaScript في WordPress

يمكن أن يكون تأجيل تحليل JavaScript في WordPress أمرًا سهلاً إلى حد ما.

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

في هذا القسم ، سوف نتحقق من خمس طرق مختلفة لأداء التحليل المؤجل لجافا سكريبت في WordPress: عبر الإضافات ، عبر function.php ، وتحرير الكود يدويًا. 

هناك العديد من المكونات الإضافية في مستودع WordPress والتي يمكن أن تساعدك في تحسين أداء موقع الويب الخاص بك.

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

ومع ذلك ، لا يتم إنشاء جميع المكونات الإضافية على قدم المساواة. يعمل البعض بشكل رائع ، والبعض الآخر يعمل بشكل جيد ، والبعض الآخر لا يعمل على الإطلاق وقد يؤدي إلى تعطيل بعض أو كل وظائف موقعك. 

(إذا كنت تفضل أن يتعامل شخص ما مع هذا الأمر نيابةً عنك ، فيمكنك القيام بذلك باستخدام أداة Fiverr رخيصة بالضغط على الزر أدناه.)

1. تأجيل تحليل Javascript باستخدام Async Plugin

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

سنبدأ بواحدة من أكثرها شيوعًا والتي تهدف إلى القيام بوظيفة واحدة محددة في هذه المقالة.

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

فيما يلي الخطوات التي يجب عليك تنفيذها لاستخدام هذا المكون الإضافي.

1. قم بتنزيل البرنامج المساعد Async هنا.
2. انقر على الإضافات> إضافة جديد في الخلفية الفسفور الابيض.
3. انقر على تحميل البرنامج المساعد وحدد الملف الذي قمت بتنزيله للتو.
4. بدلاً من ذلك ، ابحث عن Async Javascript وانقر تثبيت الآن.
5. انقر على تفعيل من البرنامج المساعد المثبت.
6. انتقل إلى الإضافات وانقر فوق الإعدادات للمكوِّن الإضافي Async الذي قمت بتثبيته للتو.
7. نقترح النقر فوق تفعيل Async Javascriptالطرق أو تطبيق Async كطريقتين من أكثر الطرق شيوعًا لتطبيق الإصلاح.
8. إذا لم تنجح هذه ، يمكنك تجربة عدة مجموعات مختلفة.
9. اختبر موقع الويب الخاص بك ، لترى أن كل شيء لا يزال يعمل بشكل جيد.

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

قد تلاحظ أيضًا أن لديك خيار إما عدم تزامن البرنامج النصي أو تأجيله. لمزيد من المعلومات حول الفرق بين الاثنين ، يمكنك قراءة هذا البند.

إحدى الميزات الفريدة لهذا المكون الإضافي هي أنه يمكنك تحديد استبعاد سمة أو مكون إضافي معين.

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

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

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

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

2. صاروخ الفسفور الابيض

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

تتضمن بعض الميزات ما يلي: 

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

أحد أفضل الأشياء في WP Rocket هو أنه بمجرد تثبيته وتنشيطه ، يمكنك تركه بمفرده وستحصل تلقائيًا على مكاسب في الأداء.

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

لحسن الحظ ، يمكنك استبعاد بعض البرامج النصية من التأجيل.

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

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

تحميل الفسفور الابيض الصواريخ

3. حزمة سرعة الداعم

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

أدناه يمكنك رؤية بعض الميزات المتوفرة في المكون الإضافي: 

ضمن علامة التبويب خيارات متقدمة ، يمكنك اختيار استبعاد بعض البرامج النصية إما من النقل إلى التذييل أو من التأجيل أو كليهما. ومع ذلك ، يمكنك فقط إضافة ما يصل إلى 4 نصوص برمجية مستبعدة ، وهو بالتأكيد قيد للمواقع المعقدة والكبيرة. 

بشكل عام ، إنه بديل مجاني جيد لـ WP Rocket ، وهو مناسب للمواقع الصغيرة.

4. استخدام القرص function.php

ماذا لو كنت لا تريد استخدام المكونات الإضافية؟

هناك خدعة أخرى يمكنك القيام بها لتأجيل تحليل Javascript في WordPress وذلك عن طريق تحرير ملف function.php الخاص بالقالب.

ما عليك سوى نسخ الكود أدناه ولصقه في الجزء السفلي من ملف function.php الخاص بقالبك: 

function defer_parsing_of_javascript ( $url ) {
  if ( FALSE === strpos( $url, '.js' ) ) return $url;
  if ( strpos( $url, 'jquery.js' ) ) return $url;
    return "$url' defer ";
}
add_filter( 'clean_url', 'defer_parsing_of_javascript', 11, 1 ); 

ضع في اعتبارك أنك قد تفسد موقعك إذا قمت بذلك بشكل خاطئ ، لذا انتبه جيدًا وتأكد من أنك تقوم بتحرير الملف الصحيح في النسق الصحيح وأنك تقوم بلصق مقتطف الشفرة في الموقع الصحيح. تأكد من عدم حذف / تغيير أي شيء آخر.

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

اقرأ المزيد: تم تنشيط حظر الرسائل

5. قم بتعديل التعليمات البرمجية يدويًا

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

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

  وظيفة downloadJSAtOnload () {
    var element = document.createElement ("script") ؛
    element.src = "//www.yourdomain.com/defer.js" ؛
    document.body.appendChild (عنصر) ؛
  }
  إذا (window.addEventListener)
    window.addEventListener ("تحميل" ، تنزيل JSAtOnload ، خطأ) ؛
  وإلا إذا (window.attachEvent)
    window.attachEvent ("onload" ، downloadJSAtOnload) ؛
  آخر window.onload = downloadJSAtOnload ؛
</script>

استبدل defer.js بملف البرنامج النصي الخاص بك. بمجرد تحريره ليعكس البرنامج النصي الخاص بك ، قم بلصقه قبل ملفات HTML الخاصة بك بطاقة شعار. في WordPress ، يمكنك القيام بذلك عن طريق تحرير ملف footer.php الخاص بالقالب.

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

إذا كنت لا ترغب في الذهاب إلى متاعب تحرير ملف footer.php الخاص بك ، فيمكنك استخدام مكون إضافي يسمى الرؤوس والتذييلات إدراج. 

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

وهذه هي كل الطرق التي يمكنك من خلالها تأجيل تحليل JavaScript في WordPress! لكن هل يعملون؟ هل قاموا بتحسين أداء موقعك؟ دعنا نتحقق من النتائج!

اختبار النتائج

لاختبار النتائج ، انتقل إلى GTMetrix.com و PageSpeed ​​Insights و Pingdom Tools لمعرفة ما إذا كانت درجة الأداء ووقت التحميل قد تحسنت.

في GTMetrix ، يجب أن تكون درجاتك 71 على الأقل. كلما زاد العدد كان ذلك أفضل! النتيجة المثالية مثل :-) 

في PageSpeed ​​Insights ، ابحث عن "الطلاءات الأولى":

بشكل عام ، عندما تختبر ما إذا كان تنفيذك لتحليل تأجيل جافا سكريبت قد أدى إلى تأجيل البرامج النصية ، استهدف النتائج الخضراء في First Contentful Paint و First Meaningful Paint.

قارن قبل التأجيل وبعده وتحقق مما إذا كانت تتحسن.

بالنسبة لأدوات Pingdom ، ألق نظرة في قسم ترتيب التحميل ومعرفة ما إذا تم تحميل معظم ملفات البرامج النصية ، إن لم يكن كلها ، أخيرًا. قارن قبل التأجيل وبعده ولاحظ ما إذا كانت ملفات البرامج النصية قد غيرت موضعها في ترتيب التحميل (أي هل تم تحميلها في وقت سابق أم لاحقًا). 

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

كيفية تأجيل تحليل JavaScript باستخدام برنامج نصي

هناك تقنيات مختلفة يمكنك استخدامها لتأجيل تحليل JavaScript. يناقش القسم التالي ما عليك القيام به. 

باختصار ، تحتاج إلى القيام بما يلي:

1. انسخ الكود أدناه وأضفه قبل ملف علامة في HTML الخاص بك.
2. استبدل example.js في الكود أدناه بالملف الذي يحتوي على النص المطلوب تأجيله.
3. حفظ التغييرات.
4. اختبر موقع الويب الخاص بك لمعرفة التأثير.

لنلقِ نظرة على هذه الخطوات بمزيد من التفصيل:

• استخدم برنامجًا نصيًا لاستدعاء ملف JS خارجي بمجرد الانتهاء من تحميل الصفحة الأولية. على varvy.com ، يقترح Patrick Sexton طريقة تسمح بتحميل محتوى موقع الويب ، قبل تحميل JS (للتأكد من أن المستخدم يمكنه رؤية المحتوى أولاً). يضمن ذلك عدم تأثر مسار التحميل الحرج بالنصوص البرمجية التي تسبب أي حظر للعرض. تتضمن الطريقة إنشاء ملف خارجي غير مطلوب لعرض المحتوى في البداية. من خلال إضافة البرنامج النصي التالي قبل ملف في HTML. يستخدم المثال التالي ملف example.js ، والذي قد يحتاج إلى تحديث وفقًا لذلك. 

  <script type="text/javascript">
      function downloadJSAtOnload() {
          var element = document.createElement("script");
          element.src = "example.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>

  بمجرد انتهاء تحميل صفحة الويب ، سيبدأ البرنامج النصي في التنزيل والتنفيذ example.js - المشكلة هي أنك ستحتاج إلى إنشاء الملف يدويًا.

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

• انقل JavaScript إلى أسفل الصفحة. الاقتراح الثالث والأخير هو نقل أي <script> العلامات إلى أسفل الصفحات (خاصةً إذا لم تكن مهمة ، مثل الإعلانات). هذه الطريقة ليست مثالية ، لأن المتصفح سيظل مشغولاً حتى يتم تنزيل آخر نص برمجي بالكامل وتحليله. نظرًا لأن المتصفح يبدو مشغولاً ، فقد لا يتفاعل بعض الزائرين مع الصفحة حتى يتم تحميلها بالكامل ، مما يؤدي إلى تجربة مستخدم سلبية محتملة.

اقتراحات من جوجل

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

في القائمة اليمنى ، يمكنك أيضًا العثور على موارد أخرى تساعدك على تحسين أداء موقعك. تأكد من التحقق منها أيضًا إذا أبلغت PageSpeed ​​Insights عن مشاكل متعلقة بها.

للحصول على نظرة عامة ، تقترح Google أنه يجب عليك تضمين البرامج النصية المهمة بدلاً من ذلك وإما عدم تزامن أو تأجيل البرامج النصية غير الهامة. هذا يعني أنه يجب تضمين البرامج النصية التي يتطلبها موقعك في HTML بدلاً من ذلك. ومع ذلك ، فهذه مهمة مطوري قوالب WordPress والمكونات الإضافية - ولكن إذا كنت تريد إنشاء المظهر أو المكون الإضافي الخاص بك ، فضع ذلك في الاعتبار.

اقرأ المزيد:  كيفية توظيف مطوري جافا سكريبت (GREAT)

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

تأجيل CSS غير المستخدمة

هناك مشكلة مماثلة قد تراها تحدث هذه الأيام ، أيضًا في أداة Pagespeed Insights ، وهي Defer of Unused CSS. في حين أن هذه مشكلة مماثلة ، إلا أن جذورها مختلفة بعض الشيء. بشكل أساسي ، سيحتاج CSS إلى إعادة هيكلة لإصلاح ذلك بشكل صحيح.

{loadpostion imh-embed}

الأسئلة الشائعة

كيف يمكنني إصلاح تأجيل تحليل JavaScript في WordPress؟

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

ما هو تأجيل جافا سكريبت؟

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

ما الفرق بين عدم التزامن وتأجيل جافا سكريبت؟

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

كيف أقوم بتصغير JavaScript في WordPress؟

لتقليل Javascript في WordPress ، ستحتاج إلى تنفيذ مكون إضافي يقوم بذلك تلقائيًا. يمكنك قراءة المزيد عن هذا هنا. 

في المخص:

وقد شاهدت للتو كيفية تأجيل تحليل JavaScript في WordPress.

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

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

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

قم بزيارة WP Rocket لجعل موقع الويب الخاص بك أسرع اليوم  

عن المؤلف

كاتب: ديفيد أتاردالموقع: https://www.linkedin.com/in/dattard/بريد إلكتروني: ديفيد @collectiverayكوم

يعمل ديفيد في مجال الإنترنت والصناعة الرقمية أو حولهما منذ 21 عامًا. يتمتع بخبرة واسعة في مجال البرمجيات وتصميم الويب باستخدام WordPress وJoomla والمنافذ المحيطة بها. وقد عمل مع وكالات تطوير البرمجيات وشركات البرمجيات العالمية ووكالات التسويق المحلية ويشغل الآن منصب رئيس عمليات التسويق في Aphex Media - وهي وكالة تحسين محركات البحث. كمستشار رقمي، ينصب تركيزه على مساعدة الشركات في الحصول على ميزة تنافسية باستخدام مجموعة من مواقعها الإلكترونية والمنصات الرقمية المتاحة اليوم. إن مزيجه من الخبرة التقنية جنبًا إلى جنب مع الفطنة التجارية القوية يضفي ميزة تنافسية على كتاباته.