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