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

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

מתי ביקורת תצוגת הגופן של Lighthouse נכשלת

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

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

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

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 כדי לוודא שהטעינה מראש של הגופנים לא גורמת לנסיגה בביצועים.

הנחיות ספציפיות ל-stack

Drupal

אפשר לציין @font-display כשמגדירים גופנים בהתאמה אישית בעיצוב.

Magento

אפשר לציין @font-display כשמגדירים גופנים בהתאמה אישית.

משאבים