כנראה שראיתם את זה בלי לדעת איך קוראים לזה: טוענים דף, הטקסט נעלם לרגע, ואז מופיע פתאום ברגע שהפונט נטען. זה מה שנקרא Flash of Invisible Text, או בקיצור FOIT, וזו אחת הדרכים הערמומיות שבהן פונטים מותאמים אישית פוגעים במאמצי שיפור מהירות אתר שלכם.
הבשורה הטובה היא ש-FOIT ניתן לתיקון מלא. ברגע שמבינים למה זה קורה, התיקון לוקח דקות, לא ימים.
מה בעצם גורם למהבהוב הטקסט הבלתי נראה
פונטים מותאמים אישית לא מגיעים מובנים בדפדפן. צריך להוריד אותם, בדיוק כמו תמונה או סקריפט. כברירת מחדל, דפדפנים רבים מסתירים את הטקסט עד שקובץ הפונט מסיים להיטען. אם החיבור איטי, או שקובץ הפונט גדול, הטקסט המוסתר יכול להישאר בלתי נראה שנייה, שתיים, ואפילו שלוש שניות.
במהלך אותו חלון זמן, המבקר רואה דף ריק, או דף עם טקסט חסר במקום שבו אמורות להיות כותרות ופסקאות. זה מרגיש שבור, גם אם שאר הדף נטען בסדר גמור. וזה פוגע ישירות בציון Largest Contentful Paint (LCP), מכיוון שטקסט הוא לרוב האלמנט הגדול ביותר הנראה בדף.
FOIT מול FOUT: ההבדל ביניהם
יש בעיה קשורה שנקראת Flash of Unstyled Text, או FOUT. במקום להסתיר את הטקסט, הדפדפן מציג אותו מיד בפונט מערכת חלופי, ואז מחליף לפונט המותאם אישית שלכם ברגע שהוא מוכן. FOUT גורם לקפיצה נראית לעין כשהטקסט מסתדר מחדש, מה שעלול לגרום ל-layout shift. FOIT מסתיר את הבעיה אבל מעכב את התוכן. אף אחת מהאפשרויות לא מושלמת, אבל FOUT היא כמעט תמיד ברירת המחדל הבטוחה יותר, כי המבקר יכול לקרוא משהו מיד.
המאפיין font-display הוא התיקון הראשון שלכם
התיקון היעיל ביותר ל-FOIT הוא מאפיין ה-CSS בשם font-display. הוא אומר לדפדפן בדיוק איך להתנהג בזמן שהפונט נטען.
@font-face { font-family: 'YourFont'; src: url('yourfont.woff2') format('woff2'); font-display: swap; }הנה מה שהערכים הנפוצים בעצם עושים:
- auto - נותן לדפדפן להחליט, מה שבדרך כלל אומר FOIT בדפדפנים ישנים יותר
- block - מסתיר את הטקסט עד 3 שניות, ואז חוזר לפונט חלופי אם הפונט לא מוכן (זה מה שגורם ל-FOIT)
- swap - מציג טקסט חלופי מיד, ומחליף לפונט המותאם אישית ברגע שהוא מגיע, בלי שום תקופה של טקסט בלתי נראה
- fallback - תקופה קצרה של 100 מילישניות ללא טקסט נראה, ואז פונט חלופי, עם חלון קצר להחלפה
- optional - הדפדפן מחליט אם להשתמש בפונט המותאם אישית בכלל, בהתאם למהירות החיבור, מצוין למבקרים חוזרים
לרוב האתרים, swap היא הבחירה המעשית. היא מקריבה קפיצה ויזואלית קטנה תמורת טקסט קריא מובטח כבר מהרינדור הראשון.
טעינה מוקדמת של פונטים כדי שיגיעו מהר יותר
הגדרת font-display: swap עוצרת את הטקסט הבלתי נראה, אבל היא לא גורמת לפונט שלכם להגיע מהר יותר. כאן נכנסת לתמונה טעינה מוקדמת (preloading). דפדפנים מגלים פונטים המוזכרים ב-CSS שלכם די מאוחר בתהליך טעינת הדף, לרוב אחרי שקובץ ה-CSS עצמו כבר עובד ניתוח. רמז preload אומר לדפדפן להביא את קובץ הפונט מיד, במקביל לכל השאר.
<link rel="preload" href="/fonts/yourfont.woff2" as="font" type="font/woff2" crossorigin>כמה כללי אצבע כאן:
- טענו מראש רק פונטים שמופיעים מעל הקיפול (above the fold). טעינה מוקדמת של כל פונט באתר מעכבת משאבים חשובים אחרים.
- תמיד כללו crossorigin, גם עבור פונטים מאותו מקור, אחרת ה-preload נכשל בשקט בחלק מהדפדפנים.
- הישארו עם WOFF2. הוא קטן יותר מ-WOFF או TTF ונתמך על ידי כל דפדפן מודרני.
אם אתם משתמשים ב-WordPress, סוג כזה של טעינה מוקדמת של פונטים הוא משהו שתוסף שיפור ביצועים טוב או הגדרת פאנל יכולים לטפל בו אוטומטית כחלק מכוונון LCP, כך שלא תצטרכו לערוך תגי head ידנית בכל פעם שאתם מחליפים תבנית.
קיצוץ גודל קובץ הפונט לפני שהוא בכלל נטען
גם עם swap ו-preload במקום, קובץ פונט מנופח עדיין מאט את הדברים. רוב משפחות הפונטים כוללות הרבה יותר תווים ממה שהאתר שלכם באמת משתמש בהם. Subsetting מסיר את כל מה שלא צריך.
- השתמשו בכלים כמו glyphhanger או באפשרות ה-subsetting של Google Fonts כדי לשמור רק את קבוצות התווים שאתם באמת משתמשים בהן (לרוב רק לטינית, אלא אם אתם תומכים בשפות נוספות)
- הגבילו את מספר משקלי הפונט שאתם טוענים. טעינה של 6 משקלים של גופן כשאתם משתמשים רק ב-2 בעיצוב היא בזבוז נפוץ וקל לתיקון
- אחסנו את הפונטים בעצמכם במקום למשוך אותם מ-CDN של צד שלישי כשאפשר, כי זה מסיר חיפוש DNS נוסף והקמת חיבור נוספת, שני דברים שמוסיפים עיכוב מדיד
קובץ WOFF2 שעבר subsetting טוב יכול להתכווץ מ-150KB ל-20-30KB, וזה לרוב ההבדל בין פונט שמסיים להיטען לפני ה-first paint לבין אחרי.
מחברים הכל יחד: רצף טעינה מציאותי
אסטרטגיית פונטים מותאמת היטב נראית בערך כך:
- טעינה מוקדמת של קובץ פונט קריטי אחד או שניים הדרושים מעל הקיפול
- הגדרת font-display: swap על כל הצהרות ה-@font-face
- הגשת קבצי WOFF2 שעברו subsetting, מתארחים באתר עצמו כשאפשר
- שימוש ב-font-display: optional עבור פונטים דקורטיביים או משניים שאינם חיוניים לקריאות
השילוב הזה בדרך כלל מסלק לחלוטין את ה-FOIT ומשפר משמעותית גם את LCP וגם את Cumulative Layout Shift, מכיוון שהטקסט מרונדר מוקדם ולא קופץ הרבה ברגע שההחלפה מתרחשת.
סקרנו צווארי בקבוק דומים ברינדור באיך שיפור נתיב הרינדור הקריטי הופך את הדף שלכם לגלוי מהר יותר, כתבה ששווה לקרוא אם אתם רוצים את התמונה הרחבה יותר מעבר לפונטים בלבד. ואם ציוני LCP עדיין מבלבלים אתכם, איך ציוני Largest Contentful Paint חושפים את צווארי הבקבוק האמיתיים בהגדרת האחסון שלכם מפרק את מה שבאמת נמדד.
לסיכום
ה-Flash of Invisible Text הוא פרט טכני קטן עם השפעה גדולה מאוד על התחושה של מהירות האתר שלכם. תיקון הבעיה לא דורש עיצוב מחדש או תוכנית אחסון חדשה, רק כמה שורות CSS ותשומת לב לאילו פונטים אתם באמת טוענים. אם אתם רודפים אחרי ציוני שיפור מהירות אתר טובים יותר בכלים כמו PageSpeed Insights או GTmetrix, בדיקת ערכי ה-font-display שלכם היא אחד השיפורים המהירים ביותר שקיימים, וזה משהו שאתם יכולים לסיים כבר אחר הצהריים.
למבט רחב יותר על אבחון מהירות דף מעבר לפונטים, ראו את סקירת ניתוח מהירות הדף שלנו, ואם אתם מנהלים את זה על פני כמה אתרים, כלי שיפור הביצועים ל-WordPress שלנו יכולים לטפל בטעינה מוקדמת וכוונון נכסים בלי עריכות ידניות.
