תוכן עניינים
מהו COMULATIVE LAYOUT SHIFT (CLS) ?
CLS או Cumulative Layout Shifting הוא מרכיב חשוב ב-Core Web Vitals (קבוצת מדדי חוויית משתמש של גוגל), ה-CLS נקבע על ידי בדיקת שינוים לא צפוים בפריסת הדף, שיפור ה-CLS ישפר את חוויית המשתמש בדפי האינטרנט אותם אנו מגישים לגולשים וכתוצאה מכך יעזור לנו גם בקידום האורגני.
חשוב לזכור שמדידת ה-CLS נמשכת מהרגע שהדף נטען ועד שהדף נסגר.
להלן דוגמה של גוגל לבעיה הנוצרת בעקבות CLS:
בגלל ש-CLS נמדד בצורה מתמשכת לאורך כל חיי הדף, חשוב לדעת שכלים כמו LightHouse מבצעים מדידה רק עד לטעינתו המלאה של הדף. בנוסף הכלי לא מסוגל לבדוק אינטרקציה של תנועת עכבר על גבי הדף. על מנת לבדוק CLS גם לאחר טעינת הדף המלאה יש צורך בכלים אחרים שעליהם אפרט בהמשך.
מה יכול לגרום לבעיות CLS ?
- תמונות
- פרסומות
- IFRAMES
- הטמעות חיצוניות
- תוכן דינמי שמוזרק אל הדף
- פונט WEB
- אנימציות שלא בנויות נכון
כלים לבדיקת CLS
ישנם כלים פשוטים ומהירים למדידת CLS כמו LightHouse או PageSpeed Insight, כל כך פשוטים שאפילו לא ממש צריכים להבין מה החישוב שמתבצע ברקע.
למרות הנוחות של כלים אלה תמיד טוב לדעת מה קורה מאחורי הקלעים, כדי שנוכל להסביר לאנשי הצוות שלנו מה אנחנו מנסים לפתור ולמה בחרנו בדרך זו או אחרת.
איך מחושב CLS ?
(השטח שבו מתבצעת תזוזה \ גודל המסך) * (מרחק התזוזה \ גודל המסך) = ניקוד תזוזות בפריסה
יוצאי דופן שחשוב לשים לב אליהם:
תזוזות שהגולש מצפה להן לא נכללות בחישוב ה-CLS, למשל אם הגולש הקליק על תפריט נפתח, הגיוני שתהיה תזוזה ושהגולש מצפה לתזוזה זו, לכן תזוזה מסוג זה יוצאת מההגדרה של CLS שפוגע בחוויית המשתמש. ההגדרה הטכנית של תזוזה שהגולש מצפה לה היא כל תזוזה שמתרחשת בתוך 500ms מרגע שיש פעולה מצד הלקוח, לדוגמה קליק או כתיבה.
גלילת הדף או תזוזת העכבר לא נחשבים לפעולה מצד הגולש.
לייטהאוס (LightHouse) - מתוך הדפדפן או תוסף לכרום
הכלי הראשון הוא LightHouse שמגיע מגוגל ואפשר להשתמש בו בשתי צורות: תוסף לדפדפן או דרך Chrome DevTools, הדרך המומלצת היא בעזרת Chrome DevTools כי היא מאפשרת בדיקות גם של דפים מקומיים (סביבות עבודה) או דפים הדורשים אימות, גירסת התוסף לכרום לא מאפשרת בדיקה של דפים אלה.
תוסף לכרום להורדה:
https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk
שימוש ב-LightHouse דרך Chrome DevTools:
איך לקרוא את מדדי ה-CLS ב-LightHouse
- ניקוד מתחת ל-0.1 נחשב לטוב
- ניקוד בין 0.1 ל-0.25 נחשב לבינוני
- ניקוד מעל ל-0.25 נחשב לרע
בנוסף לניקוד הכללי ל-CLS תוכלו למצוא ב-LightHouse גם הנחיות ספציפיות לקוד שבו מתרחשת הבעיה:
LightHouse – Images don't have explicit width & height
הנחיות לתמונות שחסרים להן פרטי אורך ורוחב נמצאות מתחת לכותרת Diagnostics של בדיקת הביצועים.
LightHouse – Avoid Large Layout Shifts
הנחיות לאלמנטים שתורמים ל-CLS נמצאים מתחת לכותרת Diagnostics של בדיקת הביצועים.
PageSpeed Insights
כלי מקביל ל-Lighthouse הוא PageSpeed Insights – כלי נוסף של גוגל, והוא בודק את ביצועי הדף בצורה הבאה: מכניסים את הכתובת שאותה רוצים לבדוק ואחרי זמן קצר מקבלים תוצאות.
הכלי נמצא בכתובת הבאה:
מה ההבדל בין PageSpeed Insights ל-LightHouse ?
PageSpeed Insights
- נתונים מהשטח (של משתמשים) + נתוני מעבדה (דרך בדיקה טכנית)
- בדיקת ביצועים בלבד
- אפשר לשתף בעזרת שיתוף הלינק
- מאפשר לגלות בעיות שקורות בשטח שבדיקות טכניות בלבד לא יכולות לראות, בגלל שמדובר בנתונים של גולשים אמיתיים
LightHouse
- נתוני מעבדה בלבד
- בדיקת ביצועים, SEO, PWA, נגישות, BEST PRACTICES
- אפשר לשתף על ידי הורדת קובץ ושיתופו
- ניתן לשמור את הקובץ כ-JSON
קונסולת החיפוש של גוגל - דו"ח חוויית הגלישה
בקונסולת החיפוש של גוגל יש דו"ח שמוקדש כולו למדדי Core Web Vitals. שימו לב שאלה נתוני גולשים מהשטח, ולפעמים יופיעו שם בעיות שלא יופיעו ב-LightHouse.
הדו"ח מופרד למובייל ולדסקטופ, נכנסים לאחד מהם ואם קיימת בעיית CLS, היא תיראה כך:
כלי הפיתוח של כרום – Layout Shift Regions
שני יתרונות לבדיקה זו:
- היא מראה בעיות CLS בצורה ויזואלית בזמן אמת.
- היא בודקת את בעיית ה-CLS בצורה מתמשכת, כלומר מרגע עליית הדף ועד לסגירתו.
- בלשונית Network בחרו ברשת Slow 3G או Fast 3G והפעילו את Disable Cache
- בתפריט 3 נקודות בחרו ב-More Tools ולאחר מכן ב-Rendering
- בתפריט שנפתח בתחתית בחרו ב-Layout Shift Regions
- טענו מחדש את הדף
בערוץ EXPERIENCE שבלשונית הביצועים של כרום
כאן אפשר לראות בצורה מדוייקת מתי מתרחשת תופעת ה-CLS בזמן טעינת הדף.
בלחיצה על תווית ה-Layout Shift תיפתח לשונית הסיכום ושם יופיעו פרטים יסודיים יותר.
בדרך זו רואים את כל התזוזות בפריסה, כלומר גם תזוזות שנחשבות לתקינות וגם תזוזות שמצריכות תיקון, לכן יש לבדוק את הנתונים בתשומת לב רבה ולא לבזבז את הזמן על תיקונים שלא יועילו, זיכרו תזוזות עם ניקוד מעל 0.1 מצריכות תיקון.
כך נראית לשונית הסיכום:
הפעלת צילומי מסך בתווית הביצועים בכרום ובדיקת תזוזה בתוך הפריימים
תרצו לראות את השינוי ויזואלית בצורה גמישה על ציר הזמן מבלי לטעון את הדף מחדש כל פעם?
הפעלת צילומי מסך בתוך לשונית הביצועים תעשה את זה בשבילכם, פשוט מזיזים את סמן העכבר על ציר הזמן של צילומי המסך ורואים את השינוים, להפעלת פונקציה זו במקרה והיא לא פעילה אצלכם בכרום, מצורף וידאו קצר.
תוסף כרום Web Vitals
תוסף נוח לכרום שמאפשר בדיקת מדדי חוויית הגלישה, לפי התיאור, התוסף מספק נתונים תואמים לכלי המדידות הבאים:
Chrome User Experience Report
Page Speed Insights
Search Console
https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma
אתרי עזר למדידת בעיות CLS
למה שנצטרך אתרים חיצוניים למדידת ה-CLS?
כי לפעמים משהו במדידה אצלנו לא מתבצע כמו שצריך, זה יכול להיות אנטיוירוס או פיירוול או תוספים של כרום שמשפיעים בצורה כזו או אחרת על המדידות ואנחנו מקבלים תוצאות לא מדוייקות, במקרים כאלה שימוש בכלי חיצוני שנמצא על שרתים חיצוניים יכול לתת חיווי קרוב יותר למציאות.
פתרונות לבעיות CLS
- HTML Width & Height Attribute
- CSS Aspect Ratio
- עדיף למקם פרסומות למטה מאשר בראש הדף – מיקום פרסומות בראש הדף יגרום ל-CLS בעייתי יותר היות ויש מתחת לפרסומת יותר אלמנטים שידחפו מטה
- אפשר להשתמש ב-PlaceHolder או FallBack או Skeleton UI על מנת לצמצם CLS עד שנטען התוכן האמיתי של אותו איזור
- לטפל בבעיות פונטים בעזרת ו-font-display: optional
- תוכלו להשתמש גם ב-CSS Layout Grid
https://www.w3schools.com/css/css_grid.asp
האלמנט החוזר בכל אחת מהדרכים שאותן מציעים בגוגל הוא שמירה על המקום המיועד לתוכן שגורם לשינוים בפריסה כדי למנוע את התזוזה ובכך לספק חוויה יציבה ועקבית לגולש.
לעוד רעיונות לשיפור בעיות ה-CLS אתם מוזמנים להציץ בדף ההמלצות של גוגל:
https://web.dev/optimize-cls/
איך מטפלים בבעיות CLS שנגרמות כתוצאה מאנימציות
אנימציות מעלות שאלה חדשה בנושא ה-CLS, הרי שכל אנימציה מביאה איתה תנועה, לפעמים אפילו בלתי פוסקת, האם יש דרך למנוע מתנועה זו להיכלל בחישובי ה-CLS?
לשם כך מציעים בגוגל 2 פתרונות:
- שימוש ב- () transform: scale במקום פקודות height ו-width
- ושימוש ב-() transform: translate במקום פקודות top, right, bottom, left