פיתוח מדד CLS

תוכניות לשיפור מדד ה-CLS כדי שיהיה הוגן יותר לדפים לטווח ארוך.

Annie Sullivan
Annie Sullivan
Hongbo Song
Hongbo Song

תאריך פרסום: 7 באפריל 2021

לאחרונה פרסמנו (צוות מדדי המהירות של Chrome) את המחקר הראשוני שלנו בנושא אפשרויות לשיפור הצדק של מדד ה-CLS לגבי דפים שנשארים פתוחים במשך זמן רב. קיבלנו הרבה משוב שימושי מאוד, ולאחר השלמת הניתוח בקנה מידה רחב, סיימנו את השינוי שאנחנו מתכננים לבצע במדד: חלון סשן מקסימלי עם פער של שנייה אחת, עם מגבלה של 5 שניות.

בהמשך מוסבר איך עושים את זה.

איך הערכנו את האפשרויות?

בדקנו את כל המשוב שקיבלנו מקהילת המפתחים ולקחנו אותו בחשבון.

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

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

נקודות החלטה

למה חלון סשן?

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

דוגמה לבדיקה של חלונות סשנים:

דוגמה לחלון סשן.

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

על סמך המחקר הראשוני בחרנו פער של שנייה אחת בין חלונות של סשנים, והפער הזה עבד היטב בניתוח בקנה מידה גדול. לכן, ה-"Session Gap" שמופיע בדוגמה שלמעלה הוא שנייה אחת.

למה חלון הסשן המקסימלי?

במחקר הראשוני שלנו צמצמנו את אסטרטגיות הסיכום לשתי אפשרויות:

  • הציון הממוצע של כל חלונות הסשנים, בחלונות גדולים מאוד של סשנים (חלונות שלא הוקצו עם מרווחי זמן של 5 שניות ביניהם).
  • הציון המקסימלי של כל חלונות הסשנים, בחלונות קטנים יותר של סשנים (מוגבל ל-5 שניות, עם פער של שנייה אחת).

אחרי המחקר הראשוני, הוספנו כל מדד ל-Chrome כדי שנוכל לבצע ניתוח בקנה מידה רחב של מיליוני כתובות URL. בניתוח בקנה המידה הרחב, מצאנו הרבה כתובות URL עם דפוסים של שינויים בפריסה כמו זה:

דוגמה לשינוי קטן בפריסת המודעות שגורם לירידה בממוצע

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

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

למה 5 שניות?

בדקנו כמה גדלים של חלונות וגילינו שני דברים:

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

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

איך השינוי הזה ישפיע על ציון ה-CLS של הדף?

מאחר שהעדכון הזה מגביל את ערך ה-CLS של דף, לאף דף לא תהיה ציון נמוך יותר כתוצאה מהשינוי הזה.

על סמך הניתוח שלנו, ב-55% מהמקורות לא יהיה שינוי ב-CLS בכלל ב-75% העליונים. הסיבה לכך היא שבדפים שלהם אין כרגע שינויים בפריסה, או שהשינויים שכבר יש בהם מוגבלים לחלון סשן יחיד.

שאר מקורות הנתונים יראו שיפור בדירוג באחוזון ה-75 בעקבות השינוי הזה. רוב המשתמשים יראו רק שיפור קל, אבל כ-3% מהם הציונים שלהם ישתפרו מדירוג 'דרוש שיפור' או 'גרוע' לדירוג 'טוב'. בדפים האלה נעשה בדרך כלל שימוש בגלילה אינסופית או יש בהם הרבה עדכונים איטיים של ממשק המשתמש, כפי שמתואר בפוסט הקודם.

איך אפשר לנסות אותו?

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

תודה לכל מי שהקדיש זמן לקרוא את הפוסט הקודם ונותן משוב!