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

נשמח לקבל מידע על התוכניות שלנו לשיפור המדד Cumulative Layout Shift (שינוי פריסה דינמית) ולשלוח לנו משוב.

Cumulative Layout Shift (CLS) הוא מדד שמודד את היציבות החזותית של דף אינטרנט. המדד נקרא 'שינוי פריסה מצטבר' כי הציון של כל שינוי פריסה ספציפי מצטבר במהלך משך החיים של הדף.

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

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

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

• גלילה אינסופית עם שינוי תוכן כשהמשתמש גולל.
• לטפלנים של קלט שנדרשות להם יותר מ-500 אלפיות השנייה כדי לעדכן את ממשק המשתמש בתגובה לאינטראקציה של משתמש, ללא כל סוג של placeholder או תבנית של שלד.

אנחנו מעודדים מפתחים לשפר את חוויות המשתמש האלה, אבל אנחנו פועלים גם כדי לשפר את המדד ומחפשים משוב לגבי גישות אפשריות.

איך נקבע אם מדד חדש טוב יותר?

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

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

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

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

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

אילו רעיונות למדדים בדקנו?

שיטות עיבוד החלק הנצפה בלבד

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

• חלונות מתגלגלים
• חלונות הזזה
• חלונות סשנים

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

חלונות מתגלגלים

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

חלונות הזזה

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

חלונות סשנים

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

גדלי חלונות

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

• כל משמרת כחלון נפרד (ללא חלונות)
• 100 אלפיות השנייה
• 300 אלפיות השנייה
• שנייה אחת
• ‫5 שניות

סיכום

ניסינו דרכים רבות לסכם את החלונות השונים.

מאונים

בדקנו את הערך המקסימלי בחלון, וגם את המאון ה-95, המאון ה-75 והחציון.

ממוצעת

בדקנו את ערך החלון הממוצע.

תקציבים

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

אסטרטגיות אחרות

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

התוצאות הראשוניות

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

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

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

כמה אסטרטגיות שונות בלטו בדירוגים.

האסטרטגיות הטובות ביותר

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

אחוזונים גבוהים של חלונות ארוכים

כמה אסטרטגיות של חלונות זמן עבדו טוב עם גדלים ארוכים של חלונות זמן:

• חלונות הזזה של שנייה אחת
• חלונות של סשנים מוגבלים ל-5 שניות עם פער של שנייה אחת
• חלונות סשנים ללא מגבלה עם מרווח של שנייה אחת

כל המודעות האלה דורגות טוב מאוד גם ב-95% העליונים וגם בערך המקסימלי.

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

ממוצע של חלונות סשנים עם פערים ארוכים

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

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

אחוזונים גבוהים של חלונות קצרים

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

אסטרטגיות שלא עבדו

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

בדקנו כמה 'תקציבים' שונים לשינויים מקובלים בפריסה:

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

השלבים הבאים

ניתוח בקנה מידה גדול יותר

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

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

משוב על הגישה שלנו

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

מה לא משתנה

חשוב לנו להבהיר שהרבה דברים לא ישתנו בגישה חדשה:

• אף אחת מההצעות שלנו למדדים לא משנה את האופן שבו חושבים את הציונים של שינויי הפריסה בפריימים ספציפיים, אלא רק את האופן שבו אנחנו מסכם כמה פריימים. המשמעות היא שJavaScript API לשינויי פריסה לא ישתנה, וגם האירועים הבסיסיים ב-Chrome Traces שבהם נעשה שימוש בכלי הפיתוח לא ישתנו. לכן, ריבועים של שינויי פריסה בכלים כמו WebPageTest ו-Chrome DevTools ימשיכו לפעול באותו אופן.
• אנחנו נמשיך להשקיע מאמצים רבים כדי להקל על המפתחים להטמיע את המדדים, כולל מדדים בספריית Web-vitals, תיעוד ב-web.dev ודיווח עליהם באמצעות הכלים שלנו למפתחים כמו Lighthouse.

היחס בין המדדים

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

האם קל לך יותר להבין חלונות הזזה או חלונות של פעילות? האם ההבדלים האלה חשובים לכם?

כיצד לשלוח משוב

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

אפשר לשלוח משוב באימייל לקבוצת Google‏ web-vitals-feedback, עם הכיתוב '[מדדי שינויי פריסה]' בשורת הנושא. נשמח לשמוע מה דעתך.