נשמח לקבל מידע על התוכניות שלנו לשיפור המדד Cumulative Layout Shift (שינוי פריסה דינמית) ולשלוח לנו משוב.
Cumulative Layout Shift (CLS) הוא מדד שמודד את היציבות החזותית של דף אינטרנט. המדד נקרא 'שינוי פריסה מצטבר' מפני שהציון של כל שינוי בנפרד מסוכם לאורך כל משך החיים של הדף.
כל שינויי הפריסה משפיעים על חוויית המשתמש גרועה, אבל יש להם יותר תכנים בדפים שפתוחים יותר זמן. לכן, צוות מדדי המהירות של Chrome החליט לשפר את מדד CLS כך שיהיה ניטרלי יותר מבחינת זמן השהייה בדף.
חשוב שהמדד יתמקד בחוויית המשתמש לאורך כל משך החיים של הדף. הסיבה לכך היא שגילינו שלעיתים קרובות, משתמשים חווים חוויות שליליות לאחר הטעינה, במהלך גלילה או ניווט בדפים. עם זאת, שמענו על האופן שבו הדבר משפיע על דפים לטווח ארוך – דפים שהמשתמש בדרך כלל פתוח במשך זמן רב. יש כמה סוגים שונים של דפים שנשארים פתוחים למשך זמן רב יותר. חלק מהנפוצים ביותר הם אפליקציות של רשתות חברתיות עם גלילה מתמשכת ואפליקציות בדף יחיד.
ניתוח פנימי של דפים לטווח ארוך עם ציוני CLS גבוהים מצא שרוב הבעיות נגרמו על ידי הדפוסים הבאים:
- כמות בלתי מוגבלת של גלילה שמזיזה את התוכן בזמן שהמשתמש גולל.
- רכיבי handler של קלט שנמשכים יותר מ-500 אלפיות השנייה עד לעדכון ממשק המשתמש בתגובה לאינטראקציה של משתמש, בלי שום placeholder או דפוס שלד.
אנחנו מעודדים מפתחים לשפר את חוויות המשתמש האלה, אבל אנחנו פועלים גם כדי לשפר את המדד ומחפשים משוב לגבי גישות אפשריות.
איך נקבע אם מדד חדש טוב יותר?
לפני שנמשיך בעיצוב המדדים, רצינו לוודא שאנחנו בוחנים את הרעיונות שלנו במגוון רחב של דפי אינטרנט ותרחישים לדוגמה מהעולם האמיתי. בתור התחלה, עיצבנו מחקר משתמשים קטן.
קודם כול, תיעדנו סרטונים ומעקבי Chrome של 34 התהליכים שעוברים המשתמשים באתרים שונים. בבחירת התהליכים שעוברים המשתמשים, התמקדנו בכמה דברים:
- מגוון סוגים שונים של אתרים, כמו אתרי חדשות ואתרי קניות.
- מגוון של התהליכים שעוברים המשתמשים, כמו טעינת דף ראשונית, גלילה, ניווטים באפליקציה בדף יחיד ואינטראקציות של משתמשים.
- מגוון של שינויי פריסה ספציפיים באתר וגם של עוצמתם.
- מעט חוויות שליליות באתרים כתוצאה משינויים בפריסה.
ביקשנו מ-41 מהעמיתים שלנו לצפות בשני סרטונים בו-זמנית, והם דירגו איזה מהם היה טוב יותר מבחינת שינוי הפריסה. על סמך הדירוגים האלה יצרנו סדר דירוג אידיאלי של האתרים. התוצאות של דירוג המשתמשים אישרו את החשד שלנו שהעמיתים שלנו, כמו רוב המשתמשים, מתוסכלים מאוד משינויים בפריסה לאחר הטעינה, במיוחד במהלך גלילה וניווט בדף יחיד באפליקציה. ראינו שחוויות משתמש של אתרים מסוימים במהלך הפעילויות האלה הרבה יותר טובות מאשר אתרים אחרים.
מאחר שתיעדנו את המעקב אחר הסרטונים ב-Chrome, היו לנו כל הפרטים לגבי שינויי הפריסה הנפרדים בכל פעם שעובר המשתמש. השתמשנו בהם כדי לחשב ערכים של מדדים לכל רעיון לכל תהליכים שעוברים המשתמשים. כך יכולנו לראות איך כל וריאנט של המדד דרג את התהליכים שעוברים המשתמשים, ובאיזו מידה כל אחד מהם שונה מהדירוג האידיאלי.
אילו רעיונות למדדים בדקנו?
שיטות עיבוד החלק הנצפה בלבד
לעיתים קרובות, בדפים יש שינויי פריסה רבים שמקובצים יחד, מפני שרכיבים יכולים להשתנות מספר פעמים כאשר תוכן חדש מתחלק לחלקים. לכן נאלצנו לנסות שיטות לקיבוץ משינויים יחד. לשם כך, נעזרנו בשלוש גישות ליצירת חלונות:
- חלונות מתקפלים
- חלונות זזים
- חלונות של סשנים
בכל אחת מהדוגמאות האלה, לאורך זמן מופיעות בדף שינויים בפריסה בדרגת חומרה שונה. כל עמודה כחולה מייצגת שינוי פריסה אחד, והאורך מייצג את הציון של השינוי הזה. התמונות ממחישות את הדרכים שבהן אסטרטגיות שונות של עיבוד חלונות מקבצים את שינויי הפריסה לאורך זמן.
חלונות מתקפלים
הגישה הפשוטה ביותר היא פשוט לחלק את הדף לחלונות של מקטעי נתונים בגודל שווה. אלה נקראים חלונות שידוכים. תוכלו לראות שלמעלה שהעמודה הרביעית נראית כאילו היא צריכה להיות מקובצים בחלון השני. אבל מכיוון שכל החלונות הם בגודל קבוע, היא נמצאת בחלון הראשון במקום זאת. אם יש הבדלים קלים בתזמון של הטעינות או האינטראקציות של המשתמשים בדף, אותם שינויי פריסה עשויים להיות שייכים לצדדים שונים של גבולות החלון המנוצל.
חלונות זזים
גישה שמאפשרת לנו לראות יותר קבוצות אפשריות באותו אורך היא לעדכן באופן קבוע את החלון הפוטנציאלי לאורך זמן. בתמונה שלמעלה מוצג חלון הזזה אחד בכל פעם, אבל אנחנו יכולים לבחון את כל חלונות הזזה האפשריים או קבוצת משנה שלהם כדי ליצור מדד.
חלונות של סשנים
אם נרצה להתמקד בזיהוי אזורים בדף עם רצפים של שינויי פריסה, נוכל להתחיל כל חלון בתנועה ולהמשיך להגדיל אותו עד שנתקל בפער בגודל נתון בין שינויי הפריסה. הגישה הזו מקבצת יחד את שינויי הפריסה ומתעלמת מרוב חוויית המשתמש שלא משתנה. אחת הבעיות האפשריות היא שאם אין פערים בשינויים בפריסה, מדד שמבוסס על חלונות של סשנים עשוי לגדול ללא הגבלה, בדיוק כמו מדד 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 ימשיכו לפעול באותו אופן.
- אנחנו נמשיך להשקיע מאמצים רבים כדי להקל על המפתחים להטמיע את המדדים, כולל מדדים בספריית web-vitals, תיעוד ב-web.dev ודיווח עליהם באמצעות הכלים שלנו למפתחים כמו Lighthouse.
השוואה בין המדדים
אחת מהאסטרטגיות המובילות מסכמת את חלונות שינוי הפריסה כממוצע, והשאר מדווחות על החלון המקסימלי. אם מדובר בדפים פתוחים במשך זמן רב מאוד, סביר להניח שהממוצע ידווח על ערך מייצג יותר, אבל באופן כללי, סביר להניח שלמפתחים יהיה קל יותר לבצע פעולה בחלון אחד — הם יוכלו לתעד את מועד ההתרחשות, את הרכיבים שזזים וכן הלאה. נשמח לקבל משוב לגבי הנושאים שחשובים יותר למפתחים.
האם קל לך יותר להבין חלונות הזזה או חלונות של פעילות? ההבדלים חשובים לך?
כיצד לשלוח משוב
אפשר לנסות את המדדים החדשים של שינוי הפריסה בכל אתר באמצעות הטמעות לדוגמה של JavaScript או התוסף בנושא Core Web Vitals.
אפשר לשלוח משוב באימייל לקבוצה שלנו ב-Google web-vitals-feedback, ולציין בה את הטקסט "[Layout Shift Metrics]" בשורת הנושא. נשמח מאוד לשמוע מה דעתך.