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

אופטימיזציה של גופני אינטרנט ל-Core Web Vitals.

Katie Hempenius
Katie Hempenius
X
Barry Pollard

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

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

טעינת גופנים

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

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

הכרטיסייה Timing בכלי הפיתוח.

הסבר על @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 נפרד שמשתמש במאפיין 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 יעילה מאוד בהצגת גופנים בשלב מוקדם בתהליך טעינת הדף, היא גורמת לכך שמשאבי הדפדפן לא מוקצים לטעינת משאבים אחרים.

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

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

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

העברת גופנים

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

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

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

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

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

שימוש ב-WOFF2

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

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

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

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

Bram Stein, from the 2022 Web Almanac

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

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

המתאר 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-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: 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 בנושא SVG Sprites ובמדריך Material Icons.

צמצום ההבדל בין גופן ברירת המחדל לבין גופן האינטרנט

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

סיכום

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