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