تحسين التفاعل في صفحات تفاصيل المنتجات لخفض "معدّل مهلة الاستجابة لأوّل إدخال" المحتمل إلى أقصى حدّ بنسبة% 90 في Lighthouse وتحسين "معدّل مهلة الاستجابة لأوّل إدخال" بنسبة% 9 في "تقرير تجربة مستخدِمي Chrome"
Mercado Libre هي أكبر منظومة متكاملة للتجارة الإلكترونية والدفع في أمريكا اللاتينية. ويتواجد التطبيق في 18 بلدًا، وهو أحد كبار بائعي التطبيقات في البرازيل والمكسيك والأرجنتين (استنادًا إلى عدد الزوّار الفرديين و مرّات الاطّلاع على الصفحة).
كان أداء الويب يشكّل محور اهتمام الشركة منذ فترة طويلة، ولكنّها شكّلت مؤخرًا فريقًا لمراقبة الأداء وتطبيق التحسينات على أجزاء مختلفة من الموقع الإلكتروني.
تلخّص هذه المقالة العمل الذي أجراه Guille Paz وPablo Carminatti وOleh Burkhay من فريق هندسة الواجهة الأمامية في Mercado Libre لتحسين أحد مؤشرات Core Web Vitals: First Input Delay (FID) ووكيله التجريبي، Total Blocking Time (TBT).
90%
خفض الحد الأقصى المحتمل من تأخُّر الإدخال الأول (FID) في Lighthouse
زيادة بنسبة %9
المزيد من المستخدِمين الذين يصنّفون وقت الاستجابة للتفاعل على أنّه "سريع" في CrUX
المهام الطويلة ومُهلة الاستجابة الأولى وإجمالي وقت الحظر
يمكن أن يؤدي تشغيل رمز JavaScript مُكلّف إلى مهام تستغرق وقتًا طويلاً، وهي المهام التي تستغرق أكثر من 50 ملي ثانية في سلسلة المهام الرئيسية للمتصفح.
يقيس مقياس FID (مهلة الاستجابة لأوّل إدخال) الوقت المستغرَق بدءًا من تفاعل المستخدِم مع الصفحة لأول مرة (مثلاً، عندما ينقر على رابط) ولغاية وقت تمكّن المتصفّح من بدء معالجة معالجي الأحداث استجابةً لذلك التفاعل. من المرجّح أن يتضمّن الموقع الإلكتروني الذي ينفذ رمز JavaScript باهظ التكلفة العديد من المهام الطويلة، ما سيؤدّي في النهاية إلى التأثير سلبًا في مقياس FID.
لتقديم تجربة جيدة للمستخدم، يجب أن تسعى المواقع الإلكترونية إلى أن تكون مهلة الاستجابة لأوّل إدخال أقل من 100
ملي ثانية:
على الرغم من أنّ موقع Mercado Libre الإلكتروني كان يحقّق أداءً جيدًا في معظم الأقسام، تبيّن له في تقرير تجربت المستخدِم على Chrome أنّ FID الخاص بصفحات تفاصيل المنتجات كان ضعيفًا. استنادًا إلى هذه المعلومات، قرّرت الشركة التركيز على تحسين التفاعل مع صفحات المنتجات في الموقع الإلكتروني.
تسمح هذه الصفحات للمستخدم بإجراء تفاعلات معقّدة، لذا كان الهدف هو تحسين التفاعل بدون التدخل في الوظائف القيّمة.
قياس التفاعل مع صفحات تفاصيل المنتجات
تتطلّب FID مستخدمًا حقيقيًا، وبالتالي لا يمكن قياسها في المختبر. ومع ذلك، يمكن قياس مقياس إجمالي وقت الحظر (TBT) في المختبر، ويرتبط بشكل جيد بمقياس مهلة الاستجابة لأوّل إدخال (FID) في المجال، ويرصد أيضًا المشاكل التي تؤثّر في التفاعل.
في التتبُّع التالي، على سبيل المثال، على الرغم من أنّ الوقت الإجمالي الذي تمّ استخدامه في تنفيذ المهام على سلسلة المحادثات الرئيسية هو 560 ملي ثانية، إلا أنّ 345 ملي ثانية فقط من هذا الوقت تُعتبر الوقت الإجمالي للحظر (مجموع الأجزاء التي تزيد عن 50 ملي ثانية من كل مهمة):
استخدمت Mercado Libre مقياس TBT كمقياس بديل في المختبر لقياس التفاعل في صفحات تفاصيل المنتجات وتحسينه في الواقع.
في ما يلي المنهج العام الذي اتّبعوه:
- استخدِم WebPageTest لتحديد النصوص البرمجية التي كانت تشغّل الخيط الرئيسي على جهاز حقيقي.
- استخدِم Lighthouse لتحديد تأثير التغييرات في الحد الأقصى المحتمَل لمهلة الاستجابة لأوّل إدخال (الحد الأقصى المحتمَل لمقياس FID).
استخدام WebPageTest لعرض المهام الطويلة بيانيًا
WebPageTest (WPT) هي أداة لقياس أداء الويب تتيح لك إجراء اختبارات على أجهزة حقيقية في مواقع جغرافية مختلفة حول العالم.
استخدمت Mercado Libre WPT لإعادة إنتاج تجربة المستخدمين من خلال اختيار نوع جهاز و موقع جغرافي مشابهَين للمستخدمين الفعليين. على وجه التحديد، اختارت الشركة جهاز Moto 4G وDulles، Virginia، لأنّها أرادت تقريب تجربة مستخدمي Mercado Libre في المكسيك. من خلال مراقبة عرض سلسلة التعليمات الرئيسية في WPT، اكتشفت Mercado Libre أنّ هناك عدة مهام متعاقبة مديدة تحظر سلسلة التعليمات الرئيسية لمدة ثانيتَين:
بعد تحليل المخطط البياني المتسلسل المقابل، تبيّن أنّ جزءًا كبيرًا من هاتين الثوانيتَين جاء من وحدة الإحصاءات. كان حجم الحِزمة الرئيسية للتطبيق كبيرًا (950 كيلوبايت) واستغرق تحليله وتجميعه وتنفيذه وقتًا طويلاً.
استخدام Lighthouse لتحديد الحد الأقصى المحتمل من تأخُّر الإدخال الأول (FID)
لا تسمح لك أداة Lighthouse باختيار بين الأجهزة والمواقع الجغرافية المختلفة، ولكنها أداة مفيدة جدًا لتحديد المشاكل في المواقع الإلكترونية والحصول على اقتراحات بشأن الأداء.
عند تشغيل Lighthouse على صفحات تفاصيل المنتجات، اكتشف فريق Mercado Libre أنّ Max Potential FID هو المقياس الوحيد الذي تم وضع علامة عليه باللون الأحمر، وذلك بقيمة 1710 ملي ثانية.
استنادًا إلى ذلك، وضعت Mercado Libre هدفًا لتحسين نتيجة "معدّل عرض الإعلانات المتأخرة إلى أقصى حدّ" في أداة اختبار برمجي مثل Lighthouse وWebPageTest، بافتراض أنّ هذه التحسينات ستؤثّر في مستخدميها الفعليين، وبالتالي ستظهر في أدوات مراقبة المستخدِمين الفعليين، مثل "تقرير تجربة المستخدِم في Chrome".
تحسين المهام الطويلة
التكرار الأول
استنادًا إلى تتبُّع سلسلة المهام الرئيسية، حدّدت Mercado Libre هدفًا لتحسين المكوّنَين اللذَين كانا يشغّلان رمزًا برمجيًا ذا تكلفة عالية.
بدأوا بتحسين أداء وحدة التتبّع الداخلية. كانت هذه الوحدة تتضمّن مهمة تستهلك موارد وحدة المعالجة المركزية بشكل كبير، ولكنها لم تكن مهمة ضرورية لعمل الوحدة، وبالتالي يمكن إزالتها بأمان. وقد أدّى ذلك إلى تقليل JavaScript بنسبة% 2 في الموقع الإلكتروني بأكمله.
بعد ذلك، بدأ الفريق العمل على تحسين حجم الحِزمة العام:
استخدمت Mercado Libre أداة webpack-bundle-analyzer لرصد فرص التحسين التالية:
- في البداية، كان يتطلّب التطبيق وحدة Lodash الكاملة. تم استبدال ذلك باستخدام طلب لكل طريقة لتحميل مجموعة فرعية فقط من Lodash بدلاً من المكتبة بأكملها، ويتم استخدامه مع lodash-webpack-plugin لتصغير Lodash بشكلٍ أكبر.
وطبّقت الشركة أيضًا تحسينات Babel التالية:
- استخدام @babel/plugin-transform-runtime لإعادة استخدام أدوات Babel المساعدة في جميع أنحاء الرمز البرمجي وتقليل حجم الحزمة بشكل كبير
- استخدام babel-plugin-search-and-replace لاستبدال الرموز في وقت الإنشاء، من أجل إزالة ملف إعدادات كبير داخل التحميل المُجمَّع الرئيسي
- إضافة babel-plugin-transform-react-remove-prop-types لتوفير بعض البايتات الإضافية من خلال إزالة أنواع العناصر
نتيجةً لهذه التحسينات، تم تقليل حجم الحِزمة بنسبة%16 تقريبًا.
قياس التأثير
أدّت التغييرات إلى تقليل مدة المهام الطويلة المتتالية في Mercado Libre من ثانيتَين إلى ثانية واحدة:
أظهر Lighthouse انخفاضًا بنسبة% 57 في الحد الأقصى المحتمَل لمهلة الاستجابة لأوّل إدخال:
التكرار الثاني
واصل الفريق البحث في المهام الطويلة للعثور على تحسينات لاحقة.
استنادًا إلى هذه المعلومات، قرّرت الشركة تنفيذ التغييرات التالية:
- واصِل تقليل حجم الحِزمة الرئيسية لتحسين وقت الترجمة والتحليل (على سبيل المثال، عن طريق إزالة التبعيات المكرّرة في جميع الوحدات المختلفة).
- طبِّق ميزة تقسيم الرموز على مستوى المكوّنات، لتقسيم JavaScript إلى أجزاء أصغر والسماح بتحميل المكوّنات المختلفة بشكل أكثر ذكاءً.
- يمكنك تأجيل تغذية المكوّنات لسماح باستخدام أكثر ذكاءً لسلسلة المحادثات الرئيسية. يُشار إلى هذه التقنية عادةً باسم التحلّل المائي الجزئي.
قياس التأثير
أظهر تتبع WebPageTest الناتج أجزاءً أصغر من تنفيذ JavaScript:
وتم خفض وقت الحد الأقصى المحتمل من تأخُّر الإدخال الأول (FID) في Lighthouse بنسبة 60%إضافية:
عرض مستوى التقدّم للمستخدمين الفعليين
على الرغم من أنّ أدوات الاختبار في المختبر، مثل WebPageTest وLighthouse، رائعة لتحسين الحلول أثناء التطوير، إلا أنّ الهدف الحقيقي هو تحسين تجربة المستخدمين الفعليين.
يوفّر تقرير تجرب مستخدمي Chrome مقاييس لتقييم تجربتهم وفقًا لتجربة مستخدمي Chrome في الوجهات الرائجة على الويب. يمكن الحصول على البيانات من التقرير من خلال تنفيذ طلبات بحث في BigQuery أو PageSpeedInsights أو واجهة برمجة التطبيقات CrUX.
لوحة بيانات Chrome User Experience (CrUX) هي طريقة سهلة لعرض مستوى تقدّم المقاييس الأساسية:
الخطوات التالية
لا تنتهي مهمة تحسين أداء الويب أبدًا، وتدرك Mercado Libre القيمة التي تحقّقها هذه التحسينات للمستخدمين. وفي الوقت الذي يواصلون فيه تطبيق العديد من التحسينات على الصعيدين الموقع الإلكتروني والصفحات التي تعرض بيانات المنتجات، بما في ذلك التحميل المُسبَق وتحسينات الصور وغيرها، يواصلون إضافة تحسينات على صفحات بيانات المنتجات لتقليل إجمالي وقت الحظر (TBT) ومؤشر FID بشكلٍ أكبر. وتشمل هذه التحسينات ما يلي:
- تكرار حلّ تقسيم الرموز البرمجية
- تحسين تنفيذ النصوص البرمجية التابعة لجهات خارجية
- تحسينات مستمرة في تجميع مواد العرض على مستوى أداة التجميع (webpack)
تمتلك Mercado Libre نظرة شاملة على الأداء، لذا في الوقت الذي تواصل فيه تحسين التفاعل في الموقع الإلكتروني، بدأت أيضًا في تقييم فرص التحسين في المقياسَين الآخرين الحاليَين من مؤشرات Core Web Vitals: سرعة عرض أكبر محتوى مرئي (LCP) ومتغيّرات التصميم التراكمية (CLS).