כדי לתקן Cumulative Layout Shift, צריך לזהות מה משנה את הפריסה במפתיע ולשמור מראש את המקום שהתוכן יצטרך כשיגיע. התחילו במידות המדיה, משבצות הפרסום, ההטמעות, הבאנרים והחלפת הגופנים. הקליטו גם את השימוש אחרי הטעינה הראשונית: מסך ראשון יציב עדיין עלול לזוז בהמשך.
CLS של 0.1 ומטה באחוזון ה-75 נחשב טוב. זהו מדד ללא יחידות לתזוזה חזותית בלתי צפויה, לא זמן בשניות. הורדה מהירה יותר עשויה לצמצם הזדמנויות לתזוזה, אבל פריסה צפויה מטפלת בבעיה באופן ישיר יותר.
להבין את החישוב לפני שעוקבים אחרי האלמנט שזז
ציון של תזוזה בודדת הוא מכפלת שיעור ההשפעה בשיעור המרחק. שיעור ההשפעה הוא איחוד השטחים הגלויים הישנים והחדשים של האלמנטים הלא יציבים, חלקי שטח אזור התצוגה. שיעור המרחק הוא התזוזה האופקית או האנכית הגדולה ביותר, חלקי הממד הארוך של אזור התצוגה. CLS מקבץ תזוזות לחלונות שבהם המרווח בין תזוזות קטן משנייה והמשך הכולל מוגבל לחמש שניות. החלון בעל הסכום הגבוה ביותר קובע את התוצאה.
הדבר חשוב בדפים שנשארים פתוחים זמן רב. המדד אינו סכום שחייב לגדול לאורך כל הקריאה. עם זאת, רצף מאוחר ומפריע יכול לקבוע את הציון גם כשהטעינה הראשונית הייתה יציבה.
חלק מהתזוזות הסמוכות לקלט משתמש אינן נכללות. החריג אינו מכסה כל שינוי מאוחר שאפשר לקשר ללחיצה קודמת, ואינו מוכיח שהתנועה נוחה או נגישה. שמרו על מקום הקריאה ועל שליטת המשתמש גם כשהאירוע אינו משפיע על הציון.
הדפדפן יכול לזהות אלמנטים שזזו, אך לא בהכרח את הגורם. כותרת שמודעה דחפה למטה היא הנפגעת; המודעה שהתרחבה היא הרכיב שצריך לחקור. בדקו מה השתנה בסביבה באותו רגע.
מדריך Core Web Vitals למתחילים מסביר את ההערכה הכוללת. הבדילו בין CLS בהקלטה אחת לבין אחוזון 75 של ביקורים רבים.
להקליט את הטעינה ואת השימוש שאחריה
פתחו Chrome DevTools והקליטו מסלול מייצג בחלונית Performance. בחנו אירועי שינוי פריסה ואת התיעוד החזותי שלהם. כלי Rendering יכולים להדגיש את האזורים שזזים בזמן שחוזרים על הפעולה.
כללו ביקור ראשון, בחירת הסכמה, מודעה שמתעכבת, גלילה להטמעה וגופן שאינו נמצא במטמון חם. בדקו כמה רוחבי מסך. מקום שנשמר נכון במחשב יכול להתרחב או לקרוס בטלפון.
לא כל תנועה נראית היא אירוע CLS. גלילה משנה את האזור הגלוי, וטרנספורמציה יכולה להזיז אלמנט בלי לשנות את הזרימה באותו אופן. הסתמכו על האירועים שנרשמו כדי להבדיל בין המדד לתחושה כללית שמשהו זז.
תעדו בנפרד את הסיבה ואת הנפגע. למשל, מיכל מדיה התרחב ודחק את הכותרת שאחריו, במקום לסמן את הכותרת בלבד כתקולה. כך מי שאחראי לרכיב יקבל משימה שאפשר לבצע.
מדריך אופטימיזציית CLS של Google מבחין בין שינויים בזמן טעינה לשינויים מאוחרים. השתמשו בו כדי לזהות את המקרה שלכם, לא כרשימת תקלות שכביכול נמצאו באתר.
לתת לתמונות ולווידאו מקום צפוי מראש
המאפיינים width ו-height מאפשרים לדפדפן לחשב יחס רוחב-גובה לפני קבלת התמונה. CSS רספונסיבי עדיין יכול להתאים אותה למיכל. הערכים צריכים לייצג את הפרופורציות האמיתיות, לא מספרים שנבחרו רק כדי להשתיק בדיקה.
הדוגמה שומרת מקום לתמונה אופקית שמתאימה למיכל שלה. הקובץ הוא נכס לדוגמה בפרויקט.
<img class="article-image"
src="/images/diagram.webp"
width="1600" height="900"
loading="lazy"
alt="A page layout with space reserved for media">.article-image {
display: block;
max-width: 100%;
height: auto;
}טעינה עצלה מתאימה כאן רק לתמונה שמחוץ לחלק החשוב של המסך הראשון. אל תעתיקו אותה לתמונת LCP. שמירת הגאומטריה משפרת יציבות; החלטת הטעינה משפיעה על מועד זמינות המשאב.
תמונות עם חיתוך מותאם למסך יכולות להשתמש ביחסים שונים בנקודות שבירה שונות. ודאו שהמקום השמור תואם לקובץ שנבחר. יחס אופקי שנכפה על תמונה אנכית בטלפון עלול ליצור חיתוך או תיקון גודל מאוחר.
בדקו גם את המעטפת. כיתובים, גבולות ופקדים יכולים להוסיף גובה לאחר שהתמונה כבר יציבה. כל רכיב המדיה צריך להיות צפוי. המדריך לאופטימיזציית תמונות מחבר בין בחירת משאבים רספונסיבית להחלטות האלה.
לשמור מקום למודעות לפני השלמת המכרז
הקריאייטיב הסופי אינו תמיד ידוע בזמן חישוב הפריסה. הגדירו אילו מידות כל משבצת תומכת בהן בכל רוחב, ושמרו את המקום מראש. תאמו את הכלל עם הגדרות מערכת הפרסום במקום לנחש גובה ב-CSS.
המידות הבאות מדגימות את השיטה ואינן המלצה לרשת פרסום מסוימת.
.ad-slot {
min-height: 250px;
display: grid;
place-items: center;
}
@media (min-width: 64rem) {
.ad-slot {
min-height: 280px;
}
}גובה מינימלי מונע מתוכן לעלות כאשר המודעה קטנה או חסרה רק אם הרכיב שומר עליו. כיווץ אוטומטי של משבצת ריקה עלול ליצור בדיוק את התזוזה שניסיתם למנוע.
יש פשרה בין מקום שמור לשטח ריק. הכריעו בה בכוונה, בעיקר במסך הראשון. אפשר להגביל פורמטים, לבחור מיקום פחות מפריע או להשאיר מיכל ניטרלי. אל תרחיבו משבצת עליונה בלי לבדוק את התוכן שהיא דוחקת.
בדקו מצבי טעינה, מילוי, היעדר מודעה וכשל בסביבה מתאימה. הדמיה שמחזירה תמיד מודעה באותו גודל אינה מוכיחה יציבות בתנאי אמת.
לשמור על יציבות ההטמעה בזמן האתחול
נגני וידאו ופוסטים מוטמעים יכולים להחליף מיכל קטן ברכיב אינטראקטיבי גבוה יותר. הגדירו את הגאומטריה הצפויה לפני שהקוד החיצוני רץ ושמרו אותה גם בטעינה ובכשל.
המעטפת שומרת מקום לרכיב שיחס התצוגה המיועד שלו 16:9, בלי לחייב טעינה מיידית.
.video-frame {
position: relative;
aspect-ratio: 16 / 9;
background: #0c1222;
}
.video-frame > iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}לא לכל הטמעה יש יחס וידאו קבוע. פוסט חברתי או תרשים אינטראקטיבי יכולים לקבל גובה שתלוי בתוכן. השתמשו במנגנון הגודל הנתמך של הספק, בשטח התחלתי מציאותי ובמיקום שהתרחבותו אינה מפריעה לקורא.
תצוגה מקדימה קלה יכולה לדחות את טעינת הנגן עד לבקשת המשתמש. שמרו על המידות בזמן ההחלפה, אפשרו הפעלה במקלדת והציגו הודעת כשל מועילה אם התוכן אינו נטען.
המדריך לסקריפטים חיצוניים עוסק בעלות ההרצה שנותרת גם כשהגאומטריה יציבה. תיקון יציבות אינו מוכיח שגם התגובתיות נפתרה.
למנוע מבאנרים ומפאנלים מאוחרים לדחוף תוכן
רכיבי הסכמה, הודעות והמלצות מופיעים לעיתים לאחר שהפריסה כבר נקבעה. החליטו מראש היכן יהיו. מקום שמור או שכבת תצוגה מתוכננת יכולים למנוע הוספת בלוק מפתיע מעל המאמר.
לשכבה כזאת יש חובות שימושיות: לא להסתיר תוכן חיוני לצמיתות, לא ללכוד מיקוד בצורה שגויה ולא להפוך לבלתי ניתנת לסגירה בטקסט מוגדל. בדקו מסכים צרים וזום; גובה קבוע אינו מתאים אוטומטית לכל תרגום.
אזורי המלצות זקוקים למצבי טעינה צפויים. שלד קצר בהרבה מהתוצאה הסופית עדיין מאפשר קפיצה. התאימו את מבנה השורות והתמונות או מקמו את האזור המשתנה במקום שאינו מפריע למשימה הנוכחית.
אל תשתמשו במדידת JavaScript מאוחרת למידה שאפשר להגדיר ב-CSS ההתחלתי. היא יוצרת תחרות עם הפריסה הראשונה. התחילו בכלל יציב והוסיפו דינמיות כשהתוכן באמת דורש אותה.
להתאים בין גאומטריית הגופן החלופי לגופן הרשת
טקסט יכול לזוז כשהגופן שהורד מחליף גופן חלופי. רוחב אותיות, גובה מעל ומתחת לקו הבסיס וריווח שורות משנים את הפריסה. כותרת שנשברת לשורה נוספת דוחקת הרבה מעבר לטקסט שלה.
font-display: swap מאפשר להציג טקסט בזמן ההורדה, אבל אינו מבטיח יציבות. font-display: optional עשוי למנוע החלפה מאוחרת בתנאים מסוימים, במחיר של שימוש בגופן החלופי לאורך אותו ביקור.
בחרו חלופה מתאימה, ובמידת הצורך התאימו מידות באמצעות size-adjust, ascent-override, descent-override ו-line-gap-override. הערכים חייבים להתאים לזוג הגופנים. אחוזים שהועתקו מאתר אחר יכולים להחמיר את ההבדל.
בדקו את מערכות הכתב שבאמת מופיעות באתר. עברית, קוריאנית ולטינית עשויות להשתמש בקבצים ובחלופות שונים. כותרת אנגלית קצרה אינה בדיקה מספקת לכותרת מתורגמת ארוכה או לשילוב קיצורים לטיניים.
טענו מראש רק גופן שנדרש מוקדם ושאחרת יגיע מאוחר מדי. טעינה מוקדמת של כל המשקלים יכולה להתחרות בתמונות חשובות. בחנו בקשות ופריסה יחד כדי לא ליצור נסיגה בטעינה.
להנפיש בלי לחשב מחדש את הפריסה שוב ושוב
הנפשת רוחב, גובה, top או תכונות פריסה אחרות יכולה לחייב חישובים חוזרים ולהזיז תוכן סמוך. טרנספורמציות ואטימות מתאימות לעיתים יותר למעבר חזותי שאינו משנה את זרימת המסמך.
אין בכך הצדקה להנפשה מיותרת. תנועה יכולה להסיח גם כשאינה נספרת ב-CLS. כבדו העדפה להפחתת תנועה ושמרו על התאמה בין המיקוד, אזורי הלחיצה והמיקום הנראה.
באקורדיון, התחשבו בציפייה ובפקדים הסמוכים. שמרו על קשר ברור בין ההפעלה לתוכן שנפתח. הימנעו מהוספות לא קשורות שמגיעות באיחור ודוחפות את הדף.
להשתמש בשטח כדי למצוא מה שרענון מפספס
בדיקת טעינה עשויה להסתיים לפני רענון מודעה או הגעה להטמעה מאוחרת. אם CLS בשטח גרוע יותר, שחזרו מסלול ארוך לפני שמניחים שהדוח שגוי.
RUM יכול לקשר תזוזות לתבניות ולרכיבים. כיסוי API ונראות של iframes יכולים להיות שונים מ-CrUX, ולכן JavaScript במסמך הראשי לא בהכרח רואה הכול. תעדו את המגבלות במקום לאלץ את המאגרים להתאים.
בדקו גם חזרה עם כפתור אחורה. שחזור ממטמון קדימה ואחורה שונה מרענון רגיל. שמרו על האפשרות לשחזור ובמקביל תקנו את התזוזות בטעינה הראשונה.
תנו עדיפות לסיבות משותפות. תיקון מעטפת שמשמשת מאות דפים מועיל יותר משינוי ידני בכל מאמר. בדקו חריגים כגון תמונה חסרה, כיתוב ארוך וכשל טעינה.
לבדוק גאומטריה לצד הציון
לאחר התיקון חזרו לתרחיש המקורי ולאותו אירוע. ודאו שהתוכן נשאר במקום ושהשטח השמור אינו יוצר חיתוך, גלישה מעבר למיכל או גלילה מיותרת.
השוו רוחבים, אורכי טקסט ומצבי טעינה. בדקו מיקוד, זום ותרגומים. קופסה קבועה שמייצרת יציבות באמצעות חיתוך תוכן אינה תיקון תקין.
שמרו את המדידה ותנאיה לצד השינוי. אחרי הפרסום עקבו אחר נתוני שטח עם כניסת ביקורים חדשים לחלון. הקלטה מקומית יציבה אינה מבטיחה שינוי מיידי ב-Search Console.
להכניס תוכן מאוחר לבדיקת רכיבים קבועה
תעדו לכל רכיב כמה מקום נשמר, מה קורה כשאין תוכן והאם הגובה משתנה אחרי תחילת האינטראקציה. כך היציבות נעשית תכונת תכנון ולא משימת חירום חוזרת.
השתמשו בבודק Core Web Vitals לפירוש מדידות ובמדריכי Core Web Vitals להמשך. רכיב יציב מתנהג באופן צפוי במצב רגיל, מושהה וכושל, לא רק בצילום שבו הכול כבר נטען.
