במודולים הקודמים למדתם איך לבצע אופטימיזציה של HTML, CSS, JavaScript ומשאבי מדיה. במודול הזה נסביר על כמה שיטות לאופטימיזציה של גופנים לאינטרנט.
גופני אינטרנט יכולים להשפיע על ביצועי הדף גם בזמן הטעינה וגם בזמן העיבוד. קבצים גדולים של גופנים יכולים לקחת זמן רב להורדה ולהשפיע לרעה על הצגת תוכן ראשוני (FCP), בעוד שערך font-display שגוי עלול לגרום לשינויים לא רצויים בעיבוד החזותי.
כדי להבין איך דפדפן מוצא גופנים לאתרים, כדאי לדעת איך 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 בתוך שורה
כדי שהגופנים יהיו זמינים מוקדם יותר במהלך טעינת הדף, אפשר להשתמש ב-רכיב <style> כדי להוסיף שורות של CSS שחוסם את העיבוד, כולל הצהרות @font-face, ב-<head> של ה-HTML. במקרה כזה, הדפדפן מגלה גופני אינטרנט מוקדם יותר בטעינת הדף, כי הוא לא צריך לחכות להורדה של גיליון סגנונות חיצוני.
היתרון של הטמעה של הצהרות @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 הוא שאם גופן ה-webfont שמוגדר כגיבוי והגופן שמוגדר ב-CSS שונים מאוד מבחינת גובה השורה, הריווח בין התווים ומדדים אחרים של הגופן, השימוש ב-swap יגרום לשינוי בולט בתוכן.
בדרך כלל זה לא מוביל ליציבות חזותית (CLS) גרועה יותר ב-block (כי block מחייב פריסת הדף בהנחה של גופני הגיבוי, גם אם הטקסט עצמו לא מוצג, ולכן שניהם כפופים להזזת התוכן), אבל זה יכול להיות מטריד יותר מבחינה ויזואלית.
fallback
הערך fallback של font-display הוא מעין פשרה בין block לבין swap. בניגוד ל-swap, הדפדפן חוסם את העיבוד של גופן, אבל מחליף אותו בטקסט חלופי רק לפרק זמן קצר מאוד. לעומת זאת, בניגוד ל-block, תקופת החסימה קצרה מאוד.
השימוש בערך fallback יכול להיות יעיל ברשתות מהירות, שבהן אם הגופן האינטרנטי מוריד במהירות, הגופן האינטרנטי הוא הגופן שמשמש לעיבוד הראשוני של הדף. עם זאת, אם הרשתות איטיות, הטקסט של הגיבוי מוצג קודם אחרי שתקופת החסימה מסתיימת, ואז הוא מוחלף כשהגופן האינטרנטי מגיע.
optional
הערך optional הוא הערך המחמיר ביותר של font-display, והוא משתמש במשאב של גופן האינטרנט רק אם הוא מוריד אותו תוך 100 אלפיות השנייה. אם הטעינה של גופן אינטרנט אורכת יותר זמן, הוא לא ישמש בדף, והדפדפן ישתמש בגופן ברירת המחדל לניווט הנוכחי בזמן שגופן האינטרנט יורד ברקע ומוצב במטמון הדפדפן.
כתוצאה מכך, בניווטים הבאים בדף אפשר להשתמש בגופן האינטרנט באופן מיידי, כי הוא כבר הורד. font-display: optional מונע את השינוי החזותי שרואים ב-swap, אבל חלק מהמשתמשים לא רואים את גופן האינטרנט אם הוא מגיע מאוחר מדי בניווט הראשוני בדף.
הדגמות של גופנים
בוחנים את הידע
מתי הדפדפן מוריד משאב של גופן אינטרנט (בהנחה שהוא לא
נאחזר באמצעות הוראה preload)?
מהו הפורמט היחיד (והיעיל ביותר) שנדרש כדי להציג גופני אינטרנט בכל הדפדפנים המודרניים?
המאמר הבא: פיצול קוד JavaScript
אחרי שלמדתם על אופטימיזציה של גופנים, אתם יכולים לעבור למודול הבא. במודול הזה נסביר על נושא שיכול לשפר מאוד את מהירות טעינת הדף הראשונית למשתמשים: דחיית הטעינה של JavaScript באמצעות פיצול קוד. כך תוכלו לשמור על רוחב פס נמוך ככל האפשר ועל תחרות על משאבי CPU במהלך שלב ההפעלה של דף, שהוא פרק זמן שבו סביר מאוד שהמשתמשים יבצעו אינטראקציה עם הדף.