הגדרה קצרה
CLS מודד כמה אלמנטים בדף זזים באופן בלתי צפוי בזמן הטעינה, ומתריע על יציבות ויזואלית ירודה.
הרחבה
יעד: מתחת ל-0.1. סיבות עיקריות: תמונות בלי width/height, פונטים שמחליפים גופן באמצע (FOIT/FOUT), פרסומות שנטענות אחורי, ומודליים שקופצים. פתרונות: לשמור מקום שמור לכל אלמנט דינמי, שימוש ב-font-display: optional/swap עם התאמת גופן.
למה Cumulative Layout Shift חשוב לקידום ולשיווק?
כולם מכירים את התסכול: קוראים כותרת, מתכוונים ללחוץ על כפתור, ובדיוק אז נטען באנר שדוחף את כל הדף למטה והלחיצה נוחתת על פרסומת או על קישור אחר. CLS מכמת בדיוק את החוויה הזאת. בשונה ממדדי מהירות, הוא לא תלוי בחיבור של הגולש אלא בקוד של האתר, ולכן הוא לגמרי בשליטתכם ולרוב זול לתיקון.
ההשפעה העסקית גדולה מהנראות שלה. קפיצות בדף פוגעות באמון, גורמות ללחיצות שגויות ומייצרות נטישה בטפסים ובדפי תשלום. באתרי תוכן בעברית הבעיה חריפה במיוחד בגלל פונטים עבריים שנטענים מאוחר ומשנים את גובה השורות, ובאתרי מסחר בגלל מודעות, תוספי צ׳אט ופסי קופונים שנדחפים מלמעלה. ומכיוון ש-CLS הוא אחד משלושת מדדי Core Web Vitals, הוא משפיע ישירות גם על סטטוס הדפים ב-Search Console.
איך מודדים ומיישמים את זה בפועל?
האבחון הנוח ביותר נעשה ב-PageSpeed Insights, בשורה ״Avoid large layout shifts״, שמפרטת איזה אלמנטים זזו וכמה כל אחד תרם לציון. לבדיקה חיה משתמשים ב-Chrome DevTools: בלשונית Performance מקליטים טעינה ומסננים לפי Layout Shift, או מפעילים את ההדגשה של אזורי תזוזה דרך תפריט Rendering. התוסף Web Vitals של גוגל מציג את הערך בזמן אמת בזמן שגוללים ולוחצים.
התיקון הולך לפי סוג האלמנט. לתמונות ולווידאו מגדירים width ו-height או aspect-ratio ב-CSS כדי שהדפדפן ישמור את המקום מראש. לפרסומות, אמבדים ובלוקים דינמיים מגדירים קונטיינר בגובה מינימלי קבוע. לפונטים בוחרים font-display: swap או optional יחד עם size-adjust כדי שהגופן החלופי יתפוס אותו שטח, ועדיף לטעון את הפונט מקומית ולא מ-Google Fonts. פסי הודעה וקופונים נכנסים מעל התוכן בלי לדחוף אותו, או מופיעים רק אחרי אינטראקציה. חשוב לזכור שגוגל מודדת CLS לאורך כל הביקור, לא רק בטעינה, ולכן גם תוכן שנטען בגלילה אינסופית צריך מקום שמור.
טעויות נפוצות
- להעלות תמונות בלי מידות ולהסתמך על CSS שקובע רק רוחב, כך שהגובה ידוע רק אחרי ההורדה.
- להוסיף פס קופון או הודעת קוקיז שנדחף מעל הכותרת אחרי שהדף כבר מוצג.
- לטעון פונט עברי מ-Google Fonts בלי fallback מותאם, ולקבל קפיצה בכל כותרת כשהגופן מתחלף.
- להשאיר תוספי צ׳אט ווידג׳טים שמזריקים אלמנטים למקום שבו הגולש כבר קורא.
- לבדוק רק את רגע הטעינה ולפספס תזוזות שקורות בגלילה או בלחיצה על טאב.
דוגמה מהשטח
לדוגמה, נניח שאתר חדשות מקומי מריץ בראש כל כתבה באנר פרסומת שנטען אחרי התוכן, ומשתמש בפונט עברי שמגיע מהרשת. הגולש מתחיל לקרוא את הפסקה הראשונה, הבאנר מופיע ודוחף הכול למטה, ואז הפונט מתחלף וכל הכותרות משנות גובה. שתי קפיצות בלבד, אבל יחד הן מעבירות את הדף הרבה מעל הסף של 0.1. הקצאת גובה קבוע לקונטיינר של הפרסומת ופונט מקומי עם גופן חלופי מותאם מבטלות את שתי התזוזות. הקוראים לוחצים על מה שהתכוונו, שיעור הנטישה בכתבות יורד, והתבנית חוזרת לירוק בדוח.
להמשך קריאה
שאלות נפוצות על Cumulative Layout Shift
מה נחשב CLS טוב?
- גוגל מגדירה CLS טוב כערך נמוך מ-0.1 באחוזון ה-75 של הביקורים. בין 0.1 ל-0.25 הדף מסומן כ״נדרש שיפור״, ומעל 0.25 הוא נכשל. הערך הוא מכפלה של שטח האלמנט שזז במרחק התזוזה, לכן תזוזה גדולה אחת מספיקה כדי להיכשל.
למה ה-CLS גבוה רק בנייד?
- במסך צר כל אלמנט תופס חלק גדול יותר מהשטח הנראה, ולכן אותה תזוזה נספרת כגדולה יותר. בנוסף, בנייד הפונטים והתמונות נטענים לאט יותר, כך שהחלפת הגופן והופעת הבאנרים קורות כשהגולש כבר צופה בתוכן.
האם פופאפים פוגעים ב-CLS?
- פופאפ שנפתח מעל התוכן בשכבה נפרדת לא נספר, כי הוא לא מזיז אלמנטים אחרים. פס הודעה או באנר שנדחף לתוך זרימת הדף ומוריד את התוכן למטה נספר, וזה אחד הגורמים הנפוצים לציון גבוה.