גופנים הם בדרך כלל קבצים גדולים עם זמני טעינה איטיים. דפדפנים מסוימים מסתירים טקסט עד שהגופן נטען, וגורם להבהוב של טקסט בלתי נראה (FOIT).
איך נכשלת הבדיקה של תצוגת הגופנים ב-Lighthouse
ב-Lighthouse סומן כל כתובת URL של גופנים שעלולה להבהב טקסט בלתי נראה:
איך למנוע הצגה של טקסט מוסתר
ה-API של font-display
מציין איך גופן מוצג כשמשתמשים בו בתוך סגנון font-face
. הערכים הבאים של font-display
ינחו את הדפדפן להשתמש בגופן מערכת אם הגופן המותאם אישית לא מוכן:
swap
optional
fallback
דוגמה ל-CSS
@font-face {
font-family: 'Pacifico';
font-style: normal;
font-weight: 400;
src: local('Pacifico Regular'), local('Pacifico-Regular'),
url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2)
format('woff2');
font-display: swap;
}
דוגמה ל-Google Fonts
מוסיפים את הפרמטר &display=swap
/&display=optional
/&display=fallback
בסוף כתובת ה-URL ב-Google Fonts:
<link
href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
rel="stylesheet"
/>
איך למנוע תנודות בפריסה שנגרמות בגלל דחייה של גופנים
הצגה זמנית של גופן מערכת תחליף FOIT בהבזק של טקסט לא מעוצב (FOUT). הפעולה הזו משפרת את FCP&LCP על ידי רינדור התוכן מוקדם יותר, אבל ל-FOIT ול-FOUT תהיה אותה השפעה על ה-CLS כשהגופן המותאם אישית מחליף את גופן המערכת הזמני.
אפשר לצמצם את השפעת ה-CLS של טעינת גופנים באמצעות טעינות מראש בשילוב עם font-display: optional
.
עם זאת, שימוש יתר בטעינות מראש עלול להשפיע לרעה על מדדי הטעינה. מומלץ לבצע בדיקת A/B כדי לוודא שטעינה מראש של גופנים לא גורמת לרגרסיה של ביצועים.
הנחיות ספציפיות למקבץ
Drupal
אפשר לציין @font-display
כשמגדירים גופנים בהתאמה אישית בעיצוב.
Magento
ציין @font-display
כאשר מגדירים גופנים מותאמים אישית.