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

אתם מוזמנים לקבל מידע על התוכניות שלנו לשיפור המדד Cumulative Layout Shift (CLS) ולתת לנו משוב.

אנני סאליבן

מיכל מקני

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

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

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

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

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

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

איך נחליט אם מדד חדש הוא טוב יותר?

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

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

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

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

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

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

אסטרטגיות של הצגה (windowing)

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

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

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

חלונות מסתובבים

דוגמה לחלון שקוע.

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

חלונות זזים

דוגמה לחלון הזזה.

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

חלונות של סשנים

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

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

גודלי חלונות

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

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

סיכום

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

אחוזונים

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

ממוצעת

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

תקציבים

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

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

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

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

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

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

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

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

השיטות הטובות ביותר

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

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

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

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

כל אלה מדורגים היטב גם באחוזון ה-95 וגם באחוזון המקסימלי.

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

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

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

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

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

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

אסטרטגיות שלא הניבו תוצאות טובות

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

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

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

השלבים הבאים

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

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

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

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

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

מה לא משתנה

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

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

חוסר התאמה בין מדדים

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

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

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

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

אפשר לשלוח משוב באימייל לקבוצת web-vitals-feedback, ולציין בשורת הנושא '[Layout Shift Metrics]'. נשמח מאוד לשמוע מה דעתך.