ومن خلال استخدام أدوات مراقبة أداء المستخدمين والتركيز على تحسين "مؤشرات أداء الويب الأساسية" في إعادة بناء تطبيقاتهم، حسّنت أيضًا متغيّرات التصميم التراكمية (CLS) بنسبة %72، بالإضافة إلى سرعة استجابة التطبيق.
Agrofy هي سوق على الإنترنت لسوق الأعمال الزراعية في أمريكا اللاتينية. حيث يتطابقون مع مشتري وبائعي الآلات الزراعية، والأراضي، والمعدات، والخدمات المالية. في الربع الثالث من عام 2020، قضى فريق تطوير مؤلّف من 4 أشخاص في Agrofy شهرًا في تحسين موقعهم الإلكتروني لأنه افترض أن تحسين الأداء سيؤدي إلى تقليل معدلات الارتداد. ركّزت جهودهم بشكل خاص على تحسين LCP الذي يشكّل أحد مؤشرات أداء الويب الأساسية. أدّت هذه التحسينات في الأداء إلى تحسُّن بنسبة 70% في سرعة LCP، ما يرتبط بانخفاض بنسبة 76% في معدل المغادرة أثناء تحميل الصفحة (من 3.8% إلى 0.9%).
%70
انخفاض سرعة عرض أكبر جزء من المحتوى على الصفحة
%76
معدّل التراجع عن التحميل أقل
المشكلة
أثناء دراسة مقاييس أعمالهم، لاحظ فريق التطوير في Agrofy أن معدلات الارتداد بدت أعلى من المعايير المتبعة في المجال. كانت الديون الفنية تزيد أيضًا في قاعدة التعليمات البرمجية للموقع الإلكتروني.
الحلّ
قدم فريق Agrofy عرضًا للمديرين التنفيذيين وحصل على دعم لـ:
- يمكنك الانتقال من إطار عمل قديم تم إيقافه إلى إطار جديد متوافق وفعّال.
- حسِّن أداء تحميل قاعدة الرموز الجديدة.
استغرقت عملية النقل شهرين. بخلاف فريق التطوير المكون من 4 أشخاص المذكور سابقًا، شملت عملية الترحيل هذه أيضًا متخصصين في المنتجات وتجربة المستخدم ومهندس برامج. استغرق مشروع التحسين فريق التطوير المكون من 4 أشخاص شهرًا واحدًا. ركّز الفريق على مقياس LCP وCLS (وهو مقياس آخر من مقاييس "مؤشرات أداء الويب الأساسية") وFCP. تضمنت تحسينات محددة ما يلي:
- عملية التحميل الكسول لجميع العناصر غير المرئية باستخدام Intersection Monitorer API
- عرض موارد ثابتة بشكل أسرع من خلال شبكة توصيل المحتوى
- التحميل الكسول للصور
مع
loading="lazy" - عرض من جهة الخادم لمحتوى مسار العرض الحرج
- الموارد المُهمة التحميل المُسبق والاتصال المسبَق لتقليل أوقات تأكيد الاتصال.
- استخدام أدوات مراقبة المستخدم الحقيقية (RUM) لتحديد صفحات تفاصيل المنتج التي كانت تواجه الكثير من متغيرات التصميم ثم إجراء تعديلات على بنية قاعدة التعليمات البرمجية.
يمكنك الاطلاع على مشاركة مدونة Agrofy الهندسية للحصول على مزيد من التفاصيل الفنية.
وبعد تفعيل قاعدة الرموز الجديدة على% 20 من الزيارات، أطلقت الشركة الموقع الإلكتروني الجديد لجميع الزوّار في أوائل أيلول (سبتمبر) 2020.
النتائج
أدت التحسينات التي أجرتها فريق التطوير إلى تحسينات قابلة للقياس في العديد من المقاييس المختلفة:
- تحسّنت سرعة عرض أكبر محتوى مرئي (LCP) بنسبة 70%.
- تحسنت متغيّرات التصميم التراكمية (CLS) بنسبة %72.
- يؤدي حظر طلبات JavaScript إلى خفض بنسبة 100% وحظر طلبات CSS بنسبة 80%.
- وانخفضت نسبة المهام الطويلة بنسبة 72%.
- حالة وحدة المعالجة المركزية الأولى غير نشطة: تحسّنت بنسبة 25%.
خلال الإطار الزمني نفسه، أظهرت بيانات مراقبة المستخدمين الحقيقية (المعروفة أيضًا باسم البيانات الفعلية) أنّ معدّل التراجع عن التحميل على صفحات تفاصيل المنتج قد انخفض بنسبة 76%، من 3.8% إلى 0.9%:
