ב-Codelab הזה מוסבר איך לטעון מראש גופן אינטרנט באמצעות rel="preload" כדי להסיר
כל הבהוב של טקסט ללא עיצוב (FOUT).
מדידה
לפני שמוסיפים אופטימיזציה, צריך למדוד את ביצועי האתר.
- כדי לראות תצוגה מקדימה של האתר, לוחצים על הצגת האפליקציה. לאחר מכן לוחצים על
מסך מלא
. - מקישים על 'Control+Shift+J' (או על 'Command+Option+J' ב-Mac) כדי לפתוח את כלי הפיתוח.
- לוחצים על הכרטיסייה Lighthouse.
- מוודאים שתיבת הסימון ביצועים מסומנת ברשימה קטגוריות.
- לוחצים על הלחצן יצירת דוח.
בדוח Lighthouse שנוצר מוצג רצף האחזור של המשאבים, בקטע זמן אחזור מקסימלי של נתיב קריטי.
בבדיקה שלמעלה, גופני האינטרנט הם חלק משרשרת הבקשות הקריטית ומאוחזרים אחרונים. שרשרת הבקשות הקריטית מייצגת את סדר המשאבים שהדפדפן מתעדף ומאחזר. באפליקציה הזו, גופני האינטרנט (Pacfico ו-Pacifico-Bold) מוגדרים באמצעות הכלל @font-face והם המשאב האחרון שאוחזר על ידי הדפדפן בשרשרת הבקשות הקריטית. בדרך כלל, גופנים מסוג Webfonts נטענים באופן מדורג, כלומר הם לא נטענים עד להורדת המשאבים הקריטיים (CSS, JS).
זהו רצף המשאבים שאוחזרו באפליקציה:
טעינה מראש של גופן אינטרנט
כדי להימנע מ-FOUT, ניתן לטעון מראש גופן אינטרנט שנדרש באופן מיידי. צריך להוסיף את הרכיב Link לאפליקציה הזו בראש המסמך:
<head>
<!-- ... -->
<link rel="preload" href="/assets/Pacifico-Bold.woff2" as="font" type="font/woff2" crossorigin>
</head>
המאפיינים as="font" type="font/woff2" מורים לדפדפן להוריד את המשאב הזה כגופן ועוזרים לתעדף את תור המשאב.
המאפיין crossorigin מציין אם צריך לאחזר את המשאב באמצעות בקשת CORS, כי יכול להיות שהגופן הגיע מדומיין אחר. בלי המאפיין הזה, הדפדפן מתעלם מהגופן שנטען מראש.
מאחר שנעשה שימוש ב-Pacifico-Bold בכותרת הדף, הוספנו תג טעינה מראש כדי לאחזר אותו מוקדם יותר. לא חשוב לטעון מראש את הגופן Pacifico.woff2 כי הטקסט מעוצב בחלק הנגלל.
טוענים מחדש את האפליקציה ומפעילים שוב את ה-Lighthouse. בודקים את הקטע זמן אחזור מקסימלי של נתיב קריטי.
שימו לב איך מתבצעת הסרה של Pacifico-Bold.woff2 משרשרת הבקשות הקריטית. הוא אוחזר מוקדם יותר באפליקציה.
בטעינה מראש, הדפדפן יודע שצריך להוריד את הקובץ הזה מוקדם יותר. חשוב לציין שאם לא משתמשים בצורה נכונה, הטעינה מראש עלולה לפגוע בביצועים כי היא שולחת בקשות מיותרות למשאבים שלא נמצאים בשימוש.