אופטימיזציה של הטעינה והרינדור של WebFont

Ilya Grigorik
Ilya Grigorik
X דף הבית

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

כדי לטפל בבעיה של קבצים גדולים שמכילים את כל הווריאציות, כלל ה-CSS @font-face תוכנן במיוחד כדי לאפשר לכם לפצל את משפחת הגופנים לאוסף של משאבים. לדוגמה, קבוצות משנה של Unicode וגרסאות ייחודיות של סגנונות.

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

התנהגות ברירת המחדל.

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

נתיב עיבוד קריטי של גופן

  1. הדפדפן מבקש את מסמך ה-HTML.
  2. הדפדפן מתחיל לנתח את תגובת ה-HTML ולבנות את ה-DOM.
  3. הדפדפן מגלה CSS , JS ומשאבים אחרים ושולח בקשות.
  4. הדפדפן בונה את ה-CSSOM אחרי שכל התוכן ב-CSS מתקבל ומשלב אותו עם עץ ה-DOM כדי ליצור את עץ העיבוד.
    • בקשות גופנים נשלחות אחרי שעץ העיבוד מציין אילו וריאנטים של גופנים נדרשים כדי לעבד את הטקסט שצוין בדף.
  5. הדפדפן מבצע פריסה ומצייר תוכן על המסך.
    • אם הגופן עדיין לא זמין, יכול להיות שהדפדפן לא יעבד פיקסלים של טקסט.
    • אחרי שהגופן זמין, הדפדפן יצבע את הפיקסלים של הטקסט.

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

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

טעינה מראש של משאבי WebFont

אם יש סבירות גבוהה שהדף יזדקק ל-WebFont במקום מסוים בכתובת URL שאתם מכירים מראש, תוכלו להשתמש בתעדוף משאבים. שימוש ב-<link rel="preload"> יגרום לשליחת בקשה ל-WebFont בשלב מוקדם של נתיב העיבוד הקריטי, ללא צורך להמתין ליצירת ה-CSSOM.

התאמה אישית של ההשהיה בעיבוד הטקסט

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

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

תמיכה בדפדפן

  • 60
  • 79
  • 58
  • 11.1

מקור

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

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

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

כדי לעבוד עם הנכס font-display, צריך להוסיף אותו לכללי @font-face:

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  font-display: auto; /* or block, swap, fallback, optional */
  src: local('Awesome Font'),
       url('/fonts/awesome-l.woff2') format('woff2'), /* will be preloaded */
       url('/fonts/awesome-l.woff') format('woff'),
       url('/fonts/awesome-l.ttf') format('truetype'),
       url('/fonts/awesome-l.eot') format('embedded-opentype');
  unicode-range: U+000-5FF; /* Latin glyphs */
}

בשלב זה ב-font-display יש תמיכה בטווח הערכים הבא:

  • auto
  • block
  • swap
  • fallback
  • optional

מידע נוסף על טעינה מראש של גופנים ועל המאפיין font-display זמין בפוסטים הבאים:

ממשק ה-API לטעינת גופנים

כשמשתמשים ב-<link rel="preload"> בשילוב עם ה-CSS font-display ביחד, יש לכם שליטה רבה על הטעינה והרינדור של גופנים, בלי להוסיף תקורה רבה. אבל אם אתם צריכים התאמות אישיות נוספות ואתם מוכנים לצבור את התקורה שנובעת מהרצת JavaScript, יש לכם אפשרות נוספת.

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

תמיכה בדפדפן

  • 35
  • 79
  • 41
  • 10

מקור

var font = new FontFace("Awesome Font", "url(/fonts/awesome.woff2)", {
  style: 'normal', unicodeRange: 'U+000-5FF', weight: '400'
});

// don't wait for the render tree, initiate an immediate fetch!
font.load().then(function() {
  // apply the font (which may re-render text and cause a page reflow)
  // after the font has finished downloading
  document.fonts.add(font);
  document.body.style.fontFamily = "Awesome Font, serif";

  // OR... by default the content is hidden,
  // and it's rendered after the font is available
  var content = document.getElementById("content");
  content.style.visibility = "visible";

  // OR... apply your own render strategy here...
});

בנוסף, מכיוון שאתם יכולים לבדוק את סטטוס הגופן (דרך check()) ולעקוב אחרי התקדמות ההורדה, תוכלו גם להגדיר אסטרטגיה מותאמת אישית לעיבוד טקסט בדפים שלכם:

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

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

חובה לשמור במטמון באופן תקין

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

אם באפליקציית האינטרנט שלכם נעשה שימוש ב-service worker, ניתן להשתמש במשאבי גופנים עם אסטרטגיה לשמירה על המטמון לרוב תרחישי השימוש.

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

רשימת משימות לטעינת WebFont

  • התאמה אישית של הטעינה והעיבוד של גופנים באמצעות <link rel="preload">, font-display או ה-Font לטעינת גופנים: התנהגות ברירת המחדל של טעינה עצלה עלולה לגרום לעיכובים בעיבוד הטקסט. התכונות האלה של פלטפורמת האינטרנט מאפשרות לשנות את ההתנהגות הזו לגבי גופנים מסוימים, ולהגדיר אסטרטגיות מותאמות אישית של עיבוד ושל זמן קצוב לתפוגה עבור תכנים שונים בדף.
  • להגדיר מדיניות של אימות מחדש ושמירה אופטימלית במטמון: גופנים הם משאבים סטטיים שמתעדכנים לעיתים רחוקות. חשוב לוודא שהשרתים מספקים חותמת זמן מקסימלית לטווח ארוך ואסימון אימות מחדש, כדי לאפשר שימוש חוזר יעיל בגופנים בדפים שונים. אם אתם משתמשים ב-Service Worker, כדאי להשתמש באסטרטגיה שמתמקדת במטמון.

בדיקה אוטומטית להתנהגות הטעינה של WebFont באמצעות Lighthouse

בעזרת Lighthouse תוכלו לוודא שאתם פועלים באופן אוטומטי בהתאם לשיטות המומלצות לאופטימיזציה של גופני אינטרנט.

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