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