למה זה חשוב לך?
גופנים הם בדרך כלל קבצים גדולים שטעינתם נמשכת זמן מה. כדי לפתור זאת, דפדפנים מסוימים מסתירים טקסט עד שהגופן נטען ('הבהוב של טקסט בלתי נראה').
עשוי להיות עיכוב ברינדור של המהירות שבה נטען רכיב התוכן הכי גדול (LCP). אם מבצעים אופטימיזציה לביצועים, מומלץ להימנע מ"הבהוב של טקסט בלתי נראה". (FOIT) ולהציג תוכן למשתמשים באופן מיידי באמצעות גופן מערכת, דבר שיוצר 'הבהוב של טקסט לא מעוצב' (FOUT).
ברירות המחדל של הדפדפן להצגת גופנים
אלה התנהגות ברירת המחדל לטעינת גופנים בדפדפנים נפוצים:
דפדפן | פעולת ברירת המחדל אם הגופן לא מוכן... |
---|---|
Chrome ו-Edge | הטקסט יוסתר למשך עד 3 שניות. אם הטקסט עדיין לא מוכן, משתמש בגופן מערכת עד שהגופן מוכן ואז מחליף את הגופן. |
Firefox | הטקסט יוסתר למשך עד 3 שניות. אם הטקסט עדיין לא מוכן, משתמש בגופן מערכת עד שהגופן מוכן ואז מחליף את הגופן. |
Safari | הסתרת הטקסט עד שהגופן יהיה מוכן. |
הצגה מיידית של הטקסט
במדריך הזה מפורטות שתי דרכים להציג טקסט בהקדם האפשרי: הגישה הראשונה היא פשוטה ויש בה תמיכה טובה בדפדפן. הגישה השנייה מפורטת יותר, אבל היא עשויה להציע לך אפשרויות נוספות. הבחירה הטובה ביותר לאתר תלויה בדרישות שלכם.
אפשרות 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: להמתין לשימוש בגופנים מותאמים אישית עד שהם נטענים
אם תשקיעו קצת יותר מאמץ, נוכל לשקול גישה מותאמת אישית יותר.
הגישה הזו מחולקת לשלושה חלקים:
- לא מומלץ להשתמש בגופן מותאם אישית בטעינה הראשונית של הדף. כדי לעשות את זה צריך לשנות את הקוד של ה-CSS כך שלא ישתמש בהתחלה בגופנים מותאמים אישית. ההגדרה הזו מבטיחה שהדפדפן יציג טקסט באופן מיידי באמצעות גופן מערכת.
- זיהוי מתי הגופן המותאם אישית נטען באמצעות CSS Font load 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
להצגת טקסט:
- מקישים על Control+Shift+J (או על Command+Option+J ב-Mac) כדי לפתוח את כלי הפיתוח.
- לוחצים על הכרטיסייה Lighthouse.
- מוודאים שתיבת הסימון ביצועים מסומנת ברשימה קטגוריות.
- לוחצים על הלחצן יצירת דוח.
מוודאים שמוודאים שהטקסט נשאר גלוי במהלך טעינת webfont עברה את הביקורת.