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

Ilya Grigorik

Jeremy Wagner

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

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

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

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

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

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

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

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

• EOT
• TTF
• כיבוי
• 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 שסופקה מפנה אליו.

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

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

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

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

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

הגדרת משנה של טווח Unicode

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

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

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

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

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

השימוש בקבוצות משנה של טווחים בפורמט 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;
}

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

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

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

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

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

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

• לערוך ביקורת ומעקב אחר שימוש בגופנים: אל תשתמשו ביותר מדי גופנים בדפים, ולכל גופן צמצמו את מספר הווריאציות בשימוש. כך אפשר לספק למשתמשים חוויה עקבית ומהירה יותר.
• אם אפשר, כדאי להימנע מפורמטים מדור קודם: הפורמטים EOT, TTF ו-WOFF גדולים יותר מ-WOFF 2.0. EOT ו-TTDF הם פורמטים מיותרים לחלוטין, כאשר 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). לכן, חשוב לוודא שגופני האינטרנט יהיו קטנים ככל האפשר. כדאי לפעול לפי העצות המפורטות במאמר זה, כדי שהמשתמשים יראו את הטקסט בדף במהירות האפשרית.

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

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