שיטות שקשורות ל-CSS לאופטימיזציה של מדדי Web Vitals
האופן שבו כותבים את הסגנונות ובונים את הפריסות יכול להשפיע באופן משמעותי על מדדי הליבה של ביצועי האתר. זה נכון במיוחד לגבי מדד יציבות חזותית (CLS) והמהירות שבה נטען רכיב התוכן הכי גדול (LCP).
במאמר הזה נסביר על טכניקות שקשורות ל-CSS לצורך אופטימיזציה של מדדי Web Vitals. האופטימיזציות האלה מפורטות לפי היבטים שונים של הדף: פריסה, תמונות, גופנים, אנימציות וטעינה. לאורך הדרך, נראה איך לשפר דף לדוגמה:
פריסה
הוספת תוכן ל-DOM
הוספת תוכן לדף אחרי שהתוכן שמסביב כבר נטען גורמת לכל שאר התוכן בדף לרדת למטה. כתוצאה מכך מתרחשים שינויים במיקום הרכיבים.
הודעות בנושא קובצי cookie, במיוחד הודעות שמופיעות בחלק העליון של הדף, הן דוגמה נפוצה לבעיה הזו. אלמנטים אחרים בדף שגורמים לעיתים קרובות לשינוי הפריסה הזה בזמן הטעינה כוללים מודעות ונכסים מוטמעים.
זהה
בבדיקה 'יש להימנע משינויים משמעותיים בפריסה' של Lighthouse מזוהים אלמנטים בדף שהשתנו. בדגמה הזו, התוצאות נראות כך:
הודעה על קובצי cookie לא מופיעה בתוצאות האלה כי ההודעה עצמה לא זזה בזמן הטעינה. במקום זאת, הוא גורם לפריטים שמתחתיו בדף (כלומר div.hero ו-article) לזוז. מידע נוסף על זיהוי ותיקון של שינויים בפריסה זמין במאמר ניפוי באגים של שינויים בפריסה.
תיקון
ממוקמים את ההודעה על קובצי ה-Cookie בתחתית הדף באמצעות מיקום מוחלט או קבוע.
לפני:
.banner {
position: sticky;
top: 0;
}
אחרי:
.banner {
position: fixed;
bottom: 0;
}
דרך נוספת לתקן את השינוי הזה בפריסת האתר היא להקצות מקום להודעה על קובצי cookie בחלק העליון של המסך. הגישה הזו יעילה באותה מידה. מידע נוסף זמין במאמר שיטות מומלצות להצגת הודעה בנושא קובצי cookie.
תמונות
תמונות ו-Largest Contentful Paint (LCP)
תמונות הן בדרך כלל הרכיב 'המהירות שבה נטען רכיב התוכן הכי גדול' (LCP) בדף. רכיבי דף אחרים שיכולים להיות רכיב ה-LCP כוללים בלוקים של טקסט ותמונות של פוסטרים של סרטונים. הזמן שבו רכיב ה-LCP נטען קובע את ה-LCP.
חשוב לציין שרכיב ה-LCP של דף יכול להשתנות בין טעינת דף לטעינת דף, בהתאם לתוכן שגלוי למשתמש כשהדף מוצג בפעם הראשונה. לדוגמה, בדמו הזה, הרקע של הודעת ה-cookie, תמונת ה-hero וטקסט הכתבה הם חלק מהרכיבים הפוטנציאליים של 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 (גופן). גופנים יכולים להיות קבצים גדולים, ולכן בדרך כלל עדיף להשתמש רק במספר קטן יותר של גופנים כדי לשפר את הביצועים.
כדי לראות כמה זמן חולף עד שהפונט מבוקש, לוחצים על הכרטיסייה Timing. ככל שמבקשים גופן מוקדם יותר, כך אפשר לטעון אותו ולהשתמש בו מוקדם יותר.
כדי לראות את שרשרת הבקשות של גופן, לוחצים על הכרטיסייה Initiator. באופן כללי, ככל ששרשרת הבקשות קצרה יותר, כך אפשר לבקש את הגופן מוקדם יותר.
תיקון
הדגמה הזו משתמשת ב-Google Fonts API. בגופנים של Google יש אפשרות לטעון גופנים באמצעות תגי <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 Fonts, ולטעון את גיליון הסגנונות שמכיל את הצהרת הגופן של Montserrat ו-Roboto. מומלץ למקם את תגי <link> האלה מוקדם ככל האפשר ב-<head>.
אנימציות
הדרך העיקרית שבה אנימציות משפיעות על מדדי Web Vitals היא כשהן גורמות לשינויים בפריסה. יש שני סוגים של אנימציות שכדאי להימנע משימוש בהן: אנימציות שמפעילות פריסה ואפקטים 'דמויי אנימציה' שמזיזים רכיבי דף. בדרך כלל אפשר להחליף את האנימציות האלה באנימציות מקבילות עם ביצועים טובים יותר באמצעות מאפייני 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);
}
}
CSS קריטי
גיליונות סגנונות חוסמים את העיבוד. המשמעות היא שהדפדפן נתקל בסגנון גיליון, והוא יפסיק להוריד משאבים אחרים עד שהוא מוריד את סגנון הגיליונות ומנתח אותו. הפעולה הזו עלולה לעכב את LCP. כדי לשפר את הביצועים, מומלץ להסיר נכסי CSS שלא בשימוש, להטמיע בקוד נכסי CSS קריטיים ולהשהות נכסי CSS לא קריטיים.
סיכום
עדיין יש מקום לשיפורים נוספים (לדוגמה, שימוש בדחיסת תמונות כדי להציג תמונות מהר יותר), אבל השינויים האלה שיפרו באופן משמעותי את מדדי Web Vitals של האתר הזה. אם מדובר באתר אמיתי, השלב הבא הוא לאסוף נתוני ביצועים ממשתמשים אמיתיים כדי להעריך אם הוא עומד בערכי הסף של Web Vitals לרוב המשתמשים. מידע נוסף על מדדי Web Vitals זמין במאמר מידע על מדדי Web Vitals.