במודולים הקודמים למדתם איך לבצע אופטימיזציה של HTML, CSS, JavaScript ומשאבי מדיה. במודול הזה נסביר על כמה שיטות לאופטימיזציה של גופנים לאינטרנט.
גופני אינטרנט יכולים להשפיע על ביצועי הדף בזמן הטעינה ובזמן העיבוד.
הורדה של קובצי גופנים גדולים יכולה להימשך זמן רב ולהשפיע לרעה על הצגת התוכן הראשוני (FCP), בעוד שהערך השגוי font-display עלול לגרום לתזוזות לא רצויות בפריסה, שמשפיעות על התזוזה המצטברת בפריסה (CLS) של הדף.
כדי להבין איך אפשר לבצע אופטימיזציה לגופנים לאינטרנט, כדאי לדעת איך הדפדפן מאתר אותם. כך תוכלו להבין איך CSS מונע אחזור של גופנים לאינטרנט שלא נחוצים במצבים מסוימים.
Discovery
גופני האינטרנט של דף מוגדרים בגיליון סגנונות באמצעות הצהרה @font-face:
@font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}
בקטע הקוד שלמעלה מוגדר font-family בשם "Open Sans", והוא מציין לדפדפן איפה למצוא את משאב הגופן הרלוונטי לאינטרנט. כדי לחסוך ברוחב הפס, הדפדפן לא מוריד את גופן האינטרנט עד שהוא קובע שפריסת הדף הנוכחי צריכה אותו.
h1 {
font-family: "Open Sans";
}
בקטע ה-CSS הקודם, הדפדפן מוריד את "Open Sans" קובץ הגופן
בזמן שהוא מנתח רכיב <h1> ב-HTML של הדף.
preload
אם הצהרות @font-face מוגדרות בגיליון סגנונות חיצוני, הדפדפן יכול להתחיל להוריד אותן רק אחרי שהוא מוריד את גיליון הסגנונות.
כך הגופנים לאינטרנט מתגלים מאוחר יותר – אבל יש דרכים לעזור לדפדפן לגלות את הגופנים לאינטרנט מוקדם יותר.
אפשר לשלוח בקשה מוקדמת למשאבי גופנים לאינטרנט באמצעות ההנחיה preload. ההנחיה preload מאפשרת לדפדפן לגלות גופנים לאינטרנט בשלב מוקדם של טעינת הדף, והוא מתחיל להוריד אותם באופן מיידי בלי לחכות לסיום ההורדה והניתוח של גיליון הסגנונות. ההנחיה preload לא ממתינה עד שהגופן נדרש בדף.
<!-- The `crossorigin` attribute is required for fonts—even
self-hosted ones, as fonts are considered CORS resources. -->
<link rel="preload" as="font" href="/fonts/OpenSans-Regular-webfont.woff2" crossorigin>
הצהרות @font-face בתוך שורה
כדי שהגופנים יהיו זמינים מוקדם יותר במהלך טעינת הדף, אפשר להוסיף inline ל-CSS שחוסם את הרינדור – כולל ההצהרות @font-face – ב-<head> של ה-HTML באמצעות האלמנט <style>. במקרה כזה, הדפדפן מגלה גופני אינטרנט מוקדם יותר בטעינת הדף, כי הוא לא צריך לחכות להורדה של גיליון סגנונות חיצוני.
היתרון של הצהרות @font-face מוטמעות על פני שימוש ברמז preload
הוא שהדפדפן מוריד רק את הגופנים שנדרשים לרינדור הדף הנוכחי. כך לא תהיה סכנה להורדת גופנים שלא בשימוש.
הורדה
אחרי שהדפדפן מזהה גופנים לאינטרנט ומוודא שהם נחוצים לפריסת הדף הנוכחי, הוא יכול להוריד אותם. מספר גופני האינטרנט, הקידוד שלהם וגודל הקובץ שלהם יכולים להשפיע באופן משמעותי על מהירות ההורדה והעיבוד של גופן אינטרנט בדפדפן.
אירוח עצמי של גופני אינטרנט
אפשר להציג גופנים לאתרים באמצעות שירותים של צד שלישי, כמו Google Fonts, או לארח אותם בעצמכם במקור. כשמשתמשים בשירות צד שלישי, דף האינטרנט צריך לפתוח חיבור לדומיין של הספק לפני שהוא מתחיל להוריד את גופני האינטרנט הנדרשים. הפעולה הזו עלולה לעכב את האיתור ואת ההורדה של גופני אינטרנט.
אפשר להפחית את התקורה הזו באמצעות רמז המשאב preconnect. באמצעות התג preconnect, אפשר להנחות את הדפדפן לפתוח חיבור למקור חוצה-דומיין מוקדם יותר ממה שהדפדפן היה עושה בדרך כלל:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
קטע ה-HTML שלמעלה נותן לדפדפן רמז ליצירת חיבור אל fonts.googleapis.com וחיבור CORS אל fonts.gstatic.com. חלק מספקי הגופנים, כמו Google Fonts, מציגים משאבי CSS וגופנים ממקורות שונים.
כדי להימנע מהצורך בחיבור לצד שלישי, אתם יכולים לארח בעצמכם את גופני האינטרנט. ברוב המקרים, אירוח עצמי של גופנים לאינטרנט מהיר יותר מהורדה שלהם ממקור חוצה-דומיין. אם אתם מתכננים לארח פונטים לאתר בעצמכם, כדאי לוודא שהאתר משתמש ברשת להעברת תוכן (CDN), ב-HTTP/2 או ב-HTTP/3, ומגדיר את כותרות השמירה במטמון הנכונות לפונטים לאתר שאתם צריכים.
שימוש ב-WOFF2 בלבד
WOFF2 נהנה מתמיכה רחבה בדפדפנים ומהדחיסה הכי טובה – עד 30% יותר טובה מ-WOFF. הגודל המופחת של הקובץ מאפשר הורדה מהירה יותר. בדרך כלל, פורמט WOFF2 הוא היחיד שנדרש לתאימות מלאה בדפדפנים מודרניים.
יצירת קבוצת משנה של גופני אינטרנט
גופני אינטרנט כוללים בדרך כלל מגוון רחב של גליפים שנדרשים כדי לייצג את המגוון הרחב של התווים שמשמשים בשפות שונות. אם הדף מציג תוכן בשפה אחת בלבד או משתמש באלפבית אחד, אפשר להקטין את הגודל של גופני האינטרנט באמצעות יצירת קבוצת משנה. לרוב, עושים את זה על ידי ציון מספר – או טווח – של נקודות קוד Unicode.
קבוצת משנה היא קבוצה מצומצמת של הגליפים שנכללו בקובץ המקורי של פונט האינטרנט. לדוגמה, במקום להציג את כל הגליפים, הדף יכול להציג קבוצת משנה ספציפית של תווים לטיניים. בהתאם לקבוצת המשנה הנדרשת, הסרה של גליפים יכולה להקטין באופן משמעותי את הגודל של קובץ הגופן.
חלק מספקי פונטים לאינטרנט – כמו Google Fonts – מציעים קבוצות משנה באופן אוטומטי באמצעות פרמטר של מחרוזת שאילתה. לדוגמה, כתובת ה-URL https://fonts.googleapis.com/css?family=Roboto&subset=latin מציגה גיליון סגנונות עם גופן האינטרנט Roboto שמשתמש רק באלפבית הלטיני.
אם החלטתם לארח בעצמכם את גופני האינטרנט, השלב הבא הוא ליצור ולארח בעצמכם את קבוצות המשנה האלה באמצעות כלים כמו glyphanger או subfont.
עם זאת, אם אין לכם אפשרות לארח בעצמכם את גופני האינטרנט, אתם יכולים ליצור קבוצת משנה של גופני אינטרנט שסופקו על ידי Google Fonts. לשם כך, צריך לציין פרמטר נוסף של מחרוזת שאילתה text שמכיל רק את נקודות הקוד של Unicode שנדרשות לאתר שלכם. לדוגמה, אם באתר שלכם יש גופן אינטרנט לתצוגה שצריך רק מספר קטן של תווים כדי להציג את הביטוי "ברוכים הבאים", אתם יכולים לבקש את קבוצת המשנה הזו דרך Google Fonts באמצעות כתובת ה-URL הבאה:
https://fonts.googleapis.com/css?family=Monoton&text=Welcome. השימוש בשיטה הזו יכול להפחית באופן משמעותי את כמות הנתונים של גופן האינטרנט שנדרשת עבור משפחת גופנים אחת באתר שלכם, אם חלוקת המשנה הקיצונית הזו יכולה להיות שימושית באתר שלכם.
רינדור גופנים
אחרי שהדפדפן מאתר ומוריד גופן אינטרנט, הוא יכול לעבד אותו. כברירת מחדל, הדפדפן חוסם את הרינדור של כל טקסט שמשתמש בגופן אינטרנט עד שהוא מוריד אותו. אפשר לשנות את אופן העיבוד של הטקסט בדפדפן ולהגדיר איזה טקסט יוצג (או לא יוצג) עד שהפונט מסוג webfont ייטען במלואו באמצעות מאפיין ה-CSS font-display.
block
ערך ברירת המחדל של font-display הוא block. עם block, הדפדפן חוסם את העיבוד של כל טקסט שמשתמש בגופן האינטרנט שצוין. דפדפנים שונים פועלים בצורה שונה מעט. Chromium ו-Firefox חוסמים את העיבוד למשך עד 3 שניות לפני השימוש בחלופה. דפדפן Safari נחסם לזמן בלתי מוגבל עד שגופן האינטרנט נטען.
swap
swap הוא הערך הנפוץ ביותר של font-display. swap לא חוסם את העיבוד, ומציג את הטקסט באופן מיידי בגיבוי לפני החלפת הגופן בגופן האינטרנט שצוין. כך תוכלו להציג את התוכן שלכם באופן מיידי בלי לחכות להורדה של גופן האינטרנט.
עם זאת, החיסרון של swap הוא שהוא גורם לשינוי בפריסה אם גופן האינטרנט החלופי וגופן האינטרנט שצוין ב-CSS שונים מאוד מבחינת גובה השורה, הריווח בין התווים ומדדים אחרים של הגופן. הבעיה הזו יכולה להשפיע על CLS באתר אם לא משתמשים ברמז preload כדי לטעון משאב של גופן אינטרנט בהקדם האפשרי, או אם לא לוקחים בחשבון ערכים אחרים של font-display.
fallback
הערך fallback של font-display הוא מעין פשרה בין block לבין swap. בניגוד ל-swap, הדפדפן חוסם את העיבוד של גופן, אבל מחליף אותו בטקסט חלופי רק לפרק זמן קצר מאוד. בניגוד ל-block, תקופת החסימה קצרה מאוד.
השימוש בערך fallback יכול להיות יעיל ברשתות מהירות, שבהן אם הגופן האינטרנטי יורד במהירות, הוא ישמש כגופן שיוצג מיד בעיבוד הראשוני של הדף. עם זאת, אם הרשתות איטיות, הטקסט של ה-fallback מוצג קודם אחרי שתקופת החסימה מסתיימת, ואז הוא מוחלף כשהגופן האינטרנטי מגיע.
optional
optional הוא הערך הכי מחמיר של font-display, והוא משתמש במשאב של גופן האינטרנט רק אם הוא מוריד אותו תוך 100 אלפיות השנייה. אם הטעינה של גופן אינטרנט אורכת יותר זמן, הוא לא ישמש בדף, והדפדפן ישתמש בגופן חלופי לניווט הנוכחי בזמן שגופן האינטרנט יורד ברקע ומוצב במטמון הדפדפן.
כתוצאה מכך, בניווטים הבאים בדף אפשר להשתמש בגופן האינטרנט באופן מיידי, כי הוא כבר הורד. font-display: optional מונע את שינוי הפריסה שרואים ב-swap, אבל חלק מהמשתמשים לא רואים את גופן האינטרנט אם הוא מגיע מאוחר מדי בניווט הראשוני בדף.
הדגמות של גופנים
בוחנים את הידע
מתי הדפדפן מוריד משאב של גופן אינטרנט (בהנחה שהוא לא נטען באמצעות הוראת preload)?
מהו הפורמט היחיד (והיעיל ביותר) שנדרש כדי להציג גופני אינטרנט בכל הדפדפנים המודרניים?
הנושא הבא: פיצול קוד JavaScript
אחרי שלמדתם על אופטימיזציה של גופנים, אתם יכולים לעבור למודול הבא. במודול הזה נסביר על נושא שיש לו פוטנציאל גבוה לשפר את מהירות הטעינה הראשונית של הדף עבור המשתמשים שלכם: דחיית הטעינה של JavaScript באמצעות פיצול קוד. כך תוכלו לשמור על רוחב פס ועל תחרות על משאבי CPU ברמה הנמוכה ביותר האפשרית במהלך שלב ההפעלה של דף, שהוא פרק זמן שבו סביר מאוד שהמשתמשים יבצעו אינטראקציה עם הדף.