אופטימיזציה של סדר העדיפויות של הסקריפטים

תכונות באינטרנט: אחזור עדיפות

דפדפנים מקצים עדיפויות ברירת מחדל לסקריפטים על סמך המיקום שלהם במסמך ואם יש להם מאפיינים כמו 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 הוא שיפור הדרגתי (progressive enhancement). דפדפנים שלא תומכים במאפיין הזה יתעלמו ממנו וישתמשו בלוגיקת התזמון הפנימית שלהם בלי שגיאה. לא נדרש זיהוי תכונות מפורש או לוגיקה חלופית לשימוש בסיסי.