CLS — כשאלמנטים קופצים בדף וגוגל מורידה ציון

דמיינו שאתם קוראים כתבה וכבר הגעתם לשורה העשירית — ופתאום תמונה נטענת, דוחפת את הטקסט למטה, ואתם מאבדים את המקום. או שניסיתם ללחוץ על כפתור "קנה", ואחד הרגע לפני הלחיצה כפתור אחר זז מקומו ולחצתם על הדבר הלא נכון. זה בדיוק מה ש-CLS מודד.

CLS הוא ראשי תיבות של Cumulative Layout Shift — מדד שמחשב כמה אלמנטים זזים ממקומם במהלך טעינת הדף ללא שהמשתמש עשה כלום. ציון CLS של 0 פירושו שאין קפיצות בכלל. גוגל קבעה שציון עד 0.1 הוא טוב, בין 0.1 ל-0.25 זה בינוני, ומעל 0.25 זה גרוע.

למה גוגל מודדת את זה? כי דפים שאלמנטים בהם קופצים הם מתסכלים ומובילים לעזיבה מהירה של המשתמש.

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

גורם שני נפוץ: גופנים (Fonts) מיוחדים שנטענים לאחר שהדפדפן כבר הציג את הטקסט בגופן ברירת מחדל. כשהגופן המיוחד מגיע — הגדלים שונים ב-2-3 פיקסלים ואלמנטים זזים.

גורם שלישי: פרסומות ובאנרים שנטענים מאוחר ומוסיפים גובה לחלק העליון של הדף — ודוחפים את כל התוכן מטה.

גורם רביעי: חלוניות "עוגיות" (Cookie Banner) שמופיעות אחרי שהדף נטען ומדחיפות את התוכן.

הפתרון לתמונות הוא פשוט: לציין את הגובה והרוחב של כל תמונה ישירות בקוד HTML.

<img src='photo.webp' width='800' height='600' alt='תיאור'>

כשהדפדפן רואה width ו-height — הוא שומר מקום בדף עוד לפני שהתמונה הגיעה. כשהתמונה מגיעה — היא ממלאת את המקום שהוקצה לה ואין קפיצה.

ב-Next.js, רכיב ה-Image המובנה עושה זאת אוטומטית כשמציינים width ו-height:

<Image src='...' width={800} height={600} alt='תיאור' />

לסרטוני YouTube ו-Iframes — אותו עיקרון. ציינו גובה קבוע ל-iframe ולא תהיה קפיצה.

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

דרך אחת לצמצם את הבעיה: להגדיר font-display: swap בקוד ה-CSS — שאומר לדפדפן להציג גופן זמני ולהחליף כשהגופן המיוחד מוכן, במקום להסתיר את הטקסט לגמרי.

דרך טובה יותר: לבקש מהמפתח להכין את הגופן מראש (Preload) כדי שיגיע לפני שהדפדפן מציג את הטקסט. כך אין החלפה ואין קפיצה.

ב-Next.js, שימוש ב-next/font מטפל בזה אוטומטית ומאפס CLS מגופנים.

פרסומות שנטענות מאוחר הן אחד המאתגרים הגדולים ל-CLS. הפתרון: לשמור מקום קבוע לפרסומת עוד לפני שהיא נטענת.

אם גובה הפרסומת הוא בדרך כלל 90 פיקסלים — הגדירו מיכל קבוע בגובה הזה. הפרסומת תיכנס לתוך המיכל ולא תזיז כלום.

לגבי חלוניות עוגיות: אם הן מוצגות בתחתית המסך בצורה "צפה" (ולא דוחפות את התוכן) — אין בעיה. בעיה קיימת רק כשהן מוסיפות גובה בחלק העליון ודוחפות הכל למטה.

אותו עיקרון לכל תוכן שנטען דינמית דרך JavaScript — אם מוסיפים תוכן מעל תוכן קיים, יש לשמור מקום מראש.

הכלי הנוח ביותר הוא PageSpeed Insights. הכניסו את כתובת הדף ובמקטע "Diagnostics" תמצאו "Avoid large layout shifts" — עם פירוט של האלמנטים שגורמים לבעיה ומה גודל ה-Shift שלהם.

כלי נוסף: Chrome DevTools (F12) — לשונית Performance. לחצו Record, טענו את הדף ועצרו את ההקלטה. בציר הזמן תוכלו לראות Layout Shift Events ולזהות בדיוק איזה אלמנט זז ומתי.

ב-Google Search Console תחת Core Web Vitals תוכלו לראות כמה דפים מסווגים כ-"Poor" בגלל CLS — ואלו כתובות URL הן הבעייתיות ביותר.

CLS הוא המדד הקל יחסית לתיקון מבין שלושת ה-Core Web Vitals. לרוב, הבעיות נובעות מכמה שורות HTML חסרות (width ו-height על תמונות) או ממבנה לא נכון של פרסומות.

מגמה חדשה ב-2026: אנימציות. אנימציות שמשנות את מיקום אלמנטים בדרך מסוימת יכולות לגרום ל-CLS. הפתרון: להשתמש באנימציות שמבוססות על transform בלבד (הזזה ויזואלית ללא שינוי מבני) ולא על שינוי של top, left, height, width — ששינויים אלה כן מחשבים כ-CLS.

חשוב לזכור: גוגל מודדת CLS לפי נתוני משתמשים אמיתיים, לא בדיקת מעבדה. ייתכן שה-CLS שלכם יהיה שונה בדפדפנים שונים ובמכשירים שונים — לכן כדאי לבדוק גם ב-Google Search Console ולא רק ב-PageSpeed Insights.