בשיעור הזה תלמדו איך לטעון מראש גופנים של אינטרנט באמצעות rel="preload" כדי להסיר הבזקים של טקסט ללא עיצוב (FOUT).
מדידה
קודם כול, כדאי למדוד את ביצועי האתר לפני שמוסיפים אופטימיזציות.
- כדי לראות תצוגה מקדימה של האתר, לוחצים על הצגת האפליקציה. לאחר מכן לוחצים על מסך מלא
. - מקישים על Control+Shift+J (או על Command+Option+J ב-Mac) כדי לפתוח את DevTools.
- לוחצים על הכרטיסייה Lighthouse.
- מוודאים שהתיבה ביצועים מסומנת ברשימה קטגוריות.
- לוחצים על הלחצן יצירת הדוח.
בדוח 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. בודקים את הקטע Maximum critical path latency (זמן האחזור המקסימלי בנתיב הקריטי).
שימו לב שה-Pacifico-Bold.woff2 הוסר משרשור הבקשות הקריטיות. הוא מאוחזר מוקדם יותר באפליקציה.
כשמשתמשים בהורדה מראש, הדפדפן יודע שהוא צריך להוריד את הקובץ הזה מוקדם יותר. חשוב לציין שאם לא משתמשים בה באופן נכון, טעינת האתר מראש עלולה להזיק לביצועים על ידי שליחת בקשות מיותרות למשאבים שלא נמצאים בשימוש.