החל מ-Chrome 83, אפשר לשלב rel="preload" ו-font-display: אפשר לשלב אופציונלי כדי להסיר לגמרי את ה-jank של הפריסה
גרסה 83 של Chrome 83 מבצעת אופטימיזציה של מחזורי העיבוד וכך מונעת שינוי בפריסה במהלך טעינה מראש של גופנים אופציונליים.
השילוב של <link rel="preload">
עם font-display: optional
הוא הדרך היעילה ביותר להבטיח שאין בעיות jank לפריסה במהלך עיבוד גופנים מותאמים אישית.
תאימות דפדפן
בדוק את נתוני MDN לקבלת מידע עדכני על תמיכה בדפדפנים שונים:
עיבוד גופנים
שינוי הפריסה, או פריסה מחדש, מתרחש כאשר משאב בדף אינטרנט משתנה באופן דינמי, וכתוצאה מכך נוצר "שינוי" בתוכן. אחזור ועיבוד של גופני אינטרנט יכולים לגרום ישירות לשינויים בפריסה באחת משתי דרכים:
- גופן חלופי מוחלף בגופן חדש ('הבהוב של טקסט ללא עיצוב')
- טקסט "בלתי נראה" מוצג עד שגופן חדש יוצג בדף ("הבהוב של טקסט בלתי נראה")
מאפיין ה-CSS font-display
מאפשר לשנות את התנהגות הרינדור של גופנים מותאמים אישית באמצעות מגוון ערכים נתמכים שונים (auto
, block
, swap
, fallback
ו-optional
). בחירת הערך שבו תשתמש תלויה בהתנהגות המועדפת של גופנים שנטענו באופן אסינכרוני. עם זאת, עד עכשיו, כל אחד מהערכים הנתמכים האלה יכול להפעיל פריסה מחדש באחת משתי הדרכים שרשומות למעלה.
גופנים אופציונליים
במאפיין font-display
נעשה שימוש בציר זמן של שלוש תקופות לטיפול בגופנים שיש להוריד לפני העיבוד שלהם:
- חסימה: עיבוד טקסט בלתי נראה, אבל מעבר לגופן האינטרנט ברגע שמסתיימת הטעינה.
- החלפה: עיבוד הטקסט בגופן מערכת חלופי, אבל החלפה לגופן האינטרנט ברגע שהטעינה מסתיימת.
- כישלון: עיבוד הטקסט בגופן חלופי של המערכת.
בעבר, לגופנים שהוקצו עם font-display: optional
הייתה תקופת חסימה של 100 אלפיות השנייה ולא הייתה תקופת החלפה. המשמעות היא שטקסט בלתי נראה מוצג לזמן קצר לפני שעוברים לגופן חלופי. אם לא מורידים את הגופן תוך 100 אלפיות השנייה, נעשה שימוש בגופן החלופי ולא מתבצעת החלפה.
עם זאת, אם הורדת הגופן מתבצעת לפני סיום פרק הזמן של הבלוקים של 100 אלפיות השנייה, הגופן המותאם אישית מעובד ונעשה בדף שימוש.
Chrome מעבד מחדש את הדף פעמיים בשני המקרים, גם אם נעשה שימוש בגופן החלופי וגם אם הטעינה של הגופן המותאם אישית הסתיימה בזמן. מצב זה גורם להבהוב קל של טקסט בלתי נראה, ובמקרים שבהם מתבצע עיבוד של גופן חדש, לג'נק פריסה שמזיז חלק מתוכן הדף. זה קורה גם אם הגופן נשמר במטמון הדיסק של הדפדפן ויכול להיטען הרבה לפני שתקופת החסימה מסתיימת.
אופטימיזציות נחתו ב-Chrome 83 כדי להסיר לחלוטין את מחזור העיבוד הראשון של גופנים אופציונליים שנטענו מראש באמצעות <link rel="preload'>
.
במקום זאת, העיבוד נחסם עד לסיום הטעינה של הגופן המותאם אישית או עד שיחלוף פרק זמן מסוים. הזמן הקצוב לתפוגה מוגדר כרגע ל-100 אלפיות השנייה, אבל יכול להיות שהוא ישתנה בעתיד הקרוב
כדי לבצע אופטימיזציה של הביצועים.
טעינה מראש של גופנים אופציונליים ב-Chrome מבטלת את האפשרות ליצור בעיות בממשק (jank) ובפלאש של טקסט לא מעוצב. הפעולה הזו תואמת להתנהגות הנדרשת כפי שצוינה ברמת מודול 4 של CSS Fonts, שבה הגופנים האופציונליים אף פעם לא אמורים לגרום לפריסה מחדש, וסוכני המשתמש יכולים לעכב את העיבוד למשך פרק זמן מתאים.
למרות שאין צורך לטעון מראש גופן אופציונלי, זה משפר משמעותית את הסיכוי שהוא ייטען לפני מחזור העיבוד הראשון, במיוחד אם הוא עדיין לא מאוחסן במטמון של הדפדפן.
סיכום
צוות Chrome ישמח לשמוע שהחוויות שלכם טענו מראש גופנים אופציונליים בעזרת האופטימיזציות החדשות האלה! אם נתקלתם בבעיות או שאתם רוצים להפסיק לקבל הצעות לתכונות, דווחו על בעיה.