בוחרים לפי הצורך
השירותים שלנו
מחליטים מתוך הבנה
אסטרטגיה וצמיחה
מוצאים את הפתרון
CLS מתאר חוסר יציבות בפריסה: תוכן שכבר הופיע זז ללא פעולה מכוונת של המשתמש.
מערכת AI Click · עודכן בספטמבר 2026 · כ־6 דקות קריאה
קפיצה כזו יכולה לגרום ללחיצה על יעד שגוי, לאבד שורה בזמן קריאה או להסתיר הודעה. המדד אינו מבקש להקפיא כל אנימציה ואינו מוכח מצילום מסך יחיד. צריך לזהות מה זז, מתי, מדוע לא נשמר מקום, והאם התנועה נגרמה מטעינה מאוחרת או מאינטראקציה מכוונת. מדריך זה עוסק בתמונות, באנרים, גופנים, embeds ותוכן דינמי, כולל תהליך בדיקה, קבלה ו־חזרה לגרסה הקודמת. יעד טוב הוא CLS עד 0.1 באחוזון 75, בפילוח נייד ומחשב. השאלה החשובה אינה רק כיצד להקטין מספר, אלא כיצד לשמור על מסך צפוי עבור אדם שקורא או מנסה לפעול. פתרון שמסתיר הודעה, חותך טקסט, מוחק fallback או מכסה כפתור אינו שיפור אמיתי. מתכננים מקום, בודקים תרחישים איטיים, ומוודאים שהתוכן נשאר נגיש גם כאשר ספק חיצוני או רשת אינם מתנהגים כרגיל.
CLS מתבסס על אשכול שינויי הפריסה בעל הציון הגבוה ביותר, לפי חלונות זמן לאורך חיי הדף, לא רק בזמן הטעינה הראשוני. אם פסקה, כפתור או תמונה משנים מקום אחרי שהמשתמש כבר רואה אותם, נוצרת תנועה שעלולה לפגוע בשימוש. תנועה שהמשתמש יזם, כמו פתיחת תפריט או הרחבת אקורדיון, אינה בהכרח אותה בעיה, אך צריך לבדוק שהממשק צפוי ונגיש. CLS הוא מדד שטח ומעבדה עם הקשרים שונים, ולכן צילום מסך אחד אינו הוכחה ליציבות. רושמים איזה אזור זז, איזה אלמנט גרם לתנועה, כמה שטח נפגע ומה המשתמש עשה באותו רגע. כך עוברים מציון לסיבה.
כדאי להבדיל גם בין הרכיב שזז לבין הגורם שהזיז אותו. כלי הבדיקה יכול לסמן את הפסקה שנדחפה, אף שהסיבה נמצאת בתמונה שמעליה. מסירת צילום של הפסקה למפתח ללא הקשר עלולה להוביל לשינוי שוליים מיותר. פותחים את ציר הזמן רגע לפני התזוזה ובודקים מה נוסף או שינה גובה. בנוסף, תזוזות מסוימות בסמוך לקלט משתמש מוחרגות מהמדד; תגובה מאוחרת אינה מוחרגת אוטומטית רק מפני שלחיצה התחילה את התהליך.
תמונה ללא מידות ידועות יכולה להגיע בלי גובה, ואז הטקסט שמתחתיה נדחף כשהקובץ מפוענח. מגדירים width ו־height או יחס aspect-ratio שמתאים למסגרת, כולל גרסאות responsive. אם חיתוך משתנה בין מובייל למחשב, מגדירים יחס לכל breakpoint ובודקים שאין החלפה שמאפסת גובה. גם תמונת רקע צריכה מסגרת יציבה; עצם העובדה שאין תג img אינה פותרת תנועה. בודקים placeholder, object-fit, יחס קרופ וטעינת תמונה איטית. בדיקת הקבלה הוא שהכותרת וכפתור הפעולה אינם משנים מיקום במהלך טעינה רגילה ואיטית, בלי לפגוע בתמונה או לייצר שטח ענק שאינו מוצג.
באנר מבצע, הודעת פרטיות או שטח פרסום שמוזרקים מאוחר צריכים לקבל מקום מתוכנן לפני שהתגובה מגיעה. מגדירים min-height או slot עם מידות ידועות, אך בוחרים גובה לפי תרחיש אמיתי ולא לפי ניחוש שמבזבז מסך. אם באנר אינו מוצג, צריך להחליט האם ה־slot מתקפל באופן צפוי ובאיזה שלב, כדי לא להשאיר חלל מבלבל. בדקו משתמש חדש, משתמש חוזר, הסכמה, חסימת פרסום ותוכן מותאם אישית. אין להסתיר הודעה חיונית כדי לקבל CLS נמוך. מסמך המפתח צריך לכלול מי מאכלס את ה־slot, מתי, מה קורה בכשל ומה ניתן לבטל בלי לשבור את הפריסה.
גופן מאוחר יכול לשנות רוחב אותיות, שבירת שורות וגובה כותרת, ולכן להזיז תוכן. בודקים font-display, זמינות קובץ הגופן, fallback דומה, משקל ו־unicode subset. פתרון אינו תמיד להסתיר טקסט עד שהגופן מוכן; הסתרה פוגעת בהבנה, נגישות ותחושת טעינה. אפשר לבחור fallback עם מדדים קרובים, להגדיר line-height יציב, לצמצם משקלים ולבדוק טעינה מוקדמת כשיש הצדקה. ב־trace רושמים מתי הטקסט הופיע ומתי השתנה. בדיקת הקבלה כולל קריאות במכשיר חלש, שינוי גודל טקסט, שפה עברית ואנגלית, מצב גופן חסום, ושמירה על focus אם המשתמש התחיל להקליד.
וידאו, מפה, iframe, ביקורות או widget חיצוני עלולים להחליף placeholder קטן באזור גדול. קובעים מסגרת ויחס מידות מראש, מציגים שלד שמתאים למקום, ומטעינים את התוכן לפי צורך בלי לשנות את גובה האזור לאחר הופעתו. אם embed נכשל, מציגים הודעת כשל בתוך אותה מסגרת וקישור חלופי, לא מבטיחים תוכן שהגיע. בודקים חסימת צד שלישי, הסכמה, חיבור איטי, נייד וסיבוב מסך. אין להחליף embed בתמונה מזויפת או להסתיר מידע חיוני. מפתח מתעד בעלים, מקור, אירועי טעינה, timeout והתנהגות fallback, כדי שאבחון עתידי יוכל להבדיל בין layout יציב לבין widget שלא הגיע.
מחירי משלוח, הודעות מערכת, המלצות, עגלת קניות, צ׳אט ו־A/B test עשויים להופיע לאחר ה־load. שואלים האם המשתמש ציפה לעדכון, האם הוא יזם אותו, והאם ניתן להציגו בשכבה שאינה דוחפת תוכן. הודעה חשובה לא מעבירים ל־position fixed רק כדי להעלים מדידה, כי היא עלולה לכסות כפתור או להיות בלתי נגישה. כשאי אפשר לדעת גובה, מציגים placeholder עם טווח סביר או מתכננים אזור ייעודי. בודקים גם רענון, חזרה מדף אחר, התחברות ושינוי שפה. בדיקת הקבלה מגדיר מיקום, סדר קריאה, מצב ריק, שגיאה, timeout והאם התוכן נשאר נגיש לקוראי מסך.
לא כל תזוזה שנראית על המסך היא שינוי פריסה. אנימציה שמופעלת באמצעות transform יכולה להזיז פיקסלים בלי לדחוף אחים ב־layout, בעוד שינוי width, height, top או תוכן יכול לגרום לתנועה אמיתית. לכן משווים trace, רשימת layout shifts ו־source element, ולא מסתמכים על עין או צילום. עם זאת, transform אינו פטור לבדיקת שימושיות: תנועה מהירה, focus שקופץ או כפתור שמחליק עלול לבלבל. בודקים prefers-reduced-motion, מקלדת ומסך קטן. בדיקת הקבלה דורש גם CLS יציב וגם אנימציה שאינה מסתירה יעד או מפריעה למשתמש שביקש להפחית תנועה.
דוגמה היפותטית: עמוד נחיתה מציג כותרת, אחריה slot פרסום בגובה אפס, ומתחתיו טופס. אחרי 900 מילישניות הבאנר מקבל 250 פיקסלים ודוחף את הטופס; במקביל גופן עברי מאוחר משנה את שבירת הכותרת. תיקון ראשון הוא שמירת מסגרת לבאנר לפי תרחישי מובייל, עם fallback ברור כאשר אין פרסומת. תיקון שני הוא fallback לגופן בעל רוחב דומה ו־line-height יציב, לא הסתרת הכותרת. מודדים כל גורם בנפרד במכשיר חלש ובחיבור איטי, כדי לדעת מה תרם. אם המסגרת יוצרת חלל מוגזם, בודקים וריאציות מדודות ולא מבטלים אותה בעיוורון.
מתעדים baseline עם URL, viewport, נייד או מחשב, cache, מצב הסכמה ותסריט. מריצים כמה טעינות, צופים ב־layout shift regions ובודקים אילו nodes זזו. משחזרים גם מעבר בין מסכים, פתיחת modal, שינוי שפה, הסרת cookies והגעה לאחר redirect, כי CLS יכול להתרחש אחרי הטעינה הראשונית. לאחר שינוי בודקים שהמקום נשמר, שהמידע לא מוסתר, שהקריאות והטפסים נשארו נגישים ושאין גלילה אופקית. בדיקת הקבלה טוב כולל תרחיש תוכן קיים, תוכן ריק, timeout ותוכן ארוך מהרגיל. מגדירים חזרה לגרסה הקודמת דרך feature flag, שינוי CSS או החזרת מידות, ומאמתים שהגרסה הקודמת אינה משאירה cache ישן.
בדיקה שימושית בעמוד בעברית היא הגדלת הטקסט בדפדפן בלי להגדיל את רוחב החלון. כותרת שנשארה בשתי שורות בצילום הרגיל עשויה להפוך לארבע שורות. לכן גובה קשיח לכל אזור אינו פתרון גורף: הוא יכול לייצב את התמונה ובמקביל לחתוך הסבר או להסתיר כפתור. כאשר התוכן טקסטואלי ומשתנה, מעדיפים פריסה שמאפשרת לו לצמוח, ושומרים מידות צפויות לרכיבים שחוזרים באותו יחס. בודקים את השילוב, ולא כל רכיב בבידוד.
יציבות פריסה מגינה על פעולות: קריאת הצעה, לחיצה על מחיר, מילוי טופס ובחירת מוצר. היא אינה תחרות על ציון בלבד ואינה מבטיחה דירוג, המרה או חוויית משתמש מושלמת. בעל אתר צריך לבקש הסבר על מקור כל shift, במיוחד אם הפתרון מסתיר תוכן חיוני או מקבע שטח שאינו נחוץ. יעד טוב הוא CLS עד 0.1 באחוזון 75, בפילוח נייד ומחשב, אך חלון הנתונים והתרחישים חשובים. אין להסיק מצילום מעבדה יחיד שכל המבקרים יציבים. החלטה נכונה שומרת מקום, מציגה מצב אמיתי, מכבדת גופנים ונגישות, ומאפשרת חזרה בטוחה אם שינוי עסקי או ספק חיצוני מתנהגים אחרת.
לא. הוא יכול להתרחש גם אחרי טעינה בגלל באנר, גופן, widget, הודעה או תוכן דינמי.
לא. צריך trace, אזורי שינוי ושחזור בתנאי מכשיר ורשת מתאימים; צילום יחיד אינו הוכחה.
לא. הוא עלול להסתיר תוכן או לפגוע בנגישות. בודקים אם העדכון צפוי ונגיש לפני בחירה במיקום.
עד 0.1 באחוזון 75 נחשב יעד טוב, בפילוח נייד ומחשב, בלי להפוך זאת להבטחת דירוג.
בחרו עמוד אחד או תהליך אחד מהמדריך, תעדו את המצב הקיים ובדקו מה דורש טיפול. אם צריך עזרה באבחון ובהחלטה מה לקדם קודם, אפשר לפנות עם הכתובת והבעיה שמצאתם.