تحسين "مهلة الاستجابة لأوّل إدخال"

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

لقد نقرت ولكن لم يحدث شيء! لماذا لا يمكنني التفاعل مع هذه الصفحة؟ 😢

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

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

القيم الجيدة هي 2.5 ثانية، والقيم الضعيفة أكبر من 4.0 ثوانٍ، وأي شيء بين هذه القيم يحتاج إلى تحسين

للمساعدة في توقُّع مقياس FID في الميزة الاختبارية، سنشرح ما يلي: ننصحك باستخدام إجمالي وقت الحظر (TBT). إنها تقيس أشياء مختلفة، لكنها عادةً ما تتطابق التحسينات في TBT مع التحسينات في FID.

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

تنفيذ JavaScript مكثف

لا يستطيع المتصفّح الاستجابة لمعظم إدخالات المستخدم أثناء تنفيذ JavaScript في سلسلة المحادثات الرئيسية. أو بعبارةٍ أخرى، لا يمكن للمتصفّح الاستجابة لتفاعلات المستخدمين عندما تكون سلسلة المحادثات الرئيسية مشغولة. لتحسين ذلك، اتّبِع الخطوات التالية:

إنهاء المهام الطويلة

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

المهام الطويلة هي فترات تنفيذ JavaScript يمكن للمستخدمين من خلالها العثور على واجهة المستخدم غير مستجيبة. يمكن استخدام أي رمز يحظر سلسلة التعليمات الرئيسية لمدة 50 ملي ثانية أو أكثر على أنها مهمة طويلة. تُعد المهام الطويلة علامة على احتمال تضخم JavaScript (أيّ تحميل وتنفيذ أكثر مما قد يحتاجه المستخدم في الوقت الحالي). يمكن أن يؤدي تقسيم المهام الطويلة إلى تقليل تأخير الإدخال على موقعك الإلكتروني.

المهام الطويلة في "أدوات مطوري البرامج في Chrome"
تعرض "أدوات مطوري البرامج في Chrome" المهام الطويلة في لوحة الأداء
.

من المفترض أن يتحسن مقياس FID بشكل ملحوظ مع اتّباع أفضل الممارسات مثل تقسيم الرموز البرمجية وتقسيمها المهام الطويلة رغم أن TBT ليست مقياسًا ميدانيًا، إلا أنها مفيدة للتحقق من التقدم نحو تحسين وقت التفاعل (TTI) ومهلة الاستجابة الأولى (FID).

تحسين صفحتك لزيادة الجاهزية للتفاعل

هناك عدد من الأسباب الشائعة لضعف نتائج مقياس FID وTBT في تطبيقات الويب التي تعتمد بشكلٍ كبير على JavaScript:

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

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

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

تحسينات في نتيجة TBT في Lighthouse بعد تحسين النص البرمجي الخاص بالطرف الأول

يمكن أن يؤثر جلب البيانات على العديد من جوانب الجاهزية للتفاعل

  • يمكن أن يؤدي انتظار عرض شلال من عمليات الجلب المتتالية (مثل JavaScript وجلب البيانات للمكوّنات) إلى وقت استجابة التفاعل المؤثر. احرص على تقليل الاعتماد على عمليات استرجاع البيانات المتتالية.
  • يمكن لمخازن البيانات المضمَّنة الكبيرة زيادة وقت تحليل HTML والتأثير في سرعة عرض محتوى الصفحة والتفاعل معها. والمقاييس. استهدف تقليل كمية البيانات التي يجب معالجتها بعد المعالجة من جانب العميل.

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

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

استخدام عامل على الويب

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

يمكنك استخدام المكتبات التالية لتسهيل استخدام العاملين على الويب على موقعك الإلكتروني:

  • Comlink: مكتبة مساعدة مختصة بالتجريد postMessage ويسهل استخدامها
  • Workway: مُصدِّر مشغِّل على الويب للأغراض العامة
  • العمل: نقل وحدة إلى عامل على الويب

تقليل وقت تنفيذ JavaScript

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

لتقليل مقدار JavaScript الذي يتم تنفيذه على صفحتك:

  • تأجيل محتوى JavaScript غير المستخدَم
  • الحدّ من أخطاء polyfill غير المستخدَمة

تأجيل محتوى JavaScript غير المستخدَم

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

علامة تبويب التغطية في Chrome يمكن أن تُطلعك "أدوات مطوري البرامج" على مقدار JavaScript الذي لا يتم استخدامه على صفحة الويب.

علامة التبويب "التغطية"

للحدّ من استخدام JavaScript غير المستخدَم:

  • تقسيم الرمز البرمجي إلى أجزاء متعدّدة
  • تأجيل أي محتوى JavaScript غير مهم، بما في ذلك النصوص البرمجية التابعة لجهات خارجية، باستخدام async أو defer

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

import('module.js').then((module) => {
  // Do something with the module.
});

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

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

  • في حال استخدام webpack، التجميع، أو Parcel كأداة تجميع الوحدات، استفد من دعم الاستيراد الديناميكي.
  • أطر العمل من جانب العميل، مثل التفاعل، Angular، تقدِّم Vue تجريدًا لتسهيل التحميل الكسول على مستوى المكوِّن.

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

<script defer src="…"></script>
<script async src="…"></script>

يجب تحميل جميع النصوص البرمجية التابعة لجهات خارجية مع defer، ما لم يكن هناك سبب محدّد لعدم تنفيذ ذلك. أو async تلقائيًا.

الحدّ من أخطاء polyfill غير المستخدَمة

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

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

لتحسين استخدام رموز polyfill على موقعك الإلكتروني:

  • في حال استخدام Babel كمحوّل ترجمة، استخدِم @babel/preset-env لتضمين رموز polyfill فقط اللازمة للمتصفحات التي تخطط للاستهداف. بالنسبة إلى Babel 7.9، فعِّل خيار bugfixes لقطع المزيد على أي رموز polyfill غير ضرورية
  • استخدِم النمط unit/noModule لإرسال حزمتين منفصلتين (@babel/preset-env أيضًا). يتيح ذلك عبر target.esmodules)

    <script type="module" src="modern.js"></script>
    <script nomodule src="legacy.js" defer></script>
    

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

أدوات المطوّرين

يتوفّر عدد من الأدوات لقياس FID وتصحيح الأخطاء فيه:

وشكرًا لكل من "فيليب والتون" و"كايس باسك" و"إيليا غريغوريك" و"آني سوليفان" على مراجعاتهم.