טכניקות שקשורות ל-CSS לאופטימיזציה של מדדי הליבה של מהירות האתר
הדרך שבה כותבים את הסגנונות ויוצרים פריסות יכולה להשפיע באופן משמעותי על המדדים הבסיסיים של תפקוד האתר. זה נכון במיוחד לגבי מדד יציבות חזותית (CLS) והמהירות שבה נטען רכיב התוכן הכי גדול (LCP).
במאמר הזה נסביר על טכניקות שקשורות ל-CSS לאופטימיזציה של מדדי הליבה של מהירות האתר. האופטימיזציות האלה מחולקות לפי היבטים שונים של הדף: פריסה, תמונות, גופנים, אנימציות וטעינה. במהלך המאמר, נראה איך אפשר לשפר דף לדוגמה:
פריסה
הוספת תוכן ל-DOM
הוספת תוכן לדף אחרי שהתוכן שמסביב כבר נטען גורמת להזזה של כל שאר התוכן בדף כלפי מטה. כתוצאה מכך, יש שינויים בפריסת הדף.
הודעות על שימוש בקובצי Cookie, במיוחד אלה שמוצבות בראש הדף, הן דוגמה נפוצה לבעיה הזו. רכיבים אחרים בדף שלעתים קרובות גורמים לשינוי פריסה מהסוג הזה כשהם נטענים כוללים מודעות ותוכן מוטמע.
זהה
בביקורת 'יש להימנע משינויים משמעותיים בפריסה' ב-Lighthouse מזוהים רכיבי דף שעברו שינוי. בדמו הזה, התוצאות נראות כך:
ההודעה על קובצי Cookie לא מופיעה בתוצאות האלה כי ההודעה עצמה לא משתנה כשהיא נטענת. במקום זאת, הוא גורם לפריטים שמתחתיו בדף (כלומר, div.hero ו-article) לזוז. מידע נוסף על זיהוי ותיקון של שינויים בפריסה זמין במאמר Debugging Layout Shifts (ניפוי באגים של שינויים בפריסה).
תיקון
ממקמים את הודעת קובצי ה-Cookie בתחתית הדף באמצעות מיקום מוחלט או קבוע.
לפני:
.banner {
position: sticky;
top: 0;
}
אחרי:
.banner {
position: fixed;
bottom: 0;
}
דרך נוספת לתקן את שינוי הפריסה הזה היא להקצות מקום להודעה על שימוש בקובצי Cookie בחלק העליון של המסך. הגישה הזו יעילה באותה מידה. מידע נוסף זמין במאמר בנושא שיטות מומלצות להצגת הודעה על שימוש בקובצי Cookie.
תמונות
תמונות ו-Largest Contentful Paint (LCP)
תמונות הן בדרך כלל רכיב ה-Largest Contentful Paint (LCP) בדף. רכיבי דף אחרים שיכולים להיות רכיב ה-LCP כוללים בלוקים של טקסט ותמונות פוסטר של סרטונים. הזמן שבו רכיב ה-LCP נטען קובע את ערך ה-LCP.
חשוב לציין שרכיב ה-LCP של דף יכול להשתנות מטעינת דף אחת לטעינת דף אחרת, בהתאם לתוכן שגלוי למשתמש כשהדף מוצג בפעם הראשונה. לדוגמה, בהדגמה הזו, הרקע של הודעת השימוש בקובצי Cookie, תמונת הנושא והטקסט של המאמר הם חלק מרכיבי ה-LCP הפוטנציאליים.
באתר לדוגמה, תמונת הרקע של ההודעה על קובצי Cookie היא למעשה תמונה גדולה. כדי לשפר את ה-LCP, אפשר לצבוע את המעבר ההדרגתי ב-CSS במקום לטעון תמונה כדי ליצור את האפקט.
תיקון
משנים את ה-CSS של .banner כך שישתמש בהדרגת CSS במקום בתמונה:
לפני:
background: url("https://cdn.pixabay.com/photo/2015/07/15/06/14/gradient-845701\_960\_720.jpg")
אחרי:
background: linear-gradient(135deg, #fbc6ff 20%, #bdfff9 90%);
תמונות ושינויי פריסה
הדפדפנים יכולים לקבוע את הגודל של תמונה רק אחרי שהיא נטענת. אם טעינת התמונה מתרחשת אחרי שהדף עבר עיבוד, אבל לא הוזמן מקום לתמונה, יתרחש שינוי בפריסה כשהתמונה תופיע. בדמו, התמונה הראשית גורמת לשינוי בפריסה כשהיא נטענת.
זהה
כדי לזהות תמונות ללא מאפייני width ו-height מפורשים, אפשר להשתמש בביקורת 'לרכיבי תמונה יש רוחב וגובה מפורשים' של Lighthouse.
בדוגמה הזו, גם לתמונת הנושא וגם לתמונה במאמר חסרים המאפיינים width ו-height.
תיקון
כדי למנוע שינויים בפריסה, צריך להגדיר את המאפיינים width ו-height בתמונות האלה.
לפני:
<img src="https://source.unsplash.com/random/2000x600" alt="image to load in">
<img src="https://source.unsplash.com/random/800x600" alt="image to load in">
אחרי:
<img src="https://source.unsplash.com/random/2000x600" width="2000" height="600" alt="image to load in">
<img src="https://source.unsplash.com/random/800x600" width="800" height="600" alt="image to load in">
גופנים
גופנים יכולים לעכב את עיבוד הטקסט ולגרום לשינויים בפריסה. לכן חשוב להציג את הגופנים במהירות.
עיבוד מושהה של טקסט
כברירת מחדל, דפדפן לא יעבד מיד רכיב טקסט אם גופני האינטרנט המשויכים לו עדיין לא נטענו. הפעולה הזו מתבצעת כדי למנוע "הבהוב של טקסט לא מעוצב" (FOUT). במצבים רבים, זה גורם לעיכוב בהצגת תוכן ראשוני (FCP). במצבים מסוימים, זה גורם לעיכוב בטעינת רכיב התוכן הכי גדול (LCP).
שינויי הפריסה
החלפת גופנים היא שיטה מצוינת להצגת תוכן למשתמש במהירות, אבל היא עלולה לגרום לשינויים בפריסה. השינויים בפריסה מתרחשים כשגופן אינטרנט וגופן ברירת המחדל שלו תופסים כמויות שונות של מקום בדף. שימוש בגופנים עם פרופורציות דומות יצמצם את הגודל של שינויי הפריסה האלה.
זהה
כדי לראות את הגופנים שנטענים בדף מסוים, פותחים את הכרטיסייה Network בכלי הפיתוח ומסננים לפי Font. גופנים יכולים להיות קבצים גדולים, ולכן בדרך כלל עדיף להשתמש בפחות גופנים כדי לשפר את הביצועים.
כדי לראות כמה זמן לוקח לבקש את הגופן, לוחצים על הכרטיסייה תזמון. ככל שהגופן מבוקש מוקדם יותר, כך הוא נטען ומוכן לשימוש מוקדם יותר.
כדי לראות את שרשרת הבקשות של גופן, לוחצים על הכרטיסייה Initiator (מאותחל). באופן כללי, ככל ששרשרת הבקשות קצרה יותר, כך אפשר לבקש את הגופן מוקדם יותר.
תיקון
בהדגמה הזו נעשה שימוש ב-Google Fonts API. ב-Google Fonts יש אפשרות לטעון גופנים באמצעות תגי <link> או הצהרת @import. קטע הקוד <link> כולל רמז למשאב preconnect. התוצאה אמורה להיות טעינה מהירה יותר של גיליון הסגנונות מאשר בשימוש בגרסה @import.
ברמה גבוהה מאוד, אפשר לחשוב על רמזים למשאבים כדרך לרמוז לדפדפן שהוא יצטרך להגדיר חיבור מסוים או להוריד משאב מסוים. כתוצאה מכך, הדפדפן ייתן עדיפות לפעולות האלה. כשמשתמשים ברמזים למשאבים, חשוב לזכור שמתן עדיפות לפעולה מסוימת גורע ממשאבי הדפדפן שמוקצים לפעולות אחרות. לכן, צריך להשתמש ברמזים למשאבים בצורה מושכלת ולא לכל דבר. מידע נוסף זמין במאמר איך יוצרים חיבורים לרשת מוקדם ככל האפשר כדי לשפר את מהירות הטעינה של הדף.
צריך להסיר את ההצהרה הבאה @import מגיליון הסגנונות:
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400&family=Roboto:wght@300&display=swap');
מוסיפים את התגים הבאים של <link> ל<head> של המסמך:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">
תגי הקישור האלה מנחים את הדפדפן ליצור חיבור מוקדם למקורות שבהם נעשה שימוש בגופנים של Google, ולטעון את גיליון הסגנונות שמכיל את הצהרת הגופן של Montserrat ו-Roboto. תגי <link> האלה צריכים להיות ממוקמים מוקדם ככל האפשר ב-<head>.
אנימציות
הדרך העיקרית שבה אנימציות משפיעות על מדדי הליבה לביצועי אתרים היא כשהן גורמות לשינויים בפריסת הרכיבים. יש שני סוגים של אנימציות שכדאי להימנע מהשימוש בהן:
אנימציות שמפעילות פריסה ואפקטים של אנימציה שגורמים להזזה של אלמנטים בדף. בדרך כלל אפשר להחליף את האנימציות האלה באנימציות מקבילות עם ביצועים טובים יותר באמצעות מאפייני CSS כמו transform, opacity ו-filter. מידע נוסף זמין במאמר איך יוצרים אנימציות CSS עם ביצועים גבוהים.
זהה
הביקורת 'אין להשתמש באנימציות ללא הרכבת שכבות' ב-Lighthouse יכולה לעזור לכם לזהות אנימציות שלא פועלות בצורה אופטימלית.
תיקון
משנים את רצף האנימציה slideIn כך שישתמש ב-transform: translateX() במקום במעבר של המאפיין margin-left.
לפני:
.header {
animation: slideIn 1s 1 ease;
}
@keyframes slideIn {
from {
margin-left: -100%;
}
to {
margin-left: 0;
}
}
אחרי:
.header {
animation: slideIn 1s 1 ease;
}
@keyframes slideIn {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
Critical CSS
גיליונות סגנונות חוסמים את העיבוד. המשמעות היא שאם הדפדפן נתקל בגיליון סגנונות, הוא יפסיק להוריד משאבים אחרים עד שהוא יוריד וינתח את גיליון הסגנונות. הפעולה הזו עלולה לעכב את מדד LCP. כדי לשפר את הביצועים, כדאי להסיר CSS שלא נמצא בשימוש, להטביע CSS קריטי ולדחות CSS לא קריטי.
סיכום
אפשר לבצע שיפורים נוספים (לדוגמה, שימוש בדחיסת תמונות כדי להציג תמונות מהר יותר), אבל השינויים האלה שיפרו באופן משמעותי את מדדי הליבה לביצועי אתרים של האתר הזה. אם זה היה אתר אמיתי, השלב הבא היה לאסוף נתוני ביצועים ממשתמשים אמיתיים כדי להעריך אם האתר עומד בסף של Web Vitals עבור רוב המשתמשים. מידע נוסף על מדדי הליבה לבדיקת חוויית המשתמש באתר זמין במאמר מדדי הליבה לבדיקת חוויית המשתמש באתר.