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

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

Katie Hempenius
Katie Hempenius
X
Barry Pollard

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

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

הגופן בטעינה

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

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

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

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

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

העברת גופנים

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

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

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

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

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

שימוש ב-WOFF2

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

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

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

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

בראם שטיין (Bram Stein), אלמנך באינטרנט 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: 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 לגופנים שמופיעים בגוף הטקסט.

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

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

סיכום

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