Font Style Matcher

FSM - Font Style matching בלעז או - התאמת עיצוב פונט, ולא Flying Spaghetti Monster (כפי שלרגע חשבתם, נכון?), זהו כלי אשר עוזר למזער את הנזק ש-FOUT יוצר לנו בעת טעינת האתר.

תוכן עניינים

מחפשים את תוכן העניינים?
הרכיב נמצא בתחתית המסך בצד שמאל 🙂

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

בפוסט היום אציג בפניכם דרכים למזעור FOUT ושימוש בכלי Font Style Matching לאופטימיזציית פונטים.

לפני שאנחנו מדברים על FSM, חשוב לי להסביר מה זה FOUT, מה זה CLS, איך פונטים יכולים לייצר Layout Shift ואיך להתגבר על זה.

לממהרים, הסבר על FSM יביא אתכם לאזור על FSM.

מה זה FOUT?

Flash of Unstyled Text – פלאש של טקסט לא מעוצב, קורה כאשר אנחנו משתמשים בפונט שונה מפונט ברירת מחדל של המערכת. הדפדפן טוען קודם כל פונט ברירת מחדל (system font), מה שלא מייצר אף בקשת טעינה. לאחר שהטקסט נטען, ישנם מספר פריימים שבו מתחלף ונטען הפונט המבוקש מ-system font לפונט שבשימוש באתר שלנו. דוגמה בעזרת גיף:

FOUT From Serif To Assistant
FOUT From Serif To Assistant

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

הרשימה של 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. עשיתי התאמה לתמונה כהה לנוחות:

Font Display Visualisation
Font Display Visualisation

לרוב הפונטים של גוגל ניתן לעשות 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

Google Fonts – Text hidden while loading font

איך לטפל ולמזער 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.

האם אי-פעם קראתם פוסט באינטרנט כשמשהו משתנה באופן לא צפוי בדף?
ללא אזהרה הטקסט זז, ואיבדתם את מקומכם, או אפילו יותר גרוע: אתם עומדים ללחוץ על קישור או כפתור, אבל רגע לפני שאתם לוחצים – בום – הקישור זז, ובסופו של דבר אתם לוחצים על משהו אחר!

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

דוגמה ל-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 Pro – תגידו לי.

*שימו לב שכאשר אתם מורידים את הפונטים מגוגל, אתם מקבלים קובץ TTF, יש צורך להמיר את הקובץ ל-WOFF2 & WOFF בשביל תמיכה מקסימלית בכל הדפדפנים וייעול האופטימיזציה של הפונטים.
כלי חינמי שאני משתמש להמרת קבצי TTF ל-WOFF2 & WOFF

איך למזער FOUT של פונטים לוקאליים?

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

גם שימוש בפונטים של גוגל עם הדרכים שציינתי (preloading, prefetching & display: swap) יעזור.

בשני המקרים, נרצה להשתמש ב-fallback font – פונט ברירת מחדל שדומה לפונט הסופי שלנו. זה יעזור למזער את כמות ה-FOUT וה-CLS שיכולים להיווצר כתוצאה מהחלפת פונט ברירת מחדל לפונט לוקאלי.

אם פונט ברירת המחדל שלכם הוא סריפי, ואתם משתמשים בפונט סאנס-סריפי, ה-FOUT יהיה הרבה יותר מאשר שימוש בפונט ברירת מחדל סאנס-סריפי לפונט סאנס-סריפי.

FOUT From Serif To Assistant
FOUT From Serif To Assistant

לדוגמה: אם אנחנו משתמשים בפונט אסיסטנט (Assistant)/ רוביק (Rubik), שימוש בפונט ברירת מחדל Sans-serif ימזער את ה-FOUT לכמות מינימאלית.

FOUT From Sans Serif To Assistant
FOUT From Sans Serif To Assistant

מה שמוביל אותי לפתרון הבא: Font Style Matcher

מה זה Font Style Matcher?

אם אתם משתמשים בפונט מותאם באתר שלכם, הגולשים יראו פלאש של טקסט לא מעוצב (FOUT), בין העיבוד הראשוני של פונט ברירת מחדל לפונט האינטרנט שבחרתם.
בדרך כלל גורם לשינוי צורם בפרישה (CLS), עקב פערי גודל בין שני הפונטים. כדי למזער את הפער הזה, אפשר לנסות להתאים את הפונט החלופי ואת ה-x-heights והרוחב של פונט ה-web המיועד. FSM עוזר לעשות בדיוק את זה.

FSM הוא כלי מדהים שמוניקה יצרה, לינק לעמוד שלה באנגלית

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

מה ה-FSM עושה?

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

Font Style Matcher לפונטים בעברית

האם יש התאמת עיצוב פונט-מערכת לפונט אינטרנט מותאם בשפה עברית?! כן!
דרור לימר עיברת את ה-FSM שמוניקה יצרה, ומכאן אפשר להשתמש בו גם בשביל פונטים בעברית!

Font Style Matcher לפונטים בעברית

כן כן, ביקשתי מדרור להטמיע קצת דארק מוד כי אני אוהב חושך.

דוגמה לשימוש:

Font Style Matching Heebo & Sans-Serif

הקוד שה-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. אך האופטימיזציה לא נגמרת גם שם.

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

אשמח לדעת איך תשתמשו בכלי החדש, ואם הצלחתי ללמד אתכם משהו בנוסף. 

קריאה וירידה נוספת לפרטים:

שתפו את הפוסט:

פייסבוק
וואטסאפ
לינקדאין
אי-מייל
מעוניינים לקבל עדכונים על פוסטים שאני כותב במייל? >>

איך לעשות תוכן עניינים רספונסיבי, דינמי ודביק

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

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

לקריאת הפוסט

הגדרות מתקדמות ל- WP-Rocket

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

לקריאת הפוסט

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *

דילוג לתוכן