FOUT יכול להיווצר כאשר הדפדפן ממתין לטעינת הפונט המבוקש של האתר שלנו, ועד אז הוא מציג פונט ברירת מחדל.
בפוסט היום אציג בפניכם דרכים למזעור FOUT ושימוש בכלי Font Style Matching לאופטימיזציית פונטים.
לפני שאנחנו מדברים על FSM, חשוב לי להסביר מה זה FOUT, מה זה CLS, איך פונטים יכולים לייצר Layout Shift ואיך להתגבר על זה.
לממהרים, הסבר על FSM יביא אתכם לאזור על FSM.
מה זה FOUT?
Flash of Unstyled Text – פלאש של טקסט לא מעוצב, קורה כאשר אנחנו משתמשים בפונט שונה מפונט ברירת מחדל של המערכת. הדפדפן טוען קודם כל פונט ברירת מחדל (system font), מה שלא מייצר אף בקשת טעינה. לאחר שהטקסט נטען, ישנם מספר פריימים שבו מתחלף ונטען הפונט המבוקש מ-system font לפונט שבשימוש באתר שלנו. דוגמה בעזרת גיף:
היתרון של שימוש בפונט ברירת מחדל, שהוא מבטל כל סוג של פלאש שיכול להיווצר כתוצאה מטעינת פונט לוקאלי או של פונט גוגל, ללא פעולות אופטימיזציה נוספות.
הרשימה של system fonts בין מערכות שונות משתנה.
רשימה של פונט מערכת שוורדפרס משתמשת בהתאמה למכשיר:
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue",sans-serif.
ברוב המקרים כשנרצה להשתמש ב-fallback font אנחנו נשתמש ברשימה הזו (הערת מערכת: מה זה נרצה? חייבים להשתמש ב-fallback font!).
ברוב הפעמים אני משתמש ב- Sans-serif – בהלימה לצרכי נגישות וחוקי הנגישות בישראל. אישית, מעדיף לבנות פרויקטים עם פונט שהוא סאנס-סריפי מראש, על מנת למנוע חוויית משתמש לא נוחה.
איך לנצח FOUT?
Display=swap
ישנן מספר דרכים להציג font-display: block / swap / fallback / optional
- Block -יסתיר טקסט עד שלוש שניות בזמן ההמתנה לפונט מותאם אישית, ותמיד יחליף בפונט האינטרנט כאשר הוא נטען.
- Swap – יציג טקסט בהקדם האפשרי, ותמיד יחליף בפונט האינטרנט כאשר הוא נטען.
- Fallback – יסתיר טקסט עד 100ms, ולאחר מכן יחליף בפונט האינטרנט רק אם הוא נטען תוך שלוש שניות.
- Optional – יסתיר טקסט עד 100ms, ולאחר מכן ישתמש רק בפונט האינטרנט אם הוא זמין – אף פעם לא יחליף.
אילוסטרציה שעיצבה Monica Dinculescu. עשיתי התאמה לתמונה כהה לנוחות:
לרוב הפונטים של גוגל ניתן לעשות display=swap שבעצם ממזער חלק מה-FOUT.
על מנת למזער את זמן ה-FOUT נרצה לצרף לכל בקשת טעינה של גוגל פונט, חיבור של preconnect ואפילו prefetch ל- URL של fonts.gstatic.com.
Prefetch
Prefetch מתבצע כאשר תוכן מורד ברקע, והוא מבוסס על ההנחה שסביר להניח שהתוכן יתבקש (על ידי משתמש הקצה), מה שמאפשר לתוכן להיטען באופן מיידי אם וכאשר משתמש הקצה יבקש זאת. התוכן מורד ומאוחסן במטמון לשימוש עתידי צפוי מבלי שהמשתמש יגיש בקשה מפורשת לכך.
דוגמה נהדרת תהיה DNS Prefetching:
DNS Prefetching טוענת שמות דומיינים מראש ובכך מזרזת את זמני הטעינה על ידי הפחתת הזמן הקשור לחיפוש דומיין בזמן הבקשה (DNS lookup).
Preconnect
Preconnect (חיבור מראש) הוא רמז למשאב שאומר לדפדפן לבצע חיבור HTTP יזום לדומיין שהדפדפן עדיין לא קבע שיש לבצע. יצירת חיבור HTTP לוקחת שלבים רבים, כולל: ביצוע חיפוש DNS (DNS lookup), חיבור TCP, ניהול משא ומתן על חיבור TLS מאובטח.
הפעולות הללו יכולות לקחת עשרות ואפילו מאות אלפיות שניות. חיבור מוקדם משפר את הביצועים מכיוון שכאשר הדפדפן אכן מבין שצריך ליצור חיבור כדי להוריד משאב, החיבור הזה כבר קרה!
דוגמה מתאימה תהיה חיבור preconnect לפונטים של גוגל. כאשר אתם מטמיעים את ה-CSS של הפונטים תראו שמצטרף לחגיגה בקשת preconnect.
החיבורים הללו יעזרו לשפר את זמני ה- Time to Interact.
מה זה FOIT?
לפעמים יהיו פרויקטים שלא נרצה להשתמש ב-FOUT ולהראות טקסט בפונט מערכת לא מעוצב, ולכן נפנה לפתרון של FOIT.
הדגמה קטנה מ-Codepen:
Flash Of Invisible Text – פלאש של טקסט בלתי נראה – עד שהפונט שלנו יטען, הטקסט יהיה בלתי נראה. זו לא הדרך המומלצת אם אתם מעוניינים להראות את הטקסט כמה שיותר מהר.
בהערות של כלים לשיפור מהירות טעינת אתר ניתן לראות הערה: “ensure text remains visible during web font load” – בעצם, כשדפדפן מזהה שיש פונט מותאם אישית לטקסט, הוא ימתין עד שהפונט יטען על מנת להציג אותו, ועד אז הטקסט בלתי נראה.
בשביל להבין את זה יותר טוב, יש כאן סרטון של גיג'ו וארגסה שמראה בצורה ויזואלית מה קורה בזמן FOIT
איך לטפל ולמזער FOIT?
טיפול ב-FOIT יטפל גם בהערה: “ensure text remains visible during Webfont load“
יש font-face property שקוראים לה font-display שמאפשרת לקבל את ה-VALUES הבאים: auto, block, swap, fallback, optional. מה שאנחנו נרצה להטמיע זה swap
Display: swap;.
במאמר שג'יגו כתב על FOIT אפשר לרדת יותר לעומק של טיפול במזעור זמן טעינה בלתי נראה של פונט.
למעוניינים, במאמר של CSS-Tricks יש הסבר על ההבדלים בין FOUT / FOIT / FOFT
איך פונטים יכולים לייצר CLS?
שינויי פרישה בלתי צפויים (תוכן הדף זז ללא אינטראקציה של המשתמש) פוגעת בחוויית המשתמש. פונטים גורמים לשינויים בפרישה כאשר גודל הרכיב המכיל (למשל פסקה) משתנה כאשר הדפדפן מוריד את הפונט המותאם אישית שלנו. זה מתרחש כאשר גובה הפונט או אורך הפסקה שונה עם הפונט שלנו בהשוואה לפונט מערכת (ברירת מחדל).
בעת פרישת עמוד, דפדפן ישתמש במידות ובמאפיינים של פונט חלופי כדי לקבוע את גודל האלמנטים המכילים, גם אם הכרזנו על פונט מותאם אישית שיחסום את פונט ברירת המחדל באמצעות font-display:block.
מה זה בכלל CLS?
Cumulative Layout Shift – יציבות חזותית של עמוד אינטרנט. מדידת פרישה של רכיבים המתרחשת במהלך מחזור החיים של העמוד. שינויים לא צפויים בפרישת עמוד אינטרנט גורמים ל-CLS. כאלו שלא נעשו על ידי משתמש קצה, יגרעו מחווית הגלישה הכללית.
גוגל מתמקדת בחוויות הגולש, ולכן כל מה שירמז על חוסר יציבות יוביל ל-CLS.
האם אי-פעם קראתם פוסט באינטרנט כשמשהו משתנה באופן לא צפוי בדף?
ללא אזהרה הטקסט זז, ואיבדתם את מקומכם, או אפילו יותר גרוע: אתם עומדים ללחוץ על קישור או כפתור, אבל רגע לפני שאתם לוחצים – בום – הקישור זז, ובסופו של דבר אתם לוחצים על משהו אחר!
רוב הזמן חוויות מסוג זה פשוט מעצבנות ובמקרים מסוימים עלולות לגרום לנזק אמיתי.
תזוזה לא צפויה של תוכן העמוד מתרחשת בדרך כלל בגלל שהמשאבים נטענים באופן אסינכרוני או שרכיבי DOM מתווספים באופן דינמי לדף מעל התוכן הקיים. האשם יכולה להיות תמונה או סרטון עם ממדים לא ידועים, גופן שהופך לגדול או קטן מפונט ברירת המחדל שלו, או מודעה או ווידג'ט של צד שלישי שמשנים את גודלם באופן דינמי.
הדרך החדשה שגוגל מודדת CLS:
בגדול, הדרך החדשה שגוגל מודדת CLS היא על ידי מקסימום חלון סשן עם שניית רווח ועד 5 שניות. הדרך מתמקדת בחישוב הכללי של CLS ובציון ממוצע על רצף של כמה סשנים.
לקריאה מעמיקה יותר בכל נושא ה-CLS אפשר לקרוא בכתבה של Web.Dev
איך משפרים CLS בכללי?
הבעיות העיקריות שגורמות ל-CLS הינן:
- תמונות ללא ממדים מוגדרים
- מודעות, iframes ללא ממדים מוגדרים
- תוכן דינמי שמוטמע באיחור
- פונטים שגורמים ל-FOIT/FOUT
- פעולות שמחכות לתגובת רשת לפני שמתעדכן ה-DOM.
אפשר ליצור רק על זה מאמר ומחקר מקיף ארוך מאוד, הפעם בחרתי להתמקד בפונטים.
ניתן לקרוא עוד בפוסט של אדי אוסמני ב-web.dev.
שי תודר כתב מאמר מקיף איך לשפר את ה-CLS באנגלית.
כלי לאיתור באגים של CLS
המטרה של הכלי ש-Fili בנה היא ליצור ויזואליזציה של יציבות חזותית בעמוד אינטרנט על מנת לזהות חוסר יציבות שמצריך טיפול בנייד או מחשב.
הדיבאגר משתמש ב- Layout Instability API in Chromium על מנת לזהות ולמדוד תזוזתיות כשעמוד אינטרנט נטען וכשהוא מסיים לטעון, עם חישוב הפערים, בשביל לתת ציון CLS.
המלבנים הירוקים בתמונה מייצגים היכן יש Layout Shift
Cumulative Layout Shift Debugger
הפתרון: טעינה לוקאלית של פונטים
גוגל פונטס מייצר בקשות חיצוניות לשרתים של גוגל. יש עם זה מספר בעיות, ש-GDPR היא אחת מהן, בית משפט קנס אתר בגרמניה על שימוש בגוגל פונטס – הקנס היה רק 100 אירו, שזה לא נורא, אך זה רק מבשר כמה גוגל היא לא GDPR Compliant..
הפתרון הוא כמובן טעינה לוקאלית של הפונטים שאנחנו רוצים להשתמש בהם.
יתרונות טעינה לוקאלית של פונטים:
- חוסך משאבים של קריאות חיצוניות בעת טעינת אתר
- GDPR Compliant
- מאפשר לבצע טעינה עם חשיבות גבוהה לקבצי הפונטים שלנו
דרכים להטמעת פונט לוקאלי בוורדפרס
- למשתמשי אלמנטור: מאוד פשוט להטמיע פונטים בצורה לוקאלית באלמנטור
- למתכנתים שלא משתמשים בפייג' בילדרים: כאן יש הסבר איך להטמיע פונטים בצורה לוקאלית
- אתרים ותיקים עם הרבה תוכן ובסיס בנייה לא מסודרת, הייתי פונה להשתמש בתוסף OMGF – בשימוש החינמי מצריך לחפש ידנית את הפונטים שנטענים, רישיון פרו מחפש ומוצא את הפונטים בצורה אוטומטית בכל האתר. לעוד יתרונות, בדקו את העמוד של OMGF Pro.
אם תרצו שארחיב בפוסט נפרד על התוסף OMGF Pro – תגידו לי.
*שימו לב שכאשר אתם מורידים את הפונטים מגוגל, אתם מקבלים קובץ TTF, יש צורך להמיר את הקובץ ל-WOFF2 & WOFF בשביל תמיכה מקסימלית בכל הדפדפנים וייעול האופטימיזציה של הפונטים.
כלי חינמי שאני משתמש להמרת קבצי TTF ל-WOFF2 & WOFF
איך למזער FOUT של פונטים לוקאליים?
חשוב לי לציין שאי-אפשר להתחמק בצורה מלאה מ-FOUT, אך כן חשוב לדעת למזער את זה למינימום של המינימום.
שימוש באמצעות פונטים לוקאליים מאוד עוזר, ויותר מזה, כשעושים Preloading לפונטים לוקאליים זה ממזער את הפלאש של טקסט לא מעוצב.
גם שימוש בפונטים של גוגל עם הדרכים שציינתי (preloading, prefetching & display: swap) יעזור.
בשני המקרים, נרצה להשתמש ב-fallback font – פונט ברירת מחדל שדומה לפונט הסופי שלנו. זה יעזור למזער את כמות ה-FOUT וה-CLS שיכולים להיווצר כתוצאה מהחלפת פונט ברירת מחדל לפונט לוקאלי.
אם פונט ברירת המחדל שלכם הוא סריפי, ואתם משתמשים בפונט סאנס-סריפי, ה-FOUT יהיה הרבה יותר מאשר שימוש בפונט ברירת מחדל סאנס-סריפי לפונט סאנס-סריפי.
לדוגמה: אם אנחנו משתמשים בפונט אסיסטנט (Assistant)/ רוביק (Rubik), שימוש בפונט ברירת מחדל Sans-serif ימזער את ה-FOUT לכמות מינימאלית.
מה שמוביל אותי לפתרון הבא: Font Style Matcher
מה זה Font Style Matcher?
אם אתם משתמשים בפונט מותאם באתר שלכם, הגולשים יראו פלאש של טקסט לא מעוצב (FOUT), בין העיבוד הראשוני של פונט ברירת מחדל לפונט האינטרנט שבחרתם.
בדרך כלל גורם לשינוי צורם בפרישה (CLS), עקב פערי גודל בין שני הפונטים. כדי למזער את הפער הזה, אפשר לנסות להתאים את הפונט החלופי ואת ה-x-heights והרוחב של פונט ה-web המיועד. FSM עוזר לעשות בדיוק את זה.
FSM הוא כלי מדהים שמוניקה יצרה, לינק לעמוד שלה באנגלית
במידה ותרצו ליצור או לארח את הכלי הזה אצלכם באתר ניתן להוריד את הקבצים מהגיטהאב של מוניקה
מה ה-FSM עושה?
בקצרה, זהו כלי שמאפשר לנו בעזרת ויזואליזציה להתאים את גודל פונט ברירת המחדל בהתאמה לעיצוב של פונט האינטרנט שלנו, ומייצא לנו כ-6 שורות CSS שצריך להטמיע בקבצי תבנית-בת או בעזרת תוסף סניפטים לכל האתר.
Font Style Matcher לפונטים בעברית
האם יש התאמת עיצוב פונט-מערכת לפונט אינטרנט מותאם בשפה עברית?! כן!
דרור לימר עיברת את ה-FSM שמוניקה יצרה, ומכאן אפשר להשתמש בו גם בשביל פונטים בעברית!
Font Style Matcher לפונטים בעברית
כן כן, ביקשתי מדרור להטמיע קצת דארק מוד כי אני אוהב חושך.
דוגמה לשימוש:
הקוד שה-FSM בעברית הוציא כאשר סימנתי את פונט המערכת בתור סאנס-סריף, והפונט המותאם של הבלוג: רוביק.
@font-face {
font-family:'sans-serif';
font-size: 23px;
line-height: 1.5;
letter-spacing: 0.3px;
word-spacing: 0.325px;
}סיכום
הפעם יצאתי לחקור על כל עולם ה-CLS, שבאמת מהווה גורם בעייתי לא קטן לאתרים ישנים וחדשים.
אופטימיזציה לעולם לא נגמרת בהטמעה של תוסף קאש והוספת טעינה עצלה לתמונות.
עם הזמן אנחנו זוכים לעוד ועוד פיצ'רים של תוספי מטמון שבאמת מועילים לנו כמו Remove Unused CSS, יצירה של WEBP לתמונות ואפילו קביעת ממדים קבועים לתמונות, או פיצ'רים שיכולים לפגוע בנו כמו Delay JS. אך האופטימיזציה לא נגמרת גם שם.
מקווה שהצלחתי להנגיש לכם מידע וכלים שיעזרו להתאים את מאית השניה למניעת תזוזה של האתר שלכם כתוצאה מפונטים לא מתאימים לעיצוב של אתרכם.
אשמח לדעת איך תשתמשו בכלי החדש, ואם הצלחתי ללמד אתכם משהו בנוסף.
קריאה וירידה נוספת לפרטים:
