פונטים זו אחת הסיבות הנפוצות לאתרים איטיים. הם כבדים, נטענים מ-Google Fonts או ממקור אחר, ובזמן שהם נטענים, הקורא רואה אחת משני דברים, FOIT או FOUT.
FOIT ו-FOUT
FOIT (Flash of Invisible Text)
הטקסט אינו מופיע עד שהפונט נטען. הקורא רואה רק כפתורים ותמונות.
FOUT (Flash of Unstyled Text)
הטקסט מופיע מיד עם פונט default. כשה-custom font נטען, הוא מתחלף, וזה מקפיץ את הטקסט.
שניהם מציקים. הפתרון הוא אסטרטגיית טעינה נכונה.
הפתרונות
1. font-display: swap
ב-CSS:
@font-face {
font-family: 'OpenSansHebrew';
src: url('/fonts/opensans.woff2') format('woff2');
font-display: swap;
}swap אומר, "תציג מיד עם fallback, ואחר כך תחליף". מקבלים FOUT אבל לא FOIT.
2. preload
<link rel="preload" href="/fonts/opensans.woff2" as="font" type="font/woff2" crossorigin>
הbrowser מתחיל להוריד את הפונט מיד, לא מחכה לCSS.
3. self-hosted
במקום Google Fonts, להוסיף את הפונט לאתר שלכם. מהיר יותר, פרטיות יותר.
4. WOFF2 only
בעבר היו פורמטים רבים. היום WOFF2 לבד. תומך בכל הדפדפנים המודרניים, קטן ומהיר.
5. subset
אם אתם משתמשים רק בעברית, אין צורך בכל סט התווים של הפונט. תורידו רק את החלק שצריך.
טעויות נפוצות
1. הרבה weights
אם אתם משתמשים רק ב-regular ו-bold, אל תטענו את כל ה-weights. כל weight זה קובץ נפרד.
2. Google Fonts ב-head
טעינה ישירה ב-head היא render-blocking. השתמשו ב-preload או async.
3. אין fallback
אם הפונט לא נטען, מה הקורא רואה? תגדירו fallback fonts.
סיכום
fonts זה דבר קטן עם השפעה גדולה. תקדישו 30 דקות, תקבלו אתר שטוען מהר ונראה טוב.
רוצה עזרה ממוקדת ל-SEO באתר שלך?
אני שמוליק דורינבאום — יועץ SEO ב-20+ שנות ניסיון. אם המאמר הזה נתן לך כיוון ואתה רוצה ליישם על האתר שלך, יש לי קורס קידום אתרים חינמי מלא, או שאפשר לקפוץ לשיחת ייעוץ אישית.