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

קייטי המפניוס

בארי פולארד

למה זה חשוב לך?

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

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

ברירות המחדל של הדפדפן להצגת גופנים

אלה התנהגויות ברירת המחדל של טעינת גופנים בדפדפנים נפוצים:

הצגה מיידית של הטקסט

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

אפשרות 1: שימוש ב-font-display

font-display הוא API לציון אסטרטגיה של תצוגת גופנים. swap מורה לדפדפן שטקסט זה צריך להיות מוצג מיד באמצעות גופן מערכת. כשהגופן המותאם אישית מוכן, גופן המערכת יוחלף.

/* Before */
@font-face {
  font-family: Helvetica;
}

/* After */
@font-face {
  font-family: Helvetica;
  font-display: swap;
}

אם דפדפן מסוים לא תומך ב-font-display, או בכל הדפדפנים המודרניים, הדפדפן ימשיך לפעול בהתאם להתנהגות ברירת המחדל לטעינת גופנים.

אפשרות מס' 2: להמתין לשימוש בגופנים מותאמים אישית עד שהם ייטענו

אם נדרשת עבודה רבה יותר, ניתן יהיה לשקול גישה מותאמת אישית יותר.

הגישה הזו מורכבת משלושה חלקים:

• אין להשתמש בגופן מותאם אישית בטעינה הראשונית של הדף על ידי ארגון הקוד מחדש (Refactoring) של ה-CSS כך שלא ישתמש בגופנים מותאמים אישית בהתחלה. כך הדפדפן יציג טקסט באופן מיידי באמצעות גופן המערכת.
• זיהוי מתי הגופן המותאם אישית נטען באמצעות CSS Font Browser API
• צריך לעדכן את עיצוב הדף לשימוש בגופן המותאם אישית.

// Define a FontFace
const font = new FontFace("myfont", "url(myfont.woff)");

// Add to the document.fonts (FontFaceSet)
document.fonts.add(font);

// Load the font
font.load();

// Wait until the fonts are all loaded
document.fonts.ready.then(() => {
  // Update the CSS to use the fonts
});

ניתן לעשות זאת גם באמצעות ספריית FontFaceObserver, שבחלקן יש ממשק API קל יותר לשימוש.

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

אימות

אפשר להריץ את Lighthouse כדי לוודא שנעשה שימוש ב-font-display: swap כדי להציג טקסט:

1. מקישים על Control+Shift+J (או על Command+Option+J ב-Mac) כדי לפתוח את כלי הפיתוח.
2. לוחצים על הכרטיסייה Lighthouse.
3. מוודאים שתיבת הסימון ביצועים מסומנת ברשימה קטגוריות.
4. לוחצים על הלחצן יצירת דוח.

מוודאים שהביקורת מוודאים שהטקסט נשאר גלוי במהלך טעינת webfont עוברת.