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

Ilya Grigorik

Jeremy Wagner

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

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

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

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

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

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

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

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

• 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

ה-CSS הכלל @font-face מאפשר להגדיר את המיקום של משאב מסוים של גופן, את מאפייני הסגנון שלו ואת נקודות הקוד של 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

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

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

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

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

• 400 (רגיל).
• 700 (מודגש).
• 900 (מודגש במיוחד).

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

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

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

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

@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 המורכבת משני משאבים המכסים את אותה קבוצה של גליפים לטיניים (U+000-5FF), אך מציעים שני "משקולות" שונות: רגיל (400) ומודגש (700). עם זאת, מה קורה אם אחד מכללי ה-CSS שלך מציין עובי גופן שונה, או מגדיר את המאפיין font-style כ-italic?

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

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

אפקטים על Largest Contentful Paint (LCP) ועל Cumulative Layout Shift (CLS)

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

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

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