תוכניות לשיפור מדד ה-CLS כך שיהיו הוגנים יותר לעומת דפים לטווח ארוך.
לאחרונה (צוות מדדי המהירות של Chrome) תיארנו את המחקר הראשוני שלנו לגבי אפשרויות ליצירת מדד CLS הוגנים יותר ביחס לדפים שפתוחים למשך זמן רב. קיבלנו הרבה משוב מאוד שימושי, ואחרי שסיימנו את הניתוח בקנה מידה גדול סיימנו את השינוי שאנחנו מתכננים לעשות במדד: חלון הפעלה מקסימלי עם פער של שנייה אחת, מכסה של 5 שניות.
כל הפרטים מופיעים בהמשך.
איך בדקנו את האפשרויות?
בדקנו את כל המשוב שקיבלנו מקהילת המפתחים וחשבנו עליו.
הטמענו גם את האפשרויות המובילות ב-Chrome וביצענו ניתוח נרחב של המדדים במיליוני דפי אינטרנט. בדקנו אילו סוגי אתרים השתפרו בכל אפשרות, והשוו בין האפשרויות, ובמיוחד בדקנו את האתרים שקיבלו דירוג שונה בהתאם לאפשרויות שונות. באופן כללי, גילינו את הדברים הבאים:
- כל האפשרויות הפחיתו את המתאם בין זמן הביקור בדף לבין הציון של שינוי הפריסה.
- אף אחת מהאפשרויות לא הביאה לניקוד נמוך יותר לדף כלשהו. לכן אין צורך לחשוש שהשינוי הזה יוריד את הציונים של האתר שלכם.
נקודות החלטה
למה חלון של סשן?
בפוסט הקודם דיברנו על כמה אסטרטגיות שונות של "חלון ראווה" לקיבוץ של שינויי פריסה, תוך הקפדה על כך שהציון לא יגדל ללא הגבלה. המשוב שקיבלנו ממפתחים העדיף מאוד את אסטרטגיית החלונות של הסשן, כי היא מקבצת את שינויי הפריסה בצורה הכי אינטואיטיבית.
כדי לבדוק חלונות של סשנים, אפשר לראות דוגמה:
בדוגמה שלמעלה, הרבה שינויי פריסה מתרחשים לאורך זמן כשהמשתמש צופה בדף. כל עמודה מיוצגת על ידי פס כחול. תוכלו לראות למעלה שלעמודות הכחולות יש גבהים שונים, שמייצגים את הציון של כל שינוי פריסה בנפרד. חלון סשן מתחיל בשינוי הראשון בפריסה וממשיך להתרחב עד שנוצר פער ללא שינויים בפריסה. כאשר שינוי הפריסה הבא מתרחש, מתחיל חלון הפעלה חדש. מכיוון שיש שלושה פערים ללא שינויי פריסה, בדוגמה יש שלושה חלונות של סשנים. בדומה להגדרה הנוכחית של CLS, הציונים של כל שינוי מצטברים, כך שהציון של כל חלון הוא סכום השינויים בפריסה הנפרדת שלו.
על סמך המחקר הראשוני בחרנו מרווח של שנייה אחת בין חלונות הסשנים, והפער הזה עבד היטב בניתוחים בקנה מידה גדול. כך ש'פער בין סשנים' שמוצג בדוגמה שלמעלה הוא שנייה אחת.
למה חלון הזמן המקסימלי של הסשנים?
במחקר הראשוני שלנו צמצמנו את אסטרטגיות הסיכום לשתי אפשרויות:
- הציון הממוצע של כל חלונות ההפעלה, לחלונות הפעלה גדולים מאוד (חלונות לא מוגבלים עם פערים של 5 שניות ביניהם).
- הציון המקסימלי של כל חלונות הסשנים, לחלונות סשנים קטנים יותר (מוגבל ל-5 שניות, עם מרווח של שנייה אחת ביניהם).
אחרי המחקר הראשוני, הוספנו כל מדד ל-Chrome כדי שנוכל לבצע ניתוח בקנה מידה גדול על מיליוני כתובות URL. בניתוח בקנה מידה גדול, מצאנו הרבה כתובות URL עם דפוסי שינוי פריסה כמו אלה:
בפינה השמאלית התחתונה, ניתן לראות שיש רק שינוי פריסה אחד קטנטן בחלון הסשן 2, מה שנותן לו ניקוד נמוך מאוד. המשמעות היא שהציון הממוצע הוא די נמוך. אבל מה אם המפתח יתקן את השינוי הזעיר בפריסה? לאחר מכן הציון מחושב רק ב-Session window 1, כלומר ציון הדף כמעט כפול. זה באמת היה מבלבל ולא מעודד את המפתחים לשפר את השינויים בפריסה שלהם רק כדי לגלות שהציון מחמיר. כמובן, הסרת השינוי הקטן הזה בפריסה משפרת את חוויית המשתמש, ולכן היא לא אמורה לפגוע בציון.
בגלל הבעיה של הממוצעים, החלטנו להתקדם עם החלונות המקסימליים שמוגבלים לקטנים יותר. כך שבדוגמה שלמעלה, המערכת תתעלם מחלון 2 של סשן, ויוצג רק הסכום של שינויי הפריסה בחלון הסשן 1.
למה 5 שניות?
בדקנו כמה גדלים של חלונות ומצאנו שני דברים:
- בחלונות קצרים, טעינה איטית יותר של דפים ותגובות איטיות יותר לאינטראקציות של משתמשים עלולות לגרום לתנודות בפריסה לחלונות מרובים ולשפר את הציון. רצינו שהחלון יהיה גדול מספיק כדי שלא יתגמל האטות!
- בחלק מהדפים יש רצף של שינויים קלים בפריסה. לדוגמה, דף תוצאות של משחקי ספורט שמשתנה מעט עם כל עדכון תוצאה. השינויים האלה מעצבנים, אבל הם לא מעצבנים יותר עם הזמן. לכן רצינו לוודא שהחלון מוגבל לסוגים אלה של שינויי פריסה.
מתוך מחשבה על שני הדברים האלה, כשמשווים כמה גדלים של חלונות בדפי אינטרנט רבים מהעולם האמיתי, הגענו למסקנה ש-5 שניות הן מגבלה טובה לגודל החלון.
איך זה ישפיע על ציון ה-CLS של הדף שלי?
מכיוון שהעדכון הזה מגביל את ה-CLS של דף מסוים, אף דף לא יקבל ציון נמוך יותר כתוצאה מהשינוי הזה.
על סמך הניתוח שלנו, ב-55% מהמקורות לא יהיה שינוי ב-CLS בכלל באחוזון ה-75. הסיבה לכך היא שבדפים שלהם אין כרגע שינויי פריסה, או שהשינויים שחלים בהם כבר מוגבלים לחלון של הפעלה יחידה.
עם השינוי הזה, שאר המקורות יראו ציונים משופרים באחוזון ה-75. על רובם יהיה שיפור קל בלבד, אבל כ-3% יבחינו בשיפור בציונים שלהם מדירוג 'דרוש שיפור' או 'חלש' ל'דירוג 'טוב'. בדפים האלה יש בדרך כלל גלילה מתמשכת או שיש הרבה עדכונים איטיים בממשק המשתמש, כפי שמתואר בפוסט הקודם שלנו.
איך אוכל לנסות אותה?
בקרוב נעדכן את הכלים שלנו לשימוש בהגדרת המדד החדש. עד אז, אתם יכולים לנסות את הגרסה המעודכנת של CLS בכל אתר באמצעות דוגמאות של הטמעות JavaScript או המזלג של התוסף Web Vitals.
תודה לכל מי שהקדיש זמן לקרוא את הפוסט הקודם ולתת את המשוב שלהם!