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

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

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

הנחיות ספציפיות למקבץ

Drupal

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

Magento

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

משאבים