אפרוריות: שיפור של 70% ב-LCP הביא לירידה של 76% בנטישת עומסים

באמצעות שימוש בכלים אמיתיים למעקב אחרי משתמשים, והתמקדות בשיפור מדדי הליבה לבדיקת חוויית המשתמש באתר (Refactoring) של האפליקציה, הם גם שיפרו את ה-CLS ב-72% ואת הרספונסיביות של האפליקציות.

Kayce Basques

Agrofy היא זירת מסחר אינטרנטית שמיועדת לשוק החקלאי של אמריקה הלטינית. הם מחברים בין קונים ומוכרים של מכונות חקלאיות, קרקע, ציוד ושירותים פיננסיים. ברבעון השלישי של 2020, צוות פיתוח של 4 אנשים ב-Agrofy הקדיש חודש לביצוע אופטימיזציה של האתר, כי הם העלו ששיפור הביצועים יוביל לירידה בשיעורי העזיבה. הם התמקדו במיוחד בשיפור מדד LCP, אחד ממדדי הליבה לבדיקת חוויית המשתמש באתר. האופטימיזציות האלה של הביצועים הובילו לשיפור של 70% ב-LCP, שנמצא בהתאמה לירידה של 76% בנטישת העומס (מ-3.8% ל-0.9%).

70_%

LCP תחתון

76_%

נטישה של טעינה נמוכה יותר

בעיה

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

פתרון

צוות Agrofy הציג את המנהלים שלו והצטרף כדי:

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

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

• טעינה מדורגת של כל האלמנטים הלא גלויים באמצעות Intersection Exploreer API.
• העלאת משאבים סטטיים מהר יותר באמצעות רשת להעברת תוכן.
• טעינה מדורגת של תמונות עם loading="lazy".
• רינדור בצד השרת של נתיב העיבוד הקריטי.
• טעינה מראש וחיבור מראש של משאבים קריטיים כדי לצמצם את זמני לחיצת היד.
• שימוש בכלים אמיתיים למעקב אחר משתמשים (RUM) כדי לזהות באילו דפים של פרטי מוצרים חלו שינויים רבים בפריסה, ולאחר מכן לבצע התאמות בארכיטקטורה של ה-codebase.

תוכלו לקרוא פרטים טכניים נוספים בפוסט בבלוג של Agrofy Engineering.

אחרי שהפעיל את ה-codebase החדש ב-20% מהתנועה, החברה השיקה את האתר החדש לכל המבקרים בתחילת ספטמבר 2020.

תוצאות

האופטימיזציות של צוות הפיתוח הובילו לשיפורים ניתנים למדידה במדדים רבים ושונים:

• מדד ה-LCP השתפר ב-70%.
• מדד CLS השתפר ב-72%.
• חסימת בקשות JS פחתה ב-100% וחסימת בקשות CSS ב-80%.
• משימות ארוכות ירדו ב-72%.
• מצב 'לא פעיל של ה-CPU הראשון' השתפר ב-25%.

באותה מסגרת זמן, נתוני מעקב אמיתיים של משתמשים (שנקראים גם נתוני שטח) הראו ששיעור הנטישה של טעינה בדפי פרטי מוצרים ירד ב-76%, מ-3.8% ל-0.9%:

טעינת המגמה בשיעור הנטישה בדף פרטי המוצר.