יש לוודא שהטקסט ממשיך להופיע במהלך טעינת webfont

גופנים הם בדרך כלל קבצים גדולים עם זמני טעינה איטיים. דפדפנים מסוימים מסתירים טקסט עד שהגופן נטען, וגורם להבהוב של טקסט בלתי נראה (FOIT).

איך נכשלת הבדיקה של תצוגת הגופנים ב-Lighthouse

ב-Lighthouse סומן כל כתובת URL של גופנים שעלולה להבהב טקסט בלתי נראה:

צילום מסך של Lighthouse צריך לוודא שהטקסט נשאר גלוי במהלך הבדיקה של טעינת Webfont

איך למנוע הצגה של טקסט מוסתר

ה-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 כאשר מגדירים גופנים מותאמים אישית.

משאבים