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