גופני רשת: הגדרת טעינה ללא אובדן CLS

איך גופנים מאטים את האתר שלך ומה לעשות בנידון

בפרויקט עם תנועה גבוהה, שמנו לב ש-LCP עלה ב-1.2 שניות עקב טעינת גופן מותאם אישית. הדפדפן חיכה ל-Google Fonts חמש פעמים (משקלים שונים), והמשתמשים ראו מסך ריק למשך שתי שניות שלמות. לאחר הגדרה נכונה של font-display, preload ו-subset, צמצמנו את הזמן ל-0.4 שניות—ו-CLS ירד מ-0.25 ל-0.01. התיקון לקח 6 שעות אך השתלם עם שיפור של 40% ב-Core Web Vitals.

במאמר זה, נראה לך כיצד להגדיר גופנים מבלי לאבד ביצועים. תלמד אילו ערכי font-display לבחור, כיצד לטעון מראש גופנים קריטיים, למה subsetting חשוב, ולמה אירוח עצמי עדיף על Google Fonts. נשתף גם מקרים אמיתיים מהפרקטיקה שלנו—מעל 50 פרויקטים עם אופטימיזציה של גופנים.

למה font-display: swap לא פותר CLS

@font-face { font-family: 'InterFallback'; src: local('Arial'); ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; size-adjust: 107%; } body { font-family: 'Inter', 'InterFallback', sans-serif; } מציג גופן מערכת מיד, ואז מחליף לגופן המותאם אישית. עם זאת, אם הגופן לא נטען תוך 100 אלפיות השנייה, מתרחש re-layout—CLS עולה. כדי להימנע מכך, יש לפצות על הבדלי המידות בין הגופן המותאם אישית לגופן החלופי. השתמש במאפיינים fontaine, size-adjust, <link rel="preload" href="/fonts/inter-regular.woff2" as="font" type="font/woff2" crossorigin> <link rel="preload" href="/fonts/inter-700.woff2" as="font" type="font/woff2" crossorigin> ו-pip install fonttools brotli pyftsubset inter-regular.ttf \ --unicodes="U+0020-007E,U+00A0-00FF,U+0400-045F,U+0490-0491" \ --layout-features="kern,liga,calt" \ --flavor=woff2 \ --output-file=inter-regular-subset.woff2 :

@font-face {
  font-family: 'InterFallback';
  src: local('Arial');
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
  size-adjust: 107%;
}
body {
  font-family: 'Inter', 'InterFallback', sans-serif;
}

כדי למצוא ערכים מדויקים, השתמש בחבילת @fontsource-variable/inter או בפונקציה המובנית next/font של Next.js—היא מייצרת אוטומטית גופן חלופי עם מידות נכונות. כפי שנאמר בתיעוד MDN, שימוש ב-size-adjust משיג CLS מינימלי. לפי Web Almanac, טעינת גופנים לא נכונה מגדילה את CLS בממוצע ב-0.15.

Preload: רק קבצים קריטיים

טעינה מראש של כל הגופנים בעמוד היא טעות נפוצה. הדפדפן נאלץ לטעון 5–6 קבצים בתור תחרותי, מה שמאט משאבים אחרים. טען מראש רק גופנים מעל לקפל—לדוגמה, המשקלים הרגיל והמודגש לכותרות:

<link rel="preload" href="/fonts/inter-regular.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/fonts/inter-700.woff2" as="font" type="font/woff2" crossorigin>

איך Subsetting מקטין את גודל הגופן פי 5–10

הגופן Inter המלא כולל לטינית, קירילית, יוונית, עברית, ושוקל כ-500 KB. לאחר subsetting לתווים הנדרשים בלבד (קירילית + לטינית בסיסית), הגודל יורד ל-30–80 KB—חיסכון של פי 5–10. השתמש ב-pyftsubset מספריית fonttools:

pip install fonttools brotli pyftsubset inter-regular.ttf \
    --unicodes="U+0020-007E,U+00A0-00FF,U+0400-045F,U+0490-0491" \
    --layout-features="kern,liga,calt" \
    --flavor=woff2 \
    --output-file=inter-regular-subset.woff2

גופנים באירוח עצמי מהירים ב-200+ אלפיות שנייה מ-Google Fonts

Google Fonts מוסיף חיפוש DNS, לחיצת יד TLS וזמן השהיה בין-מקור. גופנים באירוח עצמי:

• מבטלים בקשה נוספת לדומיין צד שלישי
• מאפשרים HTTP/2 push (אם כי preload עדיף)
• עובדים גם כאשר Google חסום (לדוגמה, בסין)

מדידות מראות שאירוח עצמי על אותו CDN מאיץ את LCP ב-200–300 אלפיות שנייה בהשוואה ל-Google Fonts. אנו ממליצים להוריד גופנים דרך google-webfonts-helper או להתקין את חבילת npm @fontsource-variable/inter.

מה כלול בעבודת אופטימיזציית גופנים

אם תזמין שירות זה מאיתנו, התוצאה כוללת:

• ביקורת גופנים נוכחיים—ניתוח משקל, מספר סגנונות, מקור (Google Fonts/אירוח עצמי)
• Subsetting—יצירת subsets לקירילית ולטינית
• אירוח עצמי—העברת גופנים לשרת או CDN שלך
• הגדרת font-display—ערכים נכונים לגופנים קריטיים ולא קריטיים
• טעינה מראש של קבצים קריטיים—רק עבור מעל לקפל
• פיצוי CLS—גופן חלופי עם מידות נכונות
• תיעוד—תיאור כל השינויים והמלצות תחזוקה

לוח זמנים: 4 עד 8 שעות בהתאם למספר הגופנים והמשקלים. העלות מחושבת באופן אישי—צור קשר לקבלת הערכה לפרויקט שלך.

לצוות שלנו יש ניסיון של 10+ שנים בביצועי אינטרנט והסמכה ב-Google Core Web Vitals. אנו מבטיחים שיפור במדדים: LCP יירד לפחות ב-30%, ו-CLS יהיה מתחת ל-0.1. הזמן אופטימיזציית גופנים עם שיפור מובטח במדדים. צור קשר לביקורת אתר מקיפה.