CLS (Cumulative Layout Shift) הוא מדד ביצועי אינטרנט המודד
את היציבות החזותית של דף אינטרנט בזמן הטעינה שלו.
CLS מתרחש כאשר אלמנטים גלויים בדף משתנים באופן בלתי צפוי בזמן שהדף נטען, מה שגורם לחוויית משתמש גרועה.
בעיות CLS יכולות להיגרם ממספר גורמים, כולל טעינה איטית של תמונות או גופנים, סקריפטים של צד שלישי שמכניסים תוכן דינמי לדף ושימוש לא נכון ב-CSS וב-JavaScript.
כדי לטפל בבעיות CLS, מפתחי אתרים יכולים לנקוט במספר צעדים:
בצע אופטימיזציה של תמונות וגופנים: יש לבצע אופטימיזציה של תמונות וגופנים לטעינה מהירה כדי שלא יגרמו לשינויים בלתי צפויים בפריסה.
שמירת מקום לטעינה דינמית של תוכן: אם דף אינטרנט כולל סקריפטים של צד שלישי המכניסים תוכן באופן דינמי לדף, מפתחים יכולים לשמור מקום לתוכן זה כדי למנוע שינויי פריסה.
השתמש ב-CSS וב-JavaScript בצורה נכונה: על מפתחים לוודא שהם משתמשים ב-CSS וב-JavaScript בצורה נכונה ולהימנע משיטות עבודה שעלולות לגרום לשינויים בפריסה, כגון שימוש בממדים שגויים של תמונה או שינוי ה-DOM לפני שהוא נטען במלואו.
עקוב אחר ציוני CLS: על מפתחים לעקוב אחר ציוני CLS באמצעות כלים כמו PageSpeed Insights של Google או Lighthouse ולנקוט פעולה כאשר הציונים גבוהים.
על ידי טיפול בבעיות CLS, מפתחים יכולים לשפר את חווית המשתמש של דפי האינטרנט שלהם ולהבטיח שלמשתמשים תהיה חוויה חיובית בעת אינטראקציה עם התוכן שלהם.
Shift מצטבר (CLS) הוא מדד ביצועים שמודד עד כמה התוכן הגלוי בדף אינטרנט משתנה בזמן שהוא נטען. CLS מחושב כסכום המכפלה של חלק התצוגה המושפע מהסטת פריסה ומהמרחק שהאלמנט מוזז. במילים אחרות, ציון CLS מייצג את חוסר היציבות החזותית הכוללת של דף אינטרנט.
ישנם מספר גורמים שיכולים לגרום לבעיות CLS, כולל:
תמונות וסרטונים בעלי ממדים ללא יחסי גובה-רוחב או שחסרות להם תכונות רוחב וגובה. כאשר תמונה או סרטון נטענים והממדים שלו אינם מצוינים, פריסת הדף יכולה להשתנות עם טעינת האלמנט.
מודעות, הטמעות ו-iframes הטוענות תוכן באופן דינמי ללא גודל מוגדר. בדומה לתמונות וסרטונים, אם מודעה, הטמעה או iframe נטענת ללא גודל מוגדר, הפריסה יכולה להשתנות ככל שהתוכן נטען.
גופנים הנטענים באופן אסינכרוני או באיחור. כאשר גופנים נטענים באופן אסינכרוני או עם עיכוב, הפריסה יכולה להשתנות ככל שהגופן נטען ומחליף את הגופן החלופי.
JavaScript שמשנה את פריסת העמוד לאחר טעינתו. אם JavaScript משנה את הפריסה לאחר טעינתו, הדף יכול להשתנות באופן בלתי צפוי.
כדי לטפל בבעיות CLS, מפתחי אתרים יכולים לנקוט במספר צעדים:
ציין את הגודל של כל רכיבי המדיה. על ידי ציון הגודל של כל רכיבי המדיה, ניתן לחשב את פריסת העמוד לפני טעינת האלמנט, ולמנוע שינויים בלתי צפויים.
שמור מקום למודעות, הטמעות ו-iframes. על ידי שמירת מקום למודעות, הטמעות ו-iframes, ניתן לחשב את פריסת הדף לפני טעינת התוכן, ולמנוע שינויים בלתי צפויים.
טען גופנים עם מתאר "החלפה". על ידי שימוש במתאר "החלפה", נטען תחילה גופן חלופי, ומונע מהפריסה להזיז בזמן שהגופן נטען.
הימנע משינוי הפריסה עם JavaScript לאחר טעינתה. על ידי הימנעות משינוי הפריסה עם JavaScript לאחר טעינתו, הפריסה של הדף יכולה להישאר יציבה.
עקוב אחר ציוני CLS והשתמש בכלי ביצועים כדי לזהות ולתקן בעיות. מפתחי אינטרנט צריכים לעקוב אחר ציוני CLS ולהשתמש בכלי ביצועים כמו PageSpeed Insights של Google או Lighthouse כדי לזהות ולתקן בעיות.
