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