ב-Codelab הזה נסביר איך לטעון מראש גופנים לאינטרנט באמצעות rel="preload" כדי להסיר כל הבזק של טקסט לא מעוצב (FOUT).
מדידה
קודם כל, מודדים את ביצועי האתר לפני שמוסיפים אופטימיזציות.
- כדי לראות תצוגה מקדימה של האתר, לוחצים על View App (הצגת האפליקציה) ואז על Fullscreen (מסך מלא)
. - מקישים על `Control+Shift+J` (או על `Command+Option+J` ב-Mac) כדי לפתוח את כלי הפיתוח.
- לוחצים על הכרטיסייה Lighthouse.
- מוודאים שהתיבה Performance מסומנת ברשימה Categories.
- לוחצים על הכפתור יצירת דוח.
בדוח Lighthouse שנוצר, רצף האחזור של המשאבים מוצג בקטע זמן אחזור מקסימלי בנתיב הקריטי.
בביקורת שלמעלה, הגופנים לאינטרנט הם חלק משרשרת הבקשות הקריטיות והם מאוחזרים אחרונים. שרשרת הבקשות הקריטיות מייצגת את סדר המשאבים שהדפדפן מתעדף ומאחזר. באפליקציה הזו, הגופנים לאינטרנט (Pacfico ו-Pacifico-Bold) מוגדרים באמצעות הכלל @font-face והם המשאב האחרון שהדפדפן מאחזר בשרשרת הבקשות הקריטיות. בדרך כלל, גופני אינטרנט נטענים בטעינה מדורגת, כלומר הם לא נטענים עד שהמשאבים הקריטיים (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 הוסר משרשרת הבקשות הקריטיות. הוא מאוחזר בשלב מוקדם יותר באפליקציה.
באמצעות טעינה מראש, הדפדפן יודע שהוא צריך להוריד את הקובץ הזה מוקדם יותר. חשוב לציין שאם לא משתמשים בטעינה מראש בצורה נכונה, היא עלולה לפגוע בביצועים על ידי שליחת בקשות מיותרות למשאבים שלא נמצאים בשימוש.