השימוש בגופן נפוץ ברוב דפי האינטרנט ולעיתים קרובות כולל שגיאות. רבות מהשגיאות הללו משפיעות לרעה על תקציב ביצועי האינטרנט. מאמר זה נועד לספק מידע על השימוש בגופן אינטרנט ולעזור לשפר את ביצועי האינטרנט שלך.
כפי שמוצג בהיררכיה המיושמת בעת רינדור כל דף אינטרנט, רכיבי גופן יכולים לעכב את הרינדור של אלמנטים אחרים עד לטעינתם. ניהול נכון של עיכוב זה חשוב הן עבור תפיסת פריסה מצטברת (CLS) והן לתפיסת המשתמש.
הבעיה עם טעינת גופנים
עד לטעינת הגופנים של העמוד, הנראות של הגופנים במהלך תהליך העיבוד של HTML ו-CSS משתנה מדפדפן לדפדפן. להלן תקציר של האופן שבו דפדפנים שונים מטפלים במצב זה:
| דפדפן | התנהגות ברירת מחדל אם הגופן אינו מוכן... |
|---|---|
| אדג ' | משתמש בגופן מערכת עד שהגופן מוכן. מחליף גופן. |
| Chrome | יסתיר טקסט עד 3 שניות. אם הטקסט עדיין לא מוכן, השתמש בגופן מערכת עד שהגופן מוכן. מחליף גופן. |
| Firefox | יסתיר טקסט עד 3 שניות. אם הטקסט עדיין לא מוכן, השתמש בגופן מערכת עד שהגופן מוכן. מחליף גופן. |
| ספארי | מסתיר טקסט עד שהגופן מוכן. |
לטפל בבעיה הזו מבלי להסתמך על התנהגות הדפדפן, הוצג הפרמטר font-display. נכון לעכשיו, 92% מהדפדפנים תומכים בפרמטר ה-font-display.
מה עושה תצוגת גופנים?
במהלך תהליך טעינת הדפים, מראה הגופנים עשוי להשתנות עד לטעינתם במלואה, בהתאם לדפדפן. לדוגמה, גרסאות מסוימות של דפדפן Safari מסתירות את הטקסט עד לטעינת הגופן. ה תצוגת גופן: החלפה פרמטר CSS מתקן התנהגות זו על ידי הצגת הטקסט באמצעות גופן מערכת עד לטעינת קבצי הגופן. לאחר טעינת הגופנים, גופן המערכת מוחלף לגופן המיועד. הנה דוגמה לשימוש:
@font-face {
font-family: 'Awesome Font';
font-style: normal;
font-weight: 400;
font-display: swap;
}טעינת גופנים מראש
באמצעות לטעון גופנים לפני נתיב הרינדור הקריטי יכול למנוע פערים בזמן טעינת הגופנים.
בונוס: גישת התעשייה לשימוש בגופן
על פי נתוני SimilarTech, בואו נסתכל על מגמה חשובה ותמונת מצב של עולם האינטרנט. הגרף הראשון למטה מציג את השימוש בגופן ב-10,000 הדפים המובילים, והגרף השני מציג את השימוש בגופן ב-100,000 האתרים המובילים. בואו נבחן תחילה את הגרפים האלה:
יש הבדל של 5% בשימוש בגוגל גופן ו-Font Awesome בין 10,000 האתרים המובילים ל-100,000 האתרים המובילים. זה אומר לנו ש-10,000 האתרים המובילים ביצעו אופטימיזציה לשימוש בגופן. אנו ממליצים לבחון זאת כנושא ראוי לציון. שקול כיצד תוכל ליישם גופני אינטרנט עם פתרונות משלך.
בונוס 2: סטטיסטיקת שימוש בגוגל גופן וגופן מדהים
בהתייחס לבונוס הראשון, אנו מציעים לבחון את שני הגרפים המציגים את ההיקף המספרי של ספריות הגופנים הנפוצות ביותר. מספר הדומיינים הייחודיים כאן עולה על מיליונים, והמיליונים האלה מייצגים את מתחרי ה-SEO שלך. שימוש טוב ואופטימלי יותר בספריות אלה מאחרות יכול לעזור לך להתבלט.
על ידי ביצוע טיפים אלה ואופטימיזציה של השימוש בגופן, תוכל לשפר משמעותית את ביצועי האינטרנט וחווית המשתמש שלך.
