الطريقة التي حسّنت بها شركة Mercado Libre "مؤشرات أداء الويب" (TBT/FID)

تحسين التفاعل مع صفحات تفاصيل المنتجات لخفض بنسبة 90% في الحدّ الأقصى المحتمل لمهلة الاستجابة الأولى في Lighthouse وزيادة بنسبة 9% في مقياس FID في تقرير تجربة المستخدم على Chrome

Carlos Aranha

Demián Renzulli

Joan Baca

Mercado Libre هي أكبر منظومة متكاملة للتجارة الإلكترونية والدفعات في أمريكا اللاتينية. تتوفّر هذه المنصة في 18 بلدًا، وهي رائدة في السوق في البرازيل والمكسيك والأرجنتين (بناءً على عدد الزوّار الفرديين وعدد مشاهدات الصفحة على الويب).

لطالما كان أداء الويب محورًا للشركة منذ فترة طويلة، ولكنهم شكلوا مؤخرًا فريقًا لمراقبة الأداء وتطبيق التحسينات عبر أجزاء مختلفة من الموقع.

تلخّص هذه المقالة العمل الذي أنجزه كل من غيل باز وبابلو كارميناتي وأوليه بورخاي من فريق معمارية الواجهة الأمامية في Mercado Libre بهدف تحسين أحد مؤشرات "مؤشرات أداء الويب الأساسية": مهلة الاستجابة الأولى (FID) والخادم الوكيل الخاص به، وهو إجمالي وقت الحظر (TBT).

زيادة بنسبة _%90

انخفاض في الحد الأقصى المحتمل من FID في Lighthouse

زيادة بنسبة _%9

يرى المزيد من المستخدمين أنّ FID "سريع" في CrUX

المهام الطويلة ومهلة الاستجابة الأولى وإجمالي وقت الحظر

يمكن أن يؤدي تشغيل رمز JavaScript باهظ الثمن إلى مهام طويلة، أي المهام التي يتم تشغيلها لمدة تزيد عن 50 ملي ثانية في سلسلة التعليمات الرئيسية للمتصفِّح.

يقيس FID (مهلة الاستجابة الأولى) الوقت منذ تفاعل المستخدم مع الصفحة لأول مرة (على سبيل المثال، عند النقر على رابط) إلى الوقت الذي يتمكن فيه المتصفّح من بدء معالجة معالِجات الأحداث كاستجابة لذلك التفاعل. من المرجَّح أن يتضمّن الموقع الإلكتروني الذي ينفِّذ رمز JavaScript باهظ الثمن عدة مهام طويلة، ما يؤدي في النهاية إلى التأثير سلبًا في مقياس FID.

لتقديم تجربة جيدة للمستخدمين، يجب أن تسعى المواقع الإلكترونية إلى أن تكون "مهلة الاستجابة الأولى" أقل من 100 مللي ثانية:

وعلى الرغم من أنّ الموقع الإلكتروني لشركة Mercado Libre كان يحقّق أداءً جيدًا في معظم الأقسام، فقد تبيّن له في تقرير تجربة المستخدم على Chrome أنّ قيمة FID متدنية في صفحات تفاصيل المنتج. بناءً على هذه المعلومات، قرر تركيز جهوده على تحسين التفاعل لصفحات المنتجات في الموقع.

إصدارا الأجهزة الجوّالة وأجهزة الكمبيوتر المكتبي من صفحة تفاصيل المنتج في Mercado Libre

تسمح هذه الصفحات للمستخدم بإجراء تفاعلات معقدة، لذلك كان الهدف هو تحسين التفاعل، دون التدخل في الوظائف القيّمة.

قياس مدى تفاعل صفحات تفاصيل المنتجات

يتطلب مقياس FID مستخدمًا حقيقيًا، وبالتالي لا يمكن قياسه في المختبر. ومع ذلك، فإنّ مقياس إجمالي وقت الحظر (TBT) يمكن قياسه في المختبرات، ويرتبط جيدًا بمقياس FID على مستوى المجال، ويسجِّل أيضًا المشاكل التي تؤثر في التفاعل.

في عملية التتبُّع التالية، على سبيل المثال، بينما إجمالي الوقت المستغرق في تشغيل المهام على سلسلة التعليمات الرئيسية هو 560 ملي ثانية، يُعدّ 345 ملي ثانية فقط من ذلك الوقت إجمالي مدة الحظر (مجموع الأجزاء من كل مهمة تتجاوز 50 ملي ثانية):

استعانت شركة Mercado Libre بـ "TBT" (TBT) كمقياس وكيل في المختبر، وذلك من أجل قياس وتحسين التفاعل بين صفحات تفاصيل المنتج في العالم الحقيقي.

إليك النهج العام الذي اتبعوه:

• استخدِم WebPageTest لتحديد النصوص البرمجية التي كانت تُبقي سلسلة التعليمات الرئيسية مشغولةً على جهاز حقيقي.
• يمكنك استخدام Lighthouse لتحديد تأثير التغييرات في الحد الأقصى المحتمل لمهلة الاستجابة لأوّل إدخال (الحد الأقصى المحتمل لمهلة الاستجابة الأولى).

ملاحظة: خلال فترة هذا المشروع، استخدمت شركة Mercado Libre الحد الأقصى المحتمَل لمهلة الاستجابة الأولى في Lighthouse، لأنّ ذلك كان المقياس الرئيسي في الأداة لقياس مستوى التفاعل في ذلك الوقت. تنصح أداة Lighthouse الآن باستخدام إجمالي وقت الحظر بدلاً من ذلك.

استخدام WebPageTest لعرض المهام الطويلة

WebPageTest (WPT) هي أداة لأداء الويب تتيح لك إجراء اختبارات على أجهزة حقيقية في مواقع مختلفة حول العالم.

استخدمت شركة Mercado Libre نظام WPT لإعادة إنتاج تجربة المستخدمين من خلال اختيار نوع الجهاز وموقعه الجغرافي المشابهين للمستخدمين الحقيقيين. وقد اختارت الشركة على وجه التحديد جهاز Moto 4G وDulles، فيرجينيا، لأنّها أرادت تقريب تجربة مستخدمي Mercado Libre في المكسيك. من خلال ملاحظة عرض سلسلة التعليمات الرئيسي في WPT، وجدت Mercado Libre أن هناك العديد من المهام الطويلة المتتالية التي حظرت سلسلة التعليمات الرئيسية لمدة ثانيتين:

عرض سلسلة المحادثات الرئيسية لصفحات تفاصيل المنتجات في Mercado Libre

وبتحليل الشلال المقابل، وجدوا أن جزءًا كبيرًا من هاتين الثانية جاء من وحدة التحليلات لديهم. كان حجم الحزمة الرئيسية للتطبيق كبيرًا (950 كيلوبايت) واستغرق وقتًا طويلاً في التحليل والتجميع والتنفيذ.

عرض شلال لصفحات تفاصيل المنتجات في Mercado Libre

استخدام Lighthouse لتحديد الحد الأقصى المحتمل من FID

لا تسمح لك أداة Lighthouse بالاختيار بين الأجهزة والمواقع الجغرافية المختلفة، ولكنّها أداة مفيدة للغاية لتشخيص المواقع الإلكترونية والحصول على اقتراحات بشأن الأداء.

عند تشغيل Lighthouse على صفحات تفاصيل المنتج، وجدت شركة Mercado Libre أنّ مقياس الحد الأقصى المحتمل لمهلة الاستجابة الأولى هو المقياس الوحيد الذي تم تمييزه باللون الأحمر بقيمة 1710 ملي ثانية.

بناءً على ذلك، وضعت شركة Mercado Libre هدفًا لتحسين نتيجة "الحدّ الأقصى المحتمل من FID" في أداة مختبرية مثل Lighthouse وWebPageTest، بافتراض أنّ هذه التحسينات ستؤثر في المستخدمين الفعليين، وبالتالي تظهر في أدوات مراقبة المستخدمين، مثل "تقرير تجربة المستخدم" على Chrome.

تحسين المهام الطويلة

التكرار الأول

استنادًا إلى عملية تتبُّع سلسلة التعليمات الرئيسية، حددت شركة Mercado Libre الهدف المتمثل في تحسين الوحدتين اللتين كانتا تستخدمان رمزًا برمجيًا باهظ الثمن.

وبدأوا في تحسين أداء وحدة التتبع الداخلية. احتوت هذه الوحدة على مهمة مُثقلة بوحدة المعالجة المركزية (CPU) لم تكن ضرورية لتشغيل الوحدة، وبالتالي يمكن إزالتها بأمان. وأدى ذلك إلى انخفاض بنسبة% 2 في JavaScript على الموقع الإلكتروني بأكمله.

وبعد ذلك، بدأوا العمل على تحسين حجم الحزمة العام:

استخدمت Mercado Libre webpack-bundle-analyzer لرصد فرص التحسين:

• في البداية، كانت تتطلب وحدة Lodash الكاملة. تم استبدال هذا العنصر بطلب لكل طريقة لتحميل مجموعة فرعية فقط من Lodash بدلاً من المكتبة بأكملها، وتم استخدامه مع lodash-webpack-extension لتقليص حجم Lodash أيضًا.

طبّق الفريق أيضًا تحسينات Babel التالية:

• استخدام @babel/plugin-transform-runtime لإعادة استخدام أدوات مساعدة Babel في جميع أجزاء الرمز، وتقليل حجم الحزمة بشكل كبير.
• استخدام babel-plugin-search-and-replace لاستبدال الرموز المميزة في وقت الإنشاء لإزالة ملف إعداد كبير داخل الحزمة الرئيسية.
• إضافة babel-plugin-transform-react-remove-prop-types لحفظ بعض وحدات البايت الإضافية من خلال إزالة أنواع العناصر.

ونتيجةً لهذه التحسينات، تم تقليل حجم الحزمة بنسبة%16 تقريبًا.

قياس التأثير

أدّت التغييرات إلى خفض المهام الطويلة المتتالية في Mercado Libre من ثانيتين إلى ثانية واحدة:

في العرض الإعلاني بدون انقطاع العلوي في WPT، هناك شريط أحمر طويل (في صف الصفحة تفاعلية) بين الثواني 3 و5. في الشلال السفلي، تم تقسيم الشريط إلى أجزاء أصغر، وشغل سلسلة التعليمات الرئيسية لفترات زمنية أقصر.

أظهرت أداة Lighthouse انخفاضًا بنسبة% 57 في الحد الأقصى المحتمل من "مهلة الاستجابة الأولى":

التكرار الثاني

واصل الفريق البحث في مهام طويلة من أجل إيجاد التحسينات اللاحقة.

وبناءً على هذه المعلومات، قرر الفريق تنفيذ التغييرات التالية:

• واصِل تقليل حجم الحزمة الرئيسية لتحسين وقت التجميع والتحليل (مثلاً عن طريق إزالة التبعيات المكرّرة في الوحدات المختلفة).
• طبِّق تقسيم الرمز على مستوى المكوّنات لتقسيم JavaScript إلى أجزاء أصغر والسماح بتحميل المكوّنات المختلفة بشكل أكثر ذكاءً.
• أجِّل ترطيب المكوّنات للسماح باستخدام سلسلة التعليمات الرئيسية بشكل أكثر ذكاءً. ويُشار إلى هذه التقنية عادةً باسم الترطيب الجزئي.

قياس التأثير

وقد أظهر تتبُّع WebPageTest الناتج عن أجزاء أصغر من تنفيذ JavaScript:

وانخفضت المدة القصوى المحتملة لمهلة الاستجابة الأولى (FID) في Lighthouse بنسبة إضافية بنسبة%60:

تصور تقدم المستخدمين الحقيقيين

ورغم أنّ أدوات الاختبار المعملي مثل WebPageTest وLighthouse تعتبر الرائعة رائعة لتكرار الحلول أثناء التطوير، فإن الهدف الحقيقي هو تحسين التجربة للمستخدمين الحقيقيين.

يوفّر تقرير تجربة المستخدم في Chrome مقاييس لتقييم تجربة المستخدم وفقًا لتجربة مستخدمي Chrome في الوجهات الرائجة على الويب. ويمكن الحصول على البيانات من التقرير من خلال تنفيذ طلبات بحث في BigQuery أو PageSpeedInsights أو CrUX API.

تُعد لوحة معلومات CrUX طريقة سهلة لتصور مدى تقدم المقاييس الأساسية:

تقدّم شركة Mercado Libre مقياس FID بين كانون الثاني (يناير) 2020 ونيسان (أبريل) 2020. قبل مشروع التحسين، كان 82% من المستخدمين يرون أنّ قيمة FID سريعة (أقل من 100 ملي ثانية). وبعد ذلك، كان أكثر من 91٪ من المستخدمين ينظرون إلى المقياس في أسرع وقت.

الخطوات التالية

لا ينحصر أداء الويب على الإطلاق، وتدرك شركة Mercado Libre القيمة التي تضيفها هذه التحسينات للمستخدمين. ومع استمرارهم في تطبيق العديد من التحسينات على الموقع الإلكتروني، بما في ذلك الجلب المُسبَق في صفحات بيانات المنتجات وتحسينات الصور وغيرها، يواصل الفريق إضافة تحسينات على صفحات بيانات المنتجات لتقليل إجمالي وقت الحظر (TBT) وبواسطة الخادم الوكيل FID وغير ذلك. تشمل هذه التحسينات ما يلي:

• التكرار في حل تقسيم التعليمة البرمجية.
• تحسين تنفيذ النصوص البرمجية التابعة لجهات خارجية
• التحسينات المستمرة في تجميع مواد العرض على مستوى الحِزمة (حزمة الويب).

تقدّم شركة Mercado Libre نظرة شاملة على الأداء. لذلك، تواصل الفريق العمل على تحسين التفاعل على الموقع الإلكتروني، وبدأت أيضًا في تقييم فرص التحسين في مؤشرات أداء الويب الأساسية الأخرى الحالية: LCP (سرعة عرض أكبر محتوى مرئي) وCLS (متغيّرات التصميم التراكمية).