פיתוח מדד CLS

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

Annie Sullivan
Annie Sullivan
Hongbo Song
Hongbo Song

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

כל הפרטים מופיעים בהמשך.

איך בדקנו את האפשרויות?

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

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

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

נקודות החלטה

למה כדאי להשתמש בחלון סשן?

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

כדי לעיין בחלונות של סשנים:

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

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

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

למה כדאי להגדיר את חלון הסשנים המקסימלי?

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

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

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

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

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

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

למה כדאי להשתמש ב-5 שניות?

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

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

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

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

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

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

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

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

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

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