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