تحسين أولوية النصوص البرمجية

ميزات الويب: أولوية الجلب

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

كيفية الإعداد

  1. تحديد النصوص البرمجية المهمة: حدِّد النصوص البرمجية الضرورية للوظيفة الأساسية للصفحة أو لتفاعل المستخدم الأولي.
  2. إعطاء الأولوية للنصوص البرمجية غير المتزامنة المهمة: بالنسبة إلى النصوص البرمجية المهمة التي يتم تحميلها باستخدام async أو defer، أضِف السمة fetchpriority="high" لضمان منحها الأولوية خلال مرحلة الاكتشاف.
  3. إلغاء أولوية النصوص البرمجية غير الأساسية: بالنسبة إلى النصوص البرمجية غير المطلوبة على الفور (مثل الإحصاءات أو الإعلانات أو التطبيقات المصغّرة في الجزء غير المرئي من الصفحة)، أضِف fetchpriority="low" وتأكَّد من أنّها تتضمّن السمة async أو defer أو module لتجنُّب الحظر.
  4. تسلسل النصوص البرمجية التي تحظر المحلل اللغوي: استخدِم fetchpriority="low" في النصوص البرمجية التي تحظر المحلل اللغوي في نهاية النص الأساسي لمنعها من التنافس على معدل نقل البيانات مع الموارد الأكثر أهمية.

مثال على الرمز

<!-- Elevate the priority of the critical app logic -->
<script src="/js/app.js" async fetchpriority="high"></script>

<!-- Deprioritize non-essential tracking scripts -->
<script src="/js/tracker.js" async fetchpriority="low"></script>

<!-- Deprioritize late-body scripts to favor critical images or CSS -->
<script src="/js/legacy-widgets.js" fetchpriority="low"></script>

أفضل الممارسات

  • إلزامي: استخدِم fetchpriority="high" فقط على نص برمجي واحد أو نصين برمجيين مهمين على الأكثر لتجنُّب ازدحام الشبكة وتقليل تعزيز الأولوية.
  • يجب استخدام fetchpriority="high" خصيصًا لنصوص async البرمجية المعروفة بأنّها مهمة لمقياس "مدى استجابة الصفحة لتفاعلات المستخدم" (INP).
  • يجب خفض أولوية النصوص البرمجية غير المطلوبة لتجربة المستخدم الأولية باستخدام fetchpriority="low".
  • لا تستخدِم fetchpriority في كل علامة برمجية، بل يجب استخدامها فقط لتغيير الإرشادات التلقائية للمتصفّح عندما تكون غير مثالية.
  • لا تستخدِم السمة importance المتوقّفة نهائيًا. وتم استبداله بـ fetchpriority.

استراتيجية احتياطية

السمة fetchpriority هي تحسين تدريجي. أما المتصفحات التي لا تتيح هذه السمة، فستتجاهلها وتستخدم منطق الجدولة الداخلي بدون ظهور أي خطأ. لا يلزم رصد الميزات بشكل صريح أو استخدام منطق احتياطي للاستخدام الأساسي.