דף זה תורגם על ידי Cloud Translation API.

שיטות מומלצות לגופנים

אופטימיזציה של גופני אינטרנט לבדיקת Core Web Vitals

Katie Hempenius

Barry Pollard

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

עיבוד טקסט מאחר: אם גופן אינטרנט לא נטען, הדפדפנים בדרך כלל מעכבים את העיבוד של הטקסט. במצבים רבים, הפעולה הזו גורמת לעיכוב בהצגת תוכן ראשוני (FCP). במצבים מסוימים, הפעולה הזו גורמת לעיכוב בהצגת חלק התוכן הגדול ביותר (LCP).
שינויים בפריסת הדף: החלפת הגופן עלולה לגרום לשינויים בפריסת הדף ולהשפיע על Cumulative Layout Shift ‏ (CLS). שינויי הפריסה האלה מתרחשים כשגופן אינטרנט וגופן החלופי שלו תופסים כמויות שונות של מקום בדף.

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

טעינת גופן

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

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

הכרטיסייה 'תזמון' ב'כלי פיתוח'.

הסבר על `@font-face`

לפני שממשיכים בשיטות המומלצות לטעינת גופנים, חשוב להבין איך @font-face פועל ואיך הוא משפיע על טעינת הגופנים.

ההצהרה @font-face היא חלק חיוני בעבודה עם כל גופן אינטרנט. לפחות, הוא מציין את השם שמשמש להפניה לגופן ואת המיקום של קובץ הגופן התואם.

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}

יש טעות נפוצה לגבי הבקשה של גופן כשנמצאה הצהרה @font-face. זה שגוי. ההצהרה על @font-face לא גורמת להורדת הגופן בפני עצמה. במקום זאת, מתבצעת הורדה של גופן רק אם יש הפניה אליו באמצעות סגנון שנעשה בו שימוש בדף. לדוגמה:

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}

h1 {
  font-family: "Open Sans"
}

בדוגמה הזו, Open Sans יורד רק אם הדף מכיל רכיב <h1>.

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

הצהרות גופנים מוטבעים

ברוב האתרים מומלץ להוסיף את הצהרות הגופן ואת סגנונות העיצוב החיוניים האחרים ב-<head> של המסמך הראשי, במקום לכלול אותם בגיליונות סגנונות חיצוניים. כך הדפדפן יכול לזהות את הצהרות הגופן מוקדם יותר, כי הוא לא צריך להמתין להורדה של גיליון סגנונות חיצוני.

<head>
  <style>
    @font-face {
        font-family: "Open Sans";
        src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
    }

    body {
        font-family: "Open Sans";
    }

    ...etc.

  </style>
</head>

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

קישור מראש למקורות חיוניים של צד שלישי

אם האתר שלכם טוען גופנים מאתר של צד שלישי, מומלץ מאוד להשתמש בהינט המשאב preconnect כדי ליצור קישורים מוקדמים למקור של הצד השלישי. צריך למקם את הטיפים לגבי המשאבים ב-<head> של המסמך. ההצעה הבאה לשימוש במשאבים מגדירה חיבור לטעינה של גיליון סגנונות הגופן.

<head>
  <link rel="preconnect" href="https://fonts.com">
</head>

כדי לבצע חיבור מראש של החיבור שמשמש להורדת קובץ הגופן, מוסיפים רמז משאב נפרד מסוג preconnect שמשתמש במאפיין crossorigin. בניגוד לגיליונות סגנונות, קובצי גופנים חייבים להישלח דרך חיבור CORS.

<head>
  <link rel="preconnect" href="https://fonts.com">
  <link rel="preconnect" href="https://fonts.com" crossorigin>
</head>

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

<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
</head>

חשוב להיזהר כשמשתמשים ב-`preload` כדי לטעון גופנים

אמנם האפשרות preload יעילה מאוד בזיהוי גופנים בשלב מוקדם של תהליך טעינת הדף, אבל היא גורמת לכך שחלק מהמשאבים של הדפדפן לא יהיו זמינים לטעינה של משאבים אחרים.

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

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

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

העברת גופן

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

שימוש בגופנים באירוח עצמי

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

אם אתם שוקלים להשתמש בגופנים שמתארחים באתר, עליכם לוודא שהאתר שלכם משתמש ברשת להעברת תוכן (CDN) וב-HTTP/2. בלי להשתמש בטכנולוגיות האלה, סביר הרבה יותר שגופנים באירוח עצמי יספקו ביצועים טובים יותר.

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

שימוש ב-WOFF2

מבין הגופנים המודרניים, WOFF2 הוא הגופן החדש ביותר, עם התמיכה הרחבה ביותר בדפדפנים והדחיסה הטובה ביותר. מכיוון שהוא משתמש ב-Brotli, דחיסת הנתונים ב-WOFF2 גבוהה ב-30% מאשר ב-Woff, מה שמוביל לירידה בנתונים להורדת נתונים, ולכן הביצועים יהיו מהירים יותר.

לאור התמיכה בדפדפנים, המומחים ממליצים עכשיו להשתמש רק ב-WOFF2:

למעשה, אנחנו חושבים שהגיע הזמן גם להכריז: השתמשו רק ב-WOFF2 ושכחו מכל השאר.

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

קבוצות משנה של גופנים

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

התיאור unicode-range בהצהרה @font-face מעדכן את הדפדפן באילו תווים אפשר להשתמש בגופן.

@font-face {
    font-family: "Open Sans";
    src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
    unicode-range: U+0025-00FF;
}

קובץ הגופן יורד אם הדף מכיל תו אחד או יותר שתואמים לטווח ה-Unicode. בדרך כלל משתמשים ב-unicode-range כדי להציג קובצי גופנים שונים, בהתאם לשפה של תוכן הדף.

בדרך כלל משתמשים ב-unicode-range בשילוב עם שיטת יצירת קבוצות משנה. גופן משנה כולל חלק קטן יותר מהגליפים שנכללו בקובץ הגופן המקורי. לדוגמה, במקום להציג את כל התווים לכל המשתמשים, אתר יכול ליצור גופנים נפרדים של קבוצות משנה לתווים לטיניים ולתווים קיריליים.

מספר הגליפים בכל גופן משתנה מאוד:

גופנים לטיניים מכילים בדרך כלל בין 100 ל-1,000 גליפים לכל גופן.
גופנים מסוג CJK יכולים להכיל יותר מ-10,000 תווים.

הסרת גליפים שלא בשימוש יכולה לצמצם משמעותית את גודל הקובץ של הגופן.

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

/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJbecnFHGPezSQ.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJnecnFHGPezSQ.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJfecnFHGPc.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

אם ספק הגופנים מאפשר זאת, אפשר ליצור קבוצת משנה של גופנים באופן ידני באמצעות API (Google Fonts תומך בכך באמצעות פרמטר text) או על ידי עריכת קובצי הגופנים באופן ידני ולאחר מכן אירוח עצמי. הכלים ליצירת קבוצות משנה של גופנים כוללים subfont ו-glyphanger.

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

שימוש בפחות גופנים לאינטרנט

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

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

כדי להשתמש בגופן המערכת ב-CSS, מציינים את system-ui כ-font-family:

font-family: system-ui

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

לא כולם נהנים מהמעבר לגופנים משתנים. גופנים של משתנים מכילים הרבה סגנונות, ולכן בדרך כלל הקבצים גדולים יותר מאשר גופנים נפרדים שאינם משתנים, שמכילים רק סגנון אחד. האתרים שבהם השימוש בגופנים משתנים יביא לשיפור הגדול ביותר הם אתרים שמשתמשים במגוון סגנונות ועוביים של גופנים (וצריך להשתמש בהם).

רינדור גופנים

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

דפדפנים שונים מטפלים בתרחיש הזה באופן שונה. כברירת מחדל, דפדפנים מבוססי Chromium ו-Firefox חוסמים את רינדור הטקסט למשך עד 3 שניות אם גופן האינטרנט המשויך לא נטען. דפדפן Safari חוסם את העיבוד של טקסט ללא הגבלת זמן.

אפשר להגדיר את ההתנהגות הזו באמצעות המאפיין font-display. לבחירה הזו יכולות להיות השלכות משמעותיות: font-display יכול להשפיע על LCP,‏ FCP ועל יציבות הפריסה.

בחירת אסטרטגיה מתאימה ל-`font-display`

font-display מידע לדפדפן על האופן שבו הוא צריך להמשיך בתהליך העיבוד של הטקסט כשהגופן הדיגיטלי המשויך לא נטען. ההגדרה מוגדרת לפי גופן.

@font-face {
  font-family: Roboto, Sans-Serif
  src: url(/fonts/roboto.woff) format('woff'),
  font-display: swap;
}

יש חמישה ערכים אפשריים ל-font-display:

ערך	חסימת הווסת	תקופת המכרז
אוטומטית	משתנה בהתאם לדפדפן	משתנה בהתאם לדפדפן
חסימה	2-3 שניות	בלתי מוגבל
החלף	0 אלפיות השנייה	בלתי מוגבל
חלופי	100 אלפיות שניה	3 שניות
אופציונלי	100 אלפיות שניה	ללא

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

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

ברוב האתרים, מדובר בשלוש האסטרטגיות הרלוונטיות ביותר, המבוססות על סדר העדיפויות שלכם:

ביצועים: משתמשים ב-font-display: optional. זו הגישה הכי "הביצועיםית": רינדור הטקסט מתעכב למשך עד 100 אלפיות השנייה, ואפשר להבטיח שלא יהיו שינויים בפריסה שנוגעים להחלפת גופנים. החיסרון הוא שלא תהיה אפשרות להשתמש בגופן האינטרנט אם הוא יגיע באיחור.
הצגה מהירה של טקסט ועדיין שימוש בגופן אינטרנט: השתמשו ב-font-display: swap, אבל הקפידו לציין את הגופן מוקדם מספיק כדי שלא יהיה שינוי בפריסה. החיסרון של האפשרות הזו הוא השינוי הצורך כשהגופן מגיע מאוחר.
הטקסט מוצג בגופן אינטרנט: השתמשו ב-font-display: block אבל הקפידו לשלוח את הגופן מוקדם מספיק כדי לצמצם את עיכוב הטקסט. הצגת הטקסט הראשונית מתעכבת. למרות העיכוב הזה, הוא עדיין עלול לגרום לשינוי בפריסה כי הטקסט בפועל מופיע כבלתי נראה, ולכן הרווח של הגופן החלופי משמש כדי לשמור את המקום. אחרי טעינת גופן האינטרנט, יכול להיות שיידרש מקום הפרש, ולכן יש שינוי. יכול להיות שהשינוי הזה יהיה פחות בולט מ-font-display: swap, כי הטקסט עצמו לא יזוז.

חשוב גם לזכור שאפשר לשלב בין שתי הגישות האלה: לדוגמה, אפשר להשתמש ב-font-display: swap למיתוג ולרכיבים אחרים בדף ששונים מבחינה חזותית. שימוש ב-font-display: optional לגופנים שמופיעים בגוף הטקסט.

גופנים של סמלים

השיטות font-display שמתאימות לגופני אינטרנט רגילים לא מתאימות באותה מידה לגופני סמלים. בדרך כלל, הגופן החלופי של גופן סמלים נראה שונה באופן משמעותי מגופן הסמלים, והתווים שלו עשויים להעביר משמעות שונה לגמרי. כתוצאה מכך, יש סיכוי גבוה יותר שגופנים של סמלים יגרמו לשינויים משמעותיים בפריסה.

בנוסף, יכול להיות שלא יהיה מעשי להשתמש בגופן חלופי. כשהדבר אפשרי, כדאי להחליף גופנים של סמלים בקבצים מסוג SVG, שהם גם טובים יותר לנגישות. בדרך כלל, בגרסאות חדשות יותר של גופנים פופולריים של סמלים יש תמיכה ב-SVG. למידע נוסף על מעבר ל-SVG, אפשר לעיין ב-Font Awesome וב-Material Icons.

הפחתת המעבר בין הגופן החלופי לבין גופן האינטרנט

כדי לצמצם את ההשפעה של CLS, אפשר להשתמש במאפייני size-adjust.

סיכום

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