איך להימנע משינויים פתאומיים בפריסה כדי לשפר את חוויית המשתמש
תאריך פרסום: 5 במאי 2020, תאריך עדכון אחרון: 7 בפברואר 2025
Cumulative Layout Shift (CLS) הוא אחד משלושת המדדים של מדדי הליבה לבדיקת חוויית המשתמש באתר. המדד הזה מודד את חוסר היציבות של התוכן על ידי שילוב של המרחק שבו הרכיבים המושפעים עברו עם המרחק שבו התוכן הגלוי השתנה באזור התצוגה.
שינויים בפריסה עלולים להסיח את דעת המשתמשים. נסו לדמיין שאתם מתחילים לקרוא מאמר, ופתאום רכיבים בדף זזים, מפריעים לכם ועכשיו אתם צריכים למצוא שוב את המקום שבו הפסקתם. המצב הזה נפוץ מאוד באינטרנט, כולל כשקוראים את החדשות או מנסים ללחוץ על הלחצנים 'חיפוש' או 'הוספה לעגלת הקניות'. חוויות כאלה הן מטרידות ומעצבנות מבחינה ויזואלית. בדרך כלל, הן נגרמות כשאלמנטים גלויים נאלצים לזוז כי רכיב אחר נוסף לדף באופן פתאומי או שהגודל שלו השתנה.
כדי לספק חוויית משתמש טובה, האתרים צריכים לשאוף לערך CLS של 0.1 או פחות ב-75% לפחות מהכניסות לדף.
בניגוד למדדים האחרים של Core Web Vitals, שהם ערכים מבוססי-זמן שנמדדים בשניות או במילי-שניות, ציון ה-CLS הוא ערך ללא יחידה שמבוסס על חישוב של כמות התוכן שזזה ומרחק ההזזה.
במדריך הזה נסביר איך לבצע אופטימיזציה של סיבות נפוצות לשינויים בפריסה.
הסיבות הנפוצות ביותר ל-CLS נמוך הן:
- תמונות ללא מידות.
- מודעות, תוכן מוטמע ומסגרות IFRAME ללא מידות.
- תוכן שהוזרק באופן דינמי, כמו מודעות, תוכן מוטמע ותגי iframe ללא מאפייני גובה ורוחב.
- גופנים לאינטרנט.
הסבר על הסיבות לשינויים בפריסה
לפני שמתחילים לבדוק פתרונות לבעיות נפוצות ב-CLS, חשוב להבין את הציון שלכם ב-CLS ואת המקור של השינויים.
CLS בכלים של מעבדה לעומת CLS בשטח
מפתחים רבים סבורים שה-CLS שנמדד באמצעות דוח חוויית המשתמש של Chrome (CrUX) שגוי, כי הוא לא תואם ל-CLS שהם מודדים באמצעות Chrome DevTools או כלים אחרים של Lab. ייתכן שכלי מעבדת ביצועי האינטרנט, כמו Lighthouse, לא יציג את הערך המלא של CLS בדף, כי בדרך כלל הם מבצעים טעינה בסיסית של הדף כדי למדוד מדדים מסוימים של ביצועי האינטרנט ולספק הנחיות מסוימות (אבל תהליכי המשתמש ב-Lighthouse מאפשרים לכם למדוד מעבר לבדיקת טעינה שמוגדרת כברירת מחדל של הדף).
CrUX הוא מערך הנתונים הרשמי של תוכנית המדדים הבסיסיים של חוויית המשתמש באתר. לכן, מדד CLS נמדד במהלך כל מחזור החיים של הדף, ולא רק במהלך טעינת הדף הראשונית שבה נמדדים בדרך כלל הכלים של Lab.
שינויים בפריסה הם תופעה נפוצה מאוד במהלך הטעינה של הדף, כי כל המשאבים הנדרשים נשלפים כדי לבצע את העיבוד הראשוני של הדף, אבל שינויים בפריסה יכולים לקרות גם אחרי הטעינה הראשונית. יכול להיות שיחולו שינויים רבים לאחר הטעינה כתוצאה מאינטראקציה של משתמש, ולכן הם לא ייכללו בציון CLS כי הם שינויים צפויים – כל עוד הם מתרחשים תוך 500 אלפיות השנייה ממועד האינטראקציה.
עם זאת, יכול להיות שיהיו שינויים אחרים לאחר הטעינה שלא צפויים למשתמש, במקרים שבהם לא הייתה אינטראקציה שעומדת בדרישות. לדוגמה, אם גוללים הלאה בדף ותוכן שנטען באיטרציה נטען וגורם לשינויים. סיבות נפוצות אחרות ל-CLS לאחר טעינת הדף הן אינטראקציות של מעברים, למשל באפליקציות דף יחיד, שנמשכות יותר מהתקופה של 500 אלפיות השנייה של זמן החסד.
PageSpeed Insights מציג גם את CLS שנמדד על ידי המשתמשים מכתובת URL בקטע 'רוצה נתונים על החוויה של המשתמשים באתר בפועל?', וגם את CLS שנמדד במעבדה בקטע 'אבחון בעיות בביצועים'. סביר להניח שההבדלים בין הערכים האלה נובעים מ-CLS לאחר הטעינה.