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