CSS ל-Web Vitals

שיטות שקשורות ל-CSS לאופטימיזציה של מדדי Web Vitals

Katie Hempenius

Una Kravets

האופן שבו כותבים את הסגנונות ובונים את הפריסות יכול להשפיע באופן משמעותי על מדדי הליבה של ביצועי האתר. זה נכון במיוחד לגבי Cumulative Layout Shift (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.

תמונות

תמונות ו-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. ככל שמבקשים גופן מוקדם יותר, כך אפשר לטעון אותו ולהשתמש בו מהר יותר.

כדי לראות את שרשרת הבקשות של גופן, לוחצים על הכרטיסייה יוזם. באופן כללי, ככל ששרשרת הבקשות קצרה יותר, כך אפשר לבקש את הגופן מוקדם יותר.

תיקון

הדגמה הזו משתמשת ב-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 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.