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

Katie Hempenius
Katie Hempenius
X
Barry Pollard

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

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

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

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

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

דפדפן פעולת ברירת המחדל אם הגופן לא מוכן...
Chrome ו-Edge הטקסט יוסתר למשך עד 3 שניות. אם הטקסט עדיין לא מוכן, הוא ישתמש בגופן מערכת עד שהגופן יהיה מוכן ולאחר מכן יוחלף הגופן.
Firefox הטקסט יוסתר למשך עד 3 שניות. אם הטקסט עדיין לא מוכן, הוא ישתמש בגופן מערכת עד שהגופן יהיה מוכן ולאחר מכן יוחלף הגופן.
Safari הסתרת הטקסט עד שהגופן יהיה מוכן.

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

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

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

תמיכה בדפדפן

  • 60
  • 79
  • 58
  • 11.1

מקור

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

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

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

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

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

תמיכה בדפדפן

  • 35
  • 79
  • 41
  • ‏10

מקור

אם תשקיעו קצת יותר מאמץ, נוכל לשקול גישה מותאמת אישית יותר.

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

  • לא מומלץ להשתמש בגופן מותאם אישית בטעינה הראשונית של הדף. כדי לעשות את זה צריך לשנות את הקוד של ה-CSS כך שלא ישתמש בהתחלה בגופנים מותאמים אישית. הדבר מבטיח שהדפדפן יציג טקסט באופן מיידי באמצעות גופן מערכת.
  • זיהוי מתי הגופן המותאם אישית נטען באמצעות CSS Font בטעינה
  • צריך לעדכן את עיצוב הדף כדי להשתמש בגופן בהתאמה אישית.
// 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 עברה את הביקורת.