אופטימיזציה של גופנים לאינטרנט בהתאם למדדי הליבה לבדיקת חוויית המשתמש באתר.
במסמך הזה מפורטות שיטות מומלצות לשיפור הביצועים של גופנים. יש כמה דרכים שבהן גופני אינטרנט משפיעים על הביצועים:
- עיבוד טקסט מאחר: אם גופן אינטרנט לא נטען, הדפדפנים בדרך כלל מעכבים את העיבוד של הטקסט. במצבים רבים, הפעולה הזו גורמת לעיכוב בהצגת תוכן ראשוני (FCP). במצבים מסוימים, הפעולה הזו גורמת לעיכוב בהצגת חלק התוכן הגדול ביותר (LCP).
- שינויים בפריסת הדף: החלפת הגופן עלולה לגרום לשינויים בפריסת הדף ולהשפיע על Cumulative Layout Shift (CLS). שינויי הפריסה האלה מתרחשים כשגופן אינטרנט וגופן החלופי שלו תופסים כמויות שונות של מקום בדף.
המסמך הזה כולל שלושה קטעים: טעינה של גופן, העברת גופן ועיבוד גופן. בכל קטע מוסבר איך פועל ההיבט הספציפי הזה במחזור החיים של הגופן, ומפורטות שיטות מומלצות בהתאם.
טעינת גופן
גופנים הם משאבים חשובים. בלי הקבצים האלה, יכול להיות שהמשתמש לא יוכל לצפות בתוכן הדף. לכן, שיטות מומלצות לטעינת גופנים מתמקדות בדרך כלל בכך שהגופנים ייטענו מוקדם ככל האפשר. חשוב להקפיד במיוחד על גופנים שנטענים מאתרים של צד שלישי, כי הורדת קובצי הגופנים האלה מחייבת הגדרות חיבור נפרדות.
אם אתם לא בטוחים שהבקשות לגופנים של הדף מתבצעות בזמן, תוכלו לבדוק את הכרטיסייה תזמון בחלונית רשת בכלים למפתחים ב-Chrome כדי לקבל מידע נוסף.
הסבר על @font-face
לפני שנצלול לשיטות המומלצות לטעינת גופנים, חשוב להבין איך פועל @font-face
ואיך הוא משפיע על טעינת הגופנים.
ההצהרה @font-face
היא חלק חיוני בעבודה עם כל גופן אינטרנט. לפחות, הוא מציין את השם שמשמש להפניה לגופן ומציין את המיקום של קובץ הגופן התואם.
@font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}
יש טעות נפוצה לגבי הבקשה של גופן כשנמצאה הצהרה @font-face
. זה שגוי. ההצהרה על @font-face
לא גורמת להורדת הגופן בפני עצמה. במקום זאת, הגופן מוריד רק אם יש לו הפניה בסגנון שבו נעשה שימוש בדף. לדוגמה:
@font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}
h1 {
font-family: "Open Sans"
}
בדוגמה הזו, Open Sans
יורד רק אם הדף מכיל רכיב <h1>
.
לכן, כשמדברים על אופטימיזציה של גופנים, חשוב להתייחס לגיליון סגנונות באותה מידה שבה מתייחסים לקובצי הגופן עצמם. שינוי התוכן או אופן המסירה של גיליונות סגנונות יכול להשפיע באופן משמעותי על מועד ההגעה של הגופנים. באופן דומה, הסרת קובצי CSS שלא בשימוש ופיצול של גיליונות סגנונות יכולים לצמצם את מספר הגופנים שדף טוען.
הצהרות על גופנים בתוך שורה
ברוב האתרים מומלץ להוסיף את הצהרות הגופן ואת סגנונות העיצוב החיוניים האחרים ב-<head>
של המסמך הראשי, במקום לכלול אותם בגיליונות סגנונות חיצוניים. כך הדפדפן יכול לזהות את הצהרות הגופן מוקדם יותר, כי הוא לא צריך להמתין להורדה של גיליון הסגנונות החיצוני.
<head>
<style>
@font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}
body {
font-family: "Open Sans";
}
...etc.
</style>
</head>
הטמעת CSS קריטי בקוד יכולה להיות טכניקה מתקדמת יותר, ולא כל האתרים יכולים להשתמש בה. היתרונות בביצועים ברורים, אבל נדרשים תהליכים וכלי build נוספים כדי לוודא שקוד ה-CSS הנדרש, ובאופן אידיאלי רק קוד ה-CSS הקריטי, מוטמע בצורה נכונה, ושכל קוד CSS נוסף מועבר בצורה שלא חוסמת את הרינדור.
קישור מראש למקורות חיוניים של צד שלישי
אם האתר שלכם טוען גופנים מאתר של צד שלישי, מומלץ מאוד להשתמש בהינט המשאב preconnect
כדי ליצור קישורים מוקדמים למקור של הצד השלישי.
צריך למקם את הטיפים לגבי המשאבים ב-<head>
של המסמך. ההצעה הבאה לשימוש במשאבים מגדירה חיבור לטעינה של גיליון סגנונות הגופן.
<head>
<link rel="preconnect" href="https://fonts.com">
</head>
כדי לבצע חיבור מראש של החיבור שמשמש להורדת קובץ הגופן, מוסיפים רמז משאב נפרד מסוג preconnect
שמשתמש במאפיין crossorigin
.
בניגוד לגיליונות סגנונות, קובצי גופנים חייבים להישלח דרך חיבור CORS.
<head>
<link rel="preconnect" href="https://fonts.com">
<link rel="preconnect" href="https://fonts.com" crossorigin>
</head>
כשמשתמשים בהצעה למשאב preconnect
, חשוב לזכור שספק גופנים עשוי להציג גופנים וסגנונות גיליון אלקטרוני ממקורות נפרדים. לדוגמה, כך נעשה שימוש בהצעה למשאב preconnect
ב-Google Fonts.
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
</head>
חשוב להיזהר כשמשתמשים ב-preload
כדי לטעון גופנים
אמנם האפשרות preload
יעילה מאוד בזיהוי גופנים בשלב מוקדם בתהליך טעינת הדף, אבל היא גורמת לכך שמשאבים של הדפדפן לא יהיו זמינים לטעינה של משאבים אחרים.
שיטה יעילה יותר עשויה להיות הצגת הצהרות על גופנים בקוד והתאמה של גיליונות סגנונות. ההתאמות האלה קרובות יותר לטיפול בבעיה השורשית של גופנים שזוהו באיחור, ולא רק לספק פתרון זמני.
בנוסף, צריך להשתמש ב-preload
כשיטה לטעינת גופנים בזהירות, כי היא עוקפת חלק משיטות המשא ומתן המובנות של הדפדפן לגבי תוכן. לדוגמה, preload
מתעלם מהצהרות unicode-range
, ואם משתמשים בו בצורה מושכלת, צריך להשתמש בו רק כדי לטעון פורמט גופן אחד.
עם זאת, כשמשתמשים בגיליונות סגנונות חיצוניים, טעינת ברירת המחדל של הגופנים החשובים ביותר יכולה להיות יעילה מאוד, כי אחרת הדפדפן לא יגלה אם יש צורך בגופן עד הרבה יותר מאוחר.
העברת גופן
העברת גופנים מהירה יותר מאפשרת רינדור מהיר יותר של טקסט. בנוסף, אם הגופן מועבר מוקדם מספיק, הוא יכול לעזור למנוע שינויים בפריסה כתוצאה מחילופי גופנים.
שימוש בגופנים מתארחים
באופן תיאורטי, שימוש בגופן שמתארח באתר שלכם אמור לספק ביצועים טובים יותר כי הוא מבטל את הצורך בהגדרת חיבור לצד שלישי. בפועל, ההבדלים בביצועים בין שתי האפשרויות האלה פחות ברורים. לדוגמה, לפי Web Almanac, באתרים שמשתמשים בגופנים של צד שלישי, העיבוד מהיר יותר מאשר באתרים שמשתמשים בגופנים של צד ראשון.
אם אתם שוקלים להשתמש בגופנים שמתארחים באתר, עליכם לוודא שהאתר שלכם משתמש ברשת להעברת תוכן (CDN) וב-HTTP/2. בלי להשתמש בטכנולוגיות האלה, הסבירות לכך שגופני אירוח עצמי יניבו ביצועים טובים יותר נמוכה בהרבה.
אם אתם משתמשים בגופן שמתארח אצלכם, מומלץ גם להחיל חלק מהאופטימיזציות של קובצי הגופן שספקי גופנים של צד שלישי מספקים בדרך כלל באופן אוטומטי. לדוגמה, יצירת קבוצות משנה של גופנים ודחיסת WOFF2. מידת המאמץ שנדרש כדי להחיל את האופטימיזציות האלה תלויה במידה מסוימת בשפות שבהן האתר תומך. חשוב לזכור שהאופטימיזציה של גופנים לשפות CJK יכולה להיות מאתגרת במיוחד.
שימוש ב-WOFF2
מבין הגופנים המודרניים, WOFF2 הוא הגופן החדש ביותר, עם התמיכה הרחבה ביותר בדפדפנים והדחיסה הטובה ביותר. בגלל השימוש ב-Brotli, קובצי WOFF2 נדחסים ב-30% יותר טוב מקובצי WOFF, וכתוצאה מכך יש פחות נתונים להורדה, ולכן הביצועים מהירים יותר.
לאור התמיכה בדפדפנים, מומחים ממליצים עכשיו להשתמש רק ב-WOFF2:
למעשה, אנחנו חושבים שהגיע הזמן להכריז: השתמשו רק ב-WOFF2 ותשכחו מכל השאר.
בראם סטיין, מתוך 'אלמנך האינטרנט לשנת 2022'
כך תוכלו לפשט את ה-CSS ואת תהליך העבודה באופן משמעותי, וגם למנוע הורדות כפולות או שגויות של גופנים בטעות. עכשיו יש תמיכה ב-WOFF2 בכל מקום. לכן, אלא אם אתם צריכים לתמוך בדפדפנים ממש ישנים, כדאי פשוט להשתמש ב-WOFF2. אם אין לכם אפשרות לעשות זאת, כדאי לשקול לא להציג גופני אינטרנט בדפדפנים הישנים האלה בכלל. זה לא יהיה בעיה אם יש לכם אסטרטגיית חלופית חזקה. מבקרים בדפדפנים ישנים יותר יראו את הגופנים החלופיים.
קבוצות משנה של גופנים
קובצי גופנים כוללים בדרך כלל מספר גדול של סמלים לכל התווים השונים שהם תומכים בהם. אבל יכול להיות שלא תצטרכו את כל התווים בדף, ואפשר לצמצם את גודל קובצי הגופן על ידי יצירת קבוצות משנה של גופנים.
התיאור unicode-range
בהצהרה @font-face
מעדכן את הדפדפן באילו תווים אפשר להשתמש בגופן.
@font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
unicode-range: U+0025-00FF;
}
קובץ הגופן יורד אם הדף מכיל תו אחד או יותר שתואמים לטווח ה-Unicode. בדרך כלל משתמשים ב-unicode-range
כדי להציג קבצי גופנים שונים בהתאם לשפה שבה כתוב תוכן הדף.
בדרך כלל משתמשים ב-unicode-range
בשילוב עם שיטת יצירת קבוצות משנה.
פונט של קבוצת משנה כולל חלק קטן יותר מהגליפים שהיו בקובץ הפונט המקורי. לדוגמה, במקום להציג את כל התווים לכל המשתמשים, אתר יכול ליצור גופנים נפרדים של קבוצות משנה לתווים לטיניים ולתווים קיריליים.
מספר הגליפים בכל גופן משתנה מאוד:
- גופנים לטינית מכילים בדרך כלל בין 100 ל-1,000 גליפים לכל גופן.
- גופנים מסוג CJK יכולים להכיל יותר מ-10,000 תווים.
הסרת גליפים שלא בשימוש יכולה לצמצם באופן משמעותי את גודל הקובץ של הגופן.
יכול להיות שחלק מספקי הגופנים יספק גרסאות שונות של קובצי גופנים עם קבוצות משנה שונות באופן אוטומטי. לדוגמה, Google Fonts עושה זאת כברירת מחדל:
/* devanagari */
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJbecnFHGPezSQ.woff2) format('woff2');
unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}
/* latin-ext */
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJnecnFHGPezSQ.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJfecnFHGPc.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
כשעוברים לאירוח עצמי, זו אופטימיזציה שאפשר לפספס ועלולה להוביל לקבצי גופנים גדולים יותר באופן מקומי.
אם ספק הגופנים מאפשר זאת, אפשר ליצור קבוצת משנה של גופנים באופן ידני באמצעות API (Google Fonts תומך בכך באמצעות פרמטר text
) או על ידי עריכת קובצי הגופנים באופן ידני ולאחר מכן אירוח עצמאי. כלים ליצירת קבוצות משנה של גופנים כוללים את subfont ואת glyphanger.
תמיד חשוב לבדוק את רישיונות הגופנים כדי לוודא שהם מאפשרים יצירת קבוצות משנה ואירוח עצמי.
שימוש בפחות גופנים לאינטרנט
הגופן שמועבר במהירות הרבה ביותר הוא גופן שלא מבוקש מלכתחילה. גופנים של מערכת וגופנים משתנים הם שתי דרכים אפשריות להפחית את מספר גופני האינטרנט שבהם נעשה שימוש באתר.
גופן מערכת הוא גופן ברירת המחדל שמשתמשים בו בממשק המשתמש של המכשיר של המשתמש. גופנים מערכתיים משתנים בדרך כלל בהתאם למערכת ההפעלה ולגרסה שלה. הגופן כבר מותקן, ולכן אין צורך להוריד אותו. גופנים של מערכת יכולים להתאים במיוחד לטקסט בגוף.
כדי להשתמש בגופן המערכת ב-CSS, מציינים את system-ui
כ-font-family:
font-family: system-ui
הרעיון שמאחורי גופנים משתנים הוא שאפשר להשתמש בגופן משתנה אחד כתחליף לכמה קובצי גופנים. גופנים משתנים פועלים על ידי הגדרת סגנון גופן 'ברירת מחדל' ומתן 'צירים' לצורך מניפולציה בגופן.
לדוגמה, אפשר להשתמש בגופן משתנה עם ציר Weight
כדי להטמיע אותיות שבעבר היו דורשות גופנים נפרדים לסוגי אותיות שונים: בהיר, רגיל, מודגש ומודגש במיוחד.
לא כולם נהנים מהמעבר לגופנים משתנים. גופנים משתנים מכילים הרבה סגנונות, ולכן בדרך כלל הם גדולים יותר מאשר גופנים רגילים שאינם משתנים, שמכילים רק סגנון אחד. האתרים שבהם השימוש בגופנים משתנים יביא לשיפור הגדול ביותר הם אתרים שמשתמשים במגוון סגנונות ועוביים של גופנים (וצריך להשתמש בהם).
רינדור גופנים
כשהדפדפן נתקל בגופן אינטרנט שעדיין לא נטען, הוא מתמודד עם דילמה: האם כדאי להשהות את העיבוד של הטקסט עד שהגופן יגיע? או שצריך להציג את הטקסט בגופן חלופי עד שהגופן לאינטרנט יגיע?
דפדפנים שונים מטפלים בתרחיש הזה בצורה שונה. כברירת מחדל, דפדפנים מבוססי Chromium ודפדפני Firefox חוסמים את רינדור הטקסט למשך עד 3 שניות אם גופן האינטרנט המשויך לא נטען. דפדפן Safari חוסם את העיבוד של טקסט ללא הגבלת זמן.
אפשר להגדיר את ההתנהגות הזו באמצעות המאפיין font-display
. לבחירה הזו יכולות להיות השלכות משמעותיות: font-display
יכול להשפיע על LCP, FCP ועל יציבות הפריסה.
בחירת אסטרטגיה מתאימה ל-font-display
font-display
מידע לדפדפן על האופן שבו הוא צריך להמשיך בתהליך העיבוד של הטקסט כשהגופן הדיגיטלי המשויך לא נטען. הוא מוגדר לכל גופן.
@font-face {
font-family: Roboto, Sans-Serif
src: url(/fonts/roboto.woff) format('woff'),
font-display: swap;
}
יש חמישה ערכים אפשריים ל-font-display
:
ערך | תקופת החסימה | תקופת המכרז |
---|---|---|
זיהוי אוטומטי | משתנה בהתאם לדפדפן | משתנה בהתאם לדפדפן |
חסימה | 2-3 שניות | בלתי מוגבל |
החלף | 0ms | בלתי מוגבל |
חלופי | 100 אלפיות שניה | 3 שניות |
אופציונלי | 100 אלפיות שניה | ללא |
- תקופת החסימה: תקופת החסימה מתחילה כשהדפדפן מבקש גופן אינטרנט. במהלך תקופת החסימה, אם גופן האינטרנט לא זמין, הגופן יומר לגופן חלופי בלתי נראה, ולכן הטקסט לא יהיה גלוי למשתמש. אם הגופן לא יהיה זמין בסיום תקופת החסימה, הוא יומר בגופן החלופי.
- תקופת ההחלפה: תקופת ההחלפה מתחילה אחרי תקופת החסימה. אם גופן האינטרנט יהפוך לזמין במהלך תקופת ההחלפה, הוא יוחלף.
אסטרטגיות font-display
משקפות נקודות מבט שונות לגבי האיזון בין הביצועים לאסתטיקה. לכן, קשה להמליץ על גישה מסוימת, כי היא תלויה בהעדפות אישיות, במידת החשיבות של גופן האינטרנט לדף ולמותג, ובמידת ההפרעה שעשויה להיגרם כתוצאה משינוי גופן שמגיע באיחור.
ברוב האתרים, אלה שלוש השיטות הכי רלוונטיות, בהתאם לעדיפות העליונה שלכם:
ביצועים: משתמשים ב-
font-display: optional
. זוהי הגישה 'היעילה ביותר': העיבוד של הטקסט מתעכב למשך 100 אלפיות השנייה לכל היותר, ויש ודאות שאין שינויים בפריסה שקשורים להחלפת הגופן. החיסרון הוא שלא תהיה אפשרות להשתמש בגופן האינטרנט אם הוא יגיע באיחור.הצגת טקסט במהירות ועדיין שימוש בגופן אינטרנט: משתמשים ב-
font-display: swap
, אבל חשוב לשלוח את הגופן מספיק מוקדם כדי שהוא לא יגרום לשינוי בפריסה. החיסרון של האפשרות הזו הוא המעבר החד כשהגופן מגיע באיחור.הטקסט מוצג בגופן אינטרנט: צריך להשתמש ב-
font-display: block
, אבל חשוב לשלוח את הגופן מוקדם מספיק כדי לצמצם את העיכוב בהצגת הטקסט. הצגת הטקסט הראשונית מתעכבת. למרות העיכוב הזה, הוא עדיין עלול לגרום לשינוי בפריסה כי הטקסט מצויר בפועל באופן בלתי נראה, ולכן שטח הגופן החלופי משמש לשמירת המרחב. אחרי טעינת הגופן לאינטרנט, יכול להיות שיהיה צורך במרחב שונה, ולכן תתבצע העברה. יכול להיות שהשינוי הזה יהיה פחות בולט מ-font-display: swap
, כי הטקסט עצמו לא יזוז.
חשוב גם לזכור שאפשר לשלב בין שתי הגישות האלה: לדוגמה, אפשר להשתמש ב-font-display: swap
למיתוג ולרכיבים אחרים בדף ששונים מבחינה חזותית.
משתמשים ב-font-display: optional
לגופנים שמשמשים בגוף הטקסט.
גופנים של סמלים
השיטות של font-display
שמתאימות לגופני אינטרנט רגילים לא מתאימות באותה מידה לגופני סמלים. בדרך כלל, הגופן החלופי של גופן סמלים נראה שונה באופן משמעותי מגופן הסמלים, והתווים שלו עשויים להעביר משמעות שונה לגמרי. כתוצאה מכך, יש סיכוי גבוה יותר ששימוש בגופנים של סמלים יגרום לשינויים משמעותיים בפריסה.
בנוסף, יכול להיות שלא יהיה מעשי להשתמש בגופן חלופי. כשהדבר אפשרי, כדאי להחליף גופנים של סמלים בקבצים מסוג SVG, שהם גם טובים יותר לנגישות. בדרך כלל, בגרסאות חדשות יותר של גופנים פופולריים של סמלים יש תמיכה ב-SVG. למידע נוסף על מעבר ל-SVG, אפשר לעיין ב-Font Awesome וב-Material Icons.
צמצום השינוי בין גופן החלופה לגופן האינטרנט
כדי לצמצם את ההשפעה של CLS, אפשר להשתמש במאפייני size-adjust
.
סיכום
גופנים לאינטרנט עדיין מהווים צוואר בקבוק בביצועים, אבל יש לנו מגוון הולך וגדל של אפשרויות שמאפשרות לנו לבצע אופטימיזציה שלהם כדי לצמצם את צוואר הבקבוק הזה ככל האפשר.