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

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

איך הביקורת של Lighthouse על font-display נכשלת

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

צילום מסך של הביקורת 'הבטחה שהטקסט יישאר גלוי במהלך טעינות של גופני webfont' ב-Lighthouse

איך נמנעים מהצגת טקסט בלתי נראה

‫font-display API מציין איך גופן מוצג כשמשתמשים בו בסגנון 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 כשמגדירים גופנים בהתאמה אישית.

משאבים