CLS (Cumulative Layout Shift) הוא המדד של גוגל ליציבות התצוגה: הוא מודד כמה תוכן בעמוד זז ממקומו באופן לא צפוי בזמן שהגולש קורא או מנסה ללחוץ. כולנו מכירים את זה — מתחילים לקרוא, ופתאום תמונה או באנר נטענים מעל והטקסט קופץ למטה; או גרוע מזה, לוחצים על כפתור ובאותו רגע הוא זז, והלחיצה נוחתת על משהו אחר. לפי web.dev, ערך CLS של 0.1 ומטה ב-75% מהביקורים נחשב טוב, ומעל 0.25 — גרוע. החדשות הטובות: כמעט כל בעיות ה-CLS נובעות מכמה סיבות ידועות, ולכולן יש תיקון פשוט יחסית.
איך CLS מחושב
לא צריך לחשב לבד, אבל ההבנה עוזרת לדעת מה חשוב. לפי ההגדרה ב-web.dev, כל תזוזה מקבלת ציון שהוא מכפלה של שני גורמים:
- שבר ההשפעה — איזה חלק מהמסך האלמנט שזז תפס, לפני ואחרי התזוזה.
- שבר המרחק — כמה רחוק הוא זז, ביחס לממד הגדול של המסך.
התזוזות מקובצות ל"חלונות": תזוזות שקורות בהפרש של פחות משנייה זו מזו, בחלון של עד 5 שניות. ה-CLS של העמוד הוא החלון עם הסכום הגבוה ביותר. המשמעות: אלמנט גדול שזז קצת, או אלמנט קטן שזז הרבה — שניהם פוגעים. ותזוזות שקורות בתוך חצי שנייה אחרי לחיצה או הקשה של הגולש לא נספרות, כי הן צפויות; למשל תפריט שנפתח כשלוחצים עליו.
חמש הסיבות הנפוצות ואיך מתקנים
1. תמונות וסרטונים בלי מידות
כשהדפדפן לא יודע מה גודל התמונה, הוא לא שומר לה מקום, וכשהיא נטענת — כל מה שמתחתיה נדחף. התיקון: תכונות width ו-height על כל תמונה, או aspect-ratio ב-CSS. הדפדפן מחשב מהן את היחס ושומר את המקום מראש, גם כשהתמונה מוצגת ברוחב משתנה. וורדפרס מוסיפה מידות אוטומטית לתמונות מספריית המדיה, אבל תמונות שמוכנסות דרך תבנית או תוסף לא תמיד מקבלות אותן.
2. באנרים, פרסומות והטמעות
פרסומות, סרטוני יוטיוב, מפות וטפסים חיצוניים נטענים מאוחר ובגדלים משתנים. התיקון: לשמור להם מקום מראש עם min-height או aspect-ratio, ולהציב תוכן שנטען מאוחר נמוך יותר בעמוד ולא בראשו. אם אין פרסומת להציג — עדיף להשאיר את המקום ריק מאשר לכווץ אותו.
3. תוכן שנדחף פנימה
באנר עוגיות, הודעת מבצע או התראה שמופיעים בראש העמוד אחרי שהוא נטען דוחפים את כל התוכן למטה. התיקון: להציג אותם כשכבה מעל התוכן (למשל בתחתית המסך), או לשמור להם מקום מההתחלה. כך גם בתוכן שנטען ב-JavaScript אחרי הטעינה — שלד (skeleton) בגודל הנכון עדיף על מקום ריק שמתמלא.
4. פונטים
כשפונט מותאם נטען אחרי שהטקסט כבר הוצג בפונט חלופי, הגדלים של האותיות שונים — והשורות זזות. web.dev ממליץ לטעון מראש (preload) את הפונטים החשובים, לבחור פונט חלופי דומה בממדיו, ולהשתמש בתכונות כמו size-adjust כדי לצמצם את ההבדל. פירוט במאמר טעינת פונטים באתר.
5. אנימציות שמזיזות פריסה
אנימציה שמשנה top, left, רוחב או גובה גורמת לדפדפן לחשב מחדש את הפריסה, וכל מה שסביבה זז. התיקון: להנפיש עם transform, שלא משפיע על אלמנטים אחרים.
איך מוצאים מה זז
- PageSpeed Insights ו-Lighthouse מציגים את האלמנטים שגרמו לתזוזות הגדולות. ראו מדריך ל-Lighthouse.
- כלי המפתחים בכרום — בלשונית Performance, הקלטה של טעינת העמוד מסמנת כל Layout Shift ואת האלמנט שזז.
- לבדוק בטלפון אמיתי ובחיבור איטי. ברשת מהירה הכול נטען כמעט יחד, והתזוזות לא נראות; ברשת סלולרית הן בולטות.
שימו לב: CLS נמדד לאורך כל חיי העמוד, לא רק בטעינה. תוכן שנטען כשגוללים — למשל רשימה אינסופית או פרסומת שנכנסת באמצע המאמר — יכול לפגוע במדד גם אחרי שהעמוד "נטען".
מה זה אומר באתר וורדפרס
במקרים רבים מקור הבעיה הוא בונה העמודים, סליידר בראש העמוד או תוסף שמוסיף באנר. סליידר שהתמונה הראשונה שלו נטענת ב-JavaScript הוא גורם קלאסי גם ל-CLS וגם ל-LCP איטי — על ההשפעה על LCP כתבתי במאמר שיפור LCP. בתבנית ייעודית, כמו שאני בונה, לכל אזור בעמוד יש מידות קבועות מראש, ולכן הבעיה נמנעת כבר בשלב הבנייה ולא מתוקנת אחר כך. ההבדל בין הגישות מפורט במאמר וורדפרס בלי בוני עמודים.
שאלות נפוצות
למה CLS במעבדה טוב, ובנתוני השטח גרוע?
בדיקת מעבדה מודדת רק את הטעינה. גולשים אמיתיים גוללים, ממתינים לפרסומות ונתקלים בתוכן שנטען מאוחר — וכל זה נספר בנתוני השטח.
טעינה עצלה של תמונות פוגעת ב-CLS?
רק אם לתמונות אין מידות. תמונה בטעינה עצלה עם width ו-height שומרת את מקומה ולא גורמת לתזוזה. ראו טעינה עצלה.
כפתור "חזרה" בדפדפן משפיע?
כן, לטובה: עמוד שמשוחזר ממטמון החזרה-קדימה (bfcache) מוצג מיד, בלי לטעון ולזוז שוב. web.dev ממליץ לשמור על העמודים זכאים למטמון הזה.
מאמרים קשורים: ספריית המדיה בוורדפרס: גדלי תמונות, תיקיית העלאות שתופחת וניקוי בטוח.
אם הדוח מראה CLS גבוה ולא ברור מה זז, אני מאתר את האלמנטים ומתקן אותם בתבנית — פירוט בעמוד שיפור מהירות אתר, או כתבו לי.
אהבתם את המאמר?
