אופטימיזציה של עדיפות הטעינה מראש

טעינה מראש של משאבים באמצעות <link rel="preload"> מאותתת לדפדפן שיהיה צורך במשאב בקרוב. עם זאת, טעינות מראש מקבלות את העדיפות שמוגדרת כברירת מחדל לסוג המשאב, ובמיוחד לתמונות, העדיפות הזו נמוכה. השימוש ב-fetchpriority מאפשר לכם לחדד את העדיפות היחסית הזו, ובמיוחד להבטיח שתמונות שנטענות מראש נטענות בעדיפות גבוהה, כך שהן יכולות להתחיל מוקדם יותר ולהשתמש ביותר משאבי רוחב פס.

איך מטמיעים

1. זיהוי מועמדים לטעינה מראש: חפשו משאבים שהדפדפן לא מגלה בשלב מוקדם (למשל, תמונות פוסטר של סרטונים או תמונות רקע ב-CSS) אבל הם חיוניים למראה של הדף.
2. העלאת העדיפות של טעינה מראש של תמונות קריטיות: לתמונת ה-LCP או לתמונות קריטיות אחרות שלא מקבלות עדיפות כברירת מחדל, השתמשו ב-<link rel="preload" fetchpriority="high"> כדי לוודא שהן מקבלות עדיפות על פני טעינות מראש אחרות. שימו לב שהגופנים כבר נמצאים בעדיפות גבוהה כברירת מחדל.
3. הורדת העדיפות של טעינות מראש לא קריטיות: למשאבים שלא קריטיים לעיבוד הראשוני (למשל, סרטון רקע או גופנים משניים), משתמשים ב-<link rel="preload" fetchpriority="low">.
4. תיאום עם סוגי משאבים: שימו לב שלסוגים שונים של as יש עדיפויות שונות כברירת מחדל. השתמשו ב-fetchpriority כדי לשנות את ברירות המחדל האלה במקרה הצורך.

קוד לדוגמה

<!-- Elevate priority for a video poster image that acts as the LCP candidate -->
<link rel="preload" href="/images/video-poster.jpg" as="image" fetchpriority="high">

<!-- Elevate priority for a critical LCP image that is hidden in CSS -->
<link rel="preload" href="/images/hero-background.jpg" as="image" fetchpriority="high">

<!-- Deprioritize a secondary font to avoid network contention -->
<link rel="preload" href="/fonts/secondary-font.woff2" as="font" type="font/woff2" fetchpriority="low" crossorigin>

שיטות מומלצות

• חובה: כדי למנוע עומס ברשת ודילול של העדיפות, צריך להשתמש ב-fetchpriority="high" רק בטעינה מראש של תמונה קריטית אחת או שתיים לכל היותר.
• חובה: צריך להשתמש ב-fetchpriority="high" בתמונות של המהירות שבה נטען רכיב התוכן הכי גדול (LCP).
• מומלץ: להגביל את המספר הכולל של טעינות מראש בדף ל-2 תמונות ו-2-3 גופנים חיוניים לכל היותר, כדי למנוע תחרות על רוחב הפס.
• מומלץ להשתמש ב-fetchpriority="low" לטעינות מראש שאתם רוצים שהדפדפן יתחיל מוקדם, אבל לא על חשבון משאבים קריטיים (במיוחד גופנים לא קריטיים).
• חשוב לציין את המאפיין as בצורה נכונה כדי להבטיח שהטעינה מראש תתבצע.
• מומלץ להפוך משאבים קריטיים (כמו תמונות LCP) לניתנים לגילוי באופן סטטי ב-HTML באמצעות תגי <img>, במקום להסתמך על טעינה מראש של תמונות רקע.
• מומלץ לוודא שהטעינה מראש של הגופנים תמיד כוללת את המאפיין crossorigin (גם אם מדובר באותו מקור).
• אל תשתמשו במאפיין importance שהוצא משימוש. הוא הוחלף על ידי fetchpriority.

אסטרטגיית גיבוי

המאפיין fetchpriority ב-<link rel="preload"> הוא שיפור הדרגתי (progressive enhancement). דפדפנים שלא תומכים בזה עדיין יטענו מראש את המשאב באמצעות עדיפות ברירת המחדל שלהם לסוג המשאב הזה. כדי לוודא תאימות, תמיד צריך לספק את המאפיינים הנכונים של as ו-type.