במודולים הקודמים למדתם איך לבצע אופטימיזציה של HTML, CSS, JavaScript ומשאבים של מדיה. במודול הזה נלמד על כמה שיטות לביצוע אופטימיזציה של גופני אינטרנט.
גופני אינטרנט, שיכולים להשפיע על ביצועי הדפים, גם בזמן הטעינה וגם בזמן העיבוד.
יכול להיות שההורדה של קובצי גופנים גדולים תימשך זמן מה, והם משפיעים לרעה על הצגת התוכן הראשוני (FCP). עם זאת, הערך השגוי של font-display עלול לגרום
לשינויי פריסה לא רצויים, שתורמים ל-Cumulative Layout Shift (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 מוגדרות בגיליון סגנונות חיצוני, הדפדפן יכול להתחיל להוריד אותן רק אחרי שהוא מוריד את גיליון הסגנונות.
כך גופני אינטרנט מתגלים בזמן האחרון, אבל יש דרכים לעזור לדפדפן לגלות גופני אינטרנט מהר יותר.
אתם יכולים לשלוח בקשה מוקדמת למשאבים של Web Fonts באמצעות ההנחיה 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 בלבד
WOFF2 נהנים מתמיכה רחבה בדפדפן ומהדחיסה הטובה ביותר – עד 30% יותר מ-WOFF. מכיוון שהקבצים קטנים יותר, זמני ההורדה יהיו מהירים יותר. ברוב המקרים, הפורמט WOFF2 הוא היחיד שדרוש לתאימות מלאה בדפדפנים מודרניים.
סידור תתי-גופנים של גופני האינטרנט
לרוב, גופני אינטרנט כוללים מגוון רחב של גליפים שונים, שנדרשים כדי לייצג את המגוון הרחב של תווים שמשתמשים בהם בשפות שונות. אם הדף שלכם מציג תוכן בשפה אחת בלבד או אם הוא משתמש באלפבית אחד, אפשר לצמצם את גודל גופני האינטרנט באמצעות הגדרת משנה. כדי לעשות את זה, בדרך כלל צריך לציין מספר או טווח של נקודות קוד Unicode.
קבוצת משנה היא קבוצה מצומצמת של הגליפים שנכללו בקובץ גופן האינטרנט המקורי. לדוגמה, במקום להציג את כל הגליפים, יכול להיות שהדף יציג קבוצת משנה ספציפית של תווים לטיניים. בהתאם לקבוצת המשנה הדרושה, הסרת גליפים עשויה לצמצם משמעותית את הגודל של קובץ גופנים.
ספקי גופן מסוימים באינטרנט, כמו Google Fonts, מציעים קבוצות משנה באופן אוטומטי באמצעות פרמטר של מחרוזת שאילתה. לדוגמה, כתובת ה-URL https://fonts.googleapis.com/css?family=Roboto&subset=latin מציגה
גיליון סגנונות עם גופן האינטרנט Roboto שבו נעשה שימוש רק באותיות לטיניות.
אם החלטתם לארח בעצמכם את גופני האינטרנט, השלב הבא הוא ליצור את קבוצות המשנה האלה ולארח אותן בעצמכם באמצעות כלים כמו glyphanger או subfont.
עם זאת, אם אין לכם אפשרות לארח בעצמכם גופני אינטרנט משלכם, תוכלו להגדיר משנה של גופני אינטרנט שסופקו על ידי Google Fonts. לשם כך, תצטרכו לציין פרמטר נוסף של מחרוזת השאילתה text, שמכיל רק את הנקודות של קוד ה-unicode שדרושות לאתר שלכם. לדוגמה, אם באתר שלכם יש צורך במספר קטן של תווים בלבד כדי להציג את הביטוי "Welcome", תוכלו לבקש את קבוצת המשנה הזו דרך Google Fonts באמצעות כתובת ה-URL הבאה: https://fonts.googleapis.com/css?family=Monoton&text=Welcome. הגדרה זו יכולה לצמצם באופן משמעותי את כמות הנתונים של גופנים באינטרנט שדרושים לגופן אחד באתר, אם שימוש קיצוני כזה יכול להועיל באתר.
עיבוד הגופן
לאחר שהדפדפן גילה והוריד גופן אינטרנט, תוכלו לעבד אותו. כברירת מחדל, הדפדפן חוסם את הרינדור של טקסט שנעשה בו שימוש בגופן אינטרנט, עד לסיום ההורדה. אפשר לשנות את התנהגות עיבוד הטקסט בדפדפן ולקבוע איזה טקסט יוצג או לא יוצג עד שגופן האינטרנט ייטען במלואו באמצעות מאפיין ה-CSS font-display.
block
ערך ברירת המחדל של font-display הוא block. באמצעות block, הדפדפן
חוסם את הרינדור של טקסט שנעשה בו שימוש בגופן האינטרנט שצוין. דפדפנים שונים מתנהגים באופן מעט שונה. Chromium ו-Firefox חוסמים את הרינדור למשך עד 3 שניות לפני שימוש בחלופה. מערכת Safari חוסמת ללא הגבלת זמן
עד שגופן האינטרנט נטען.
swap
swap הוא הערך הנפוץ ביותר של font-display. הקוד swap לא חוסם את העיבוד, ומציג את הטקסט באופן מיידי בחלופה לפני ההחלפה בגופן האינטרנט שצוין. כך תוכלו להציג את התוכן באופן מיידי,
בלי להמתין להורדת גופן האינטרנט.
עם זאת, החיסרון של swap הוא שהדבר גורם לשינוי פריסה אם גופן האינטרנט החלופי וגופן האינטרנט שצוינו ב-CSS שונים מאוד מבחינת גובה שורה, צימוד ומדדי גופנים אחרים. הדבר עלול להשפיע על ערך ה-CLS של האתר אם לא תשתמשו ברמז preload כדי לטעון משאב Web font בהקדם האפשרי, או אם לא מביאים בחשבון ערכים אחרים של font-display.
fallback
הערך fallback של font-display הוא סוג של פשרה בין block ל-swap. בשונה מ-swap, הדפדפן חוסם רינדור של גופן, אבל
ניתן להחליף בטקסט חלופי רק למשך זמן קצר מאוד. אבל שלא כמו block,
תקופת החסימה קצרה מאוד.
השימוש בערך fallback יכול לפעול היטב ברשתות מהירות, שבהן אם גופן האינטרנט יורד במהירות, גופן האינטרנט הוא הגופן המשמש באופן מיידי בעיבוד הראשוני של הדף. עם זאת, אם הרשתות איטיות, טקסט הגיבוי מוצג תחילה לאחר סיום תקופת החסימה, ולאחר מכן מוחלף עם גופן האינטרנט.
optional
optional הוא הערך המחמיר ביותר של font-display, וייעשה שימוש במשאב
גופן האינטרנט רק אם ההורדה שלו מתבצעת תוך 100 אלפיות השנייה. אם הטעינה של גופן אינטרנט נמשכת זמן רב יותר, לא ייעשה בו שימוש בדף, והדפדפן ישתמש בגופן החלופי בניווט הנוכחי בזמן הורדת גופן האינטרנט ברקע וימוקם במטמון של הדפדפן.
כתוצאה מכך, הניווטים הבאים בדפים יכולים להשתמש בגופן האינטרנט באופן מיידי, מכיוון
שכבר בוצעה הורדה שלו. font-display: optional עוזר למנוע שינוי פריסה שנוצר
ב-swap, אבל חלק מהמשתמשים לא יראו את גופן האינטרנט אם הוא יגיע מאוחר מדי
בניווט הראשוני בדף.
הדגמות של הגופן
בוחנים את הידע
מתי הדפדפן מוריד משאב Web font (בהנחה שהוא לא
אוחזר באמצעות הוראת preload)?
מהו הפורמט היחיד (והיעיל ביותר) שנדרש כדי להציג גופני אינטרנט בכל הדפדפנים המודרניים?
השלב הבא: פיצול קוד JavaScript
אחרי שהבנתם את נושא האופטימיזציה של גופנים, תוכלו לעבור למודול הבא, שעוסק בנושא שיש לו פוטנציאל גבוה לשפר את מהירות הטעינה הראשונית של הדף עבור המשתמשים, והוא לעכב את הטעינה של JavaScript באמצעות פיצול קוד. כך אתם יכולים להפחית ככל האפשר את רמת רוחב הפס והתחרות על המעבד (CPU) בשלב ההפעלה של הדף, בפרק זמן שבו יש סיכוי גבוה שמשתמשים ייצרו אינטראקציה עם הדף.