בעזרת כלים למעקב אחר משתמשים אמיתיים והתמקדות בשיפור המדדים הבסיסיים של חוויית המשתמש (Core Web Vitals) במהלך עיבוד מחדש של האפליקציה, הם הצליחו לשפר גם את CLS ב-72% ואת הרספונסיביות של האפליקציה.
Agrofy היא זירת מסחר אונליין בתחום החקלאות באמריקה הלטינית. הן מתאימות בין קונים למוכרים של מכונות חקלאיות, קרקעות, ציוד ושירותים פיננסיים. ברבעון השלישי של 2020, צוות הפיתוח של Agrofy, שמונה 4 אנשים, הקדיש חודש לאופטימיזציה של האתר כי הם שיערו ששיפור הביצועים יוביל לירידה בשיעורי העזיבה. הם התמקדו במיוחד בשיפור המדד LCP, שהוא אחד ממדדי הליבה לבדיקת חוויית המשתמש באתר. אופטימיזציות הביצועים האלה הובילו לשיפור של 70% ב-LCP, שתואם לירידה של 76% בנטישה של משתמשים במהלך הטעינה (מ-3.8% ל-0.9%).
70%
זמן טעינה ראשוני (LCP) קצר יותר
76%
ירידה בשיעור הנטישה של טעינה
בעיה
כשצוות הפיתוח של Agrofy בחן את מדדי העסק, הוא הבחין ששיעורי העזיבה שלהם גבוהים יותר מהמדדים המובילים בתחום. גם החוב הטכני בקוד הבסיס של האתר הלך וגדל.
פתרון
צוות Agrofy הציג את הרעיון למנהלים הבכירים וקיבל אישור ל:
- העברה ממסגרת ישנה שהוצאה משימוש למסגרת חדשה שנתמכת באופן פעיל.
- מבצעים אופטימיזציה של ביצועי הטעינה של קוד הבסיס החדש.
ההעברה נמשכה חודשיים. בנוסף לצוות הפיתוח בן 4 האנשים שצוין קודם, ההעברה הזו כללה גם מומחי מוצר וחוויית משתמש ואדריכל תוכנה. פרויקט האופטימיזציה נמשך חודש אחד בצוות הפיתוח בן 4 האנשים. הם התמקדו במדדים LCP, CLS (מדד נוסף של Core Web Vitals) ו-FCP. האופטימיזציות הספציפיות כללו:
- טעינה הדרגתית של כל הרכיבים שאינם גלויים באמצעות Intersection Observer API.
- העברת משאבים סטטיים מהר יותר באמצעות רשת להעברת תוכן.
- טעינה מדורגת של תמונות באמצעות
loading="lazy". - עיבוד בצד השרת של תוכן בנתיב העיבוד הקריטי.
- טעינה מראש והתחברות מראש של משאבים קריטיים כדי לצמצם את זמני לחיצת היד.
- שימוש בכלים למעקב אחר משתמשים אמיתיים (RUM) כדי לזהות אילו דפי פרטי מוצרים חוו הרבה שינויים בפריסה, ולאחר מכן לבצע התאמות בארכיטקטורה של קוד הבסיס.
פרטים טכניים נוספים זמינים בפוסט הזה בבלוג של Agrofy.
אחרי שהפעילו את קוד המקור החדש ב-20% מתנועת הגולשים, הם השיקו את האתר החדש לכל המבקרים בתחילת ספטמבר 2020.
תוצאות
האופטימיזציות של צוות הפיתוח הובילו לשיפורים נמדדים בהרבה מדדים שונים:
- זמן ה-LCP השתפר ב-70%.
- ה-CLS השתפר ב-72%.
- חסימת בקשות JS הפחיתה את מספר הבקשות ב-100% וחסימת בקשות CSS הפחיתה את מספר הבקשות ב-80%.
- משימות ארוכות ירדו ב-72%.
- מצב ראשון של חוסר פעילות ב-CPU השתפר ב-25%.
באותו מסגרת זמן, נתוני המעקב אחר משתמשים אמיתיים (שנקראים גם נתוני שטח) הראו ששיעור הנטישה במהלך טעינת דפי פרטי המוצר ירד ב-76%, מ-3.8% ל-0.9%:
