הקטנת גודל גופן האינטרנט

Ilya Grigorik

Jeremy Wagner

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

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

המבנה של גופן אינטרנט

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

כשבוחרים גופן, חשוב לקחת בחשבון אילו ערכות תווים נתמכות. אם אתם צריכים להתאים את התוכן של הדף לשפות שונות, כדאי להשתמש בגופן שיכול לספק למשתמשים מראה וחוויה עקביים. לדוגמה, משפחת הגופנים Noto של Google נועדה לתמוך בכל השפות בעולם. עם זאת, חשוב לזכור שהגודל הכולל של Noto, כולל כל השפות, הוא יותר מ-1.1GB, ולכן ההורדה תהיה בקובץ ZIP.

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

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

כיום יש שני פורמטים מומלצים של מאגרי גופנים שנעשה בהם שימוש באינטרנט:

• EOT
• TTF
• WOFF
• ‫WOFF2.

יש תמיכה רחבה ב-WOFF וב-WOFF 2.0, והם נתמכים בכל הדפדפנים המודרניים.

• הצגת וריאנט WOFF 2.0 בדפדפנים מודרניים.
• אם יש צורך בכך – למשל, אם עדיין צריך לתמוך ב-Internet Explorer 11 – צריך להציג את ה-WOFF כגיבוי.
• לחלופין, אפשר להימנע משימוש בגופני אינטרנט בדפדפנים מדור קודם ולחזור לגופני המערכת. יכול להיות שהשיטה הזו תהיה יעילה יותר גם במכשירים ישנים יותר עם מגבלות.
• מכיוון ש-WOFF ו-WOFF 2.0 מכסים את כל הבסיסים לדפדפנים מודרניים ולדפדפנים מדור קודם שעדיין נמצאים בשימוש, אין יותר צורך להשתמש ב-EOT וב-TTF, והשימוש בהם עלול להאריך את זמן ההורדה של גופני אינטרנט.

גופנים לאינטרנט ודחיסה

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

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

הגדרת משפחת גופנים באמצעות @font-face

הכלל @font-face CSS at-rule מאפשר להגדיר את המיקום של משאב גופן מסוים, את מאפייני הסגנון שלו ואת נקודות הקוד של Unicode שבהן צריך להשתמש בו. אפשר להשתמש בשילוב של הצהרות @font-face כאלה כדי ליצור 'משפחת גופנים', שהדפדפן ישתמש בה כדי להעריך אילו משאבי גופנים צריך להוריד ולהחיל על הדף הנוכחי.

שימוש בגופן משתנה

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

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

בחירת הפורמט הנכון

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

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome.woff2') format('woff2'),
       /* Only serve WOFF if necessary. Otherwise,
          WOFF 2.0 is fine by itself. */
       url('/fonts/awesome.woff') format('woff');
}

@font-face {
  font-family: 'Awesome Font';
  font-style: italic;
  font-weight: 400;
  src: local('Awesome Font Italic'),
       url('/fonts/awesome-i.woff2') format('woff2'),
       url('/fonts/awesome-i.woff') format('woff');
}

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

• ההנחיה local() מאפשרת לכם להפנות לגופנים שמותקנים באופן מקומי, לטעון אותם ולהשתמש בהם. אם הגופן כבר מותקן במערכת של המשתמש, המערכת מדלגת על הרשת לחלוטין, וזו הדרך הכי מהירה.
• ההנחיה url() מאפשרת לטעון גופנים חיצוניים, והיא יכולה להכיל רמז אופציונלי format() שמציין את הפורמט של הגופן שאליו מתייחסת כתובת ה-URL שצוינה.

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

1. הדפדפן מבצע פריסת דף וקובע אילו וריאציות של גופן נדרשות כדי להציג את הטקסט שצוין בדף. הדפדפן לא מוריד גופנים שלא נכללים במודל האובייקטים של CSS‏ (CSSOM) של הדף, כי הם לא נדרשים.
2. לגבי כל גופן נדרש, הדפדפן בודק אם הגופן זמין באופן מקומי.
3. אם הגופן לא זמין באופן מקומי, הדפדפן עובר על ההגדרות החיצוניות:
   • אם יש רמז לפורמט, הדפדפן בודק אם הוא תומך ברמז לפני שהוא מתחיל את ההורדה. אם הדפדפן לא תומך ברמז, הדפדפן עובר לרמז הבא.
   • אם אין רמז לפורמט, הדפדפן מוריד את המשאב.

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

הגדרת קבוצת משנה של Unicode-range

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

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

• נקודת קוד יחידה (לדוגמה, U+416)
• טווח של מקטעי זמן (לדוגמה, U+400-4ff): מציין את נקודות הקוד להתחלה ולסיום של טווח
• טווח של תווים כלליים לחיפוש (לדוגמה, U+4??): התווים ? מציינים כל ספרה הקסדצימלית

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

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome-l.woff2') format('woff2');
  /* Latin glyphs */
  unicode-range: U+000-5FF;
}

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome-jp.woff2') format('woff2');
  /* Japanese glyphs */
  unicode-range: U+3000-9FFF, U+ff??;
}

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

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

1. קובעים אילו קבוצות משנה נדרשות:
   • אם הדפדפן תומך בחלוקת טווח Unicode לקבוצות משנה, הוא יבחר אוטומטית את קבוצת המשנה הנכונה. בדף צריך לספק את קובצי המשנה ולציין טווחי Unicode מתאימים בכללי @font-face.
   • אם הדפדפן לא תומך בחלוקה של unicode-range לקבוצות משנה, צריך להסתיר בדף את כל קבוצות המשנה שלא נדרשות. כלומר, המפתח צריך לציין את קבוצות המשנה הנדרשות.
2. יצירת קבוצות משנה של גופנים:
   • אפשר להשתמש בכלי pyftsubset בקוד פתוח כדי ליצור קבוצת משנה של גופנים ולבצע אופטימיזציה שלהם.
   • חלק משרתי הגופנים – כמו Google Font – יוצרים אוטומטית קבוצת משנה כברירת מחדל.
   • חלק משירותי הגופנים מאפשרים יצירת קבוצת משנה באופן ידני באמצעות פרמטרים של שאילתה מותאמים אישית, שבהם אפשר להשתמש כדי לציין באופן ידני את קבוצת המשנה הנדרשת לדף. כדאי לעיין במסמכי התיעוד של ספק הגופנים.

בחירת גופן וסינתזה

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

הדיאגרמה שלמעלה ממחישה משפחת גופנים שמציעה שלוש דרגות שונות של הדגשה:

• ‫400 (רגיל).
• ‫700 (מודגש).
• ‫900 (מודגש מאוד).

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

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

אלגוריתם להתאמת גופנים בשירות CSS

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

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome-l.woff2') format('woff2');
  /* Latin glyphs */
  unicode-range: U+000-5FF;
}

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 700;
  src: local('Awesome Font'),
       url('/fonts/awesome-l-700.woff2') format('woff2');
  /* Latin glyphs */
  unicode-range: U+000-5FF;
}

בדוגמה שלמעלה מוצהרת משפחת הגופנים Awesome Font שמורכבת משני מקורות שמכסים את אותו סט של גליפים לטיניים (U+000-5FF), אבל מציעים שני 'משקלים' שונים: רגיל (400) ומודגש (700). אבל מה קורה אם אחד מכללי ה-CSS שלכם מציין עובי גופן שונה, או מגדיר את המאפיין font-style לערך italic?

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

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

רשימת משימות לאופטימיזציה של גודל הגופן באתר

• בודקים ועוקבים אחרי השימוש בגופנים: לא כדאי להשתמש ביותר מדי גופנים בדפים, ובכל גופן כדאי להשתמש במספר מינימלי של וריאציות. כך אפשר לספק למשתמשים חוויה עקבית ומהירה יותר.
• מומלץ להימנע מפורמטים מדור קודם, אם אפשר: הפורמטים EOT, ‏ TTF ו-WOFF גדולים יותר מהפורמט WOFF 2.0. פורמטים EOT ו-TTF הם מיותרים לחלוטין, ואילו פורמט WOFF יכול להיות מקובל אם אתם צריכים לתמוך ב-Internet Explorer 11. אם אתם מטרגטים רק דפדפנים מודרניים, השימוש רק ב-WOFF 2.0 הוא האפשרות הכי פשוטה והכי יעילה.
• יצירת קבוצת משנה של משאבי הגופן: אפשר ליצור קבוצת משנה של הרבה גופנים, או לפצל אותם לכמה טווחי Unicode, כדי לספק רק את הגליפים שדף מסוים צריך. כך מקטינים את גודל הקובץ ומשפרים את מהירות ההורדה של המשאב. עם זאת, כשמגדירים את קבוצות המשנה, חשוב לבצע אופטימיזציה לשימוש חוזר בגופן. לדוגמה, אל תורידו קבוצה שונה של תווים בכל דף, גם אם יש חפיפה בין הקבוצות. מומלץ ליצור קבוצת משנה על סמך סקריפט: לדוגמה, לטיני וקירילי.
• נותנים עדיפות ל-local() ברשימת src: אם מוסיפים את local('Font Name') ראשון לרשימת src, לא מתבצעות בקשות HTTP לגבי גופנים שכבר מותקנים.
• כדי לבדוק אם יש דחיסת טקסט, אפשר להשתמש ב-Lighthouse.

השפעות על המהירות שבה נטען רכיב התוכן הכי גדול (LCP) ועל Cumulative Layout Shift ‏ (CLS)

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

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

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