الطريقة التي حسّنت بها شركة Renault ارتدادها ومعدلات الإحالات الناجحة من خلال قياس وتحسين "سرعة عرض أكبر جزء من المحتوى على الصفحة"

حلّل الفريق بيانات من 10 مليون زيارة على صفحاته المقصودة وتبيّن له أنّ هناك ارتباطًا قويًا بين "سرعة عرض أكبر محتوى مرئي" و"معدّل الإحالات الناجحة".

Antoine Bisch

Cédric Bazureau

Thierry Coustillac

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

قياس تأثير "مؤشرات أداء الويب الأساسية" في الأعمال التجارية

القياس في "إحصاءات Google"

تعاونت شركة Renault مع خمسة وخمسين، شريك البيانات العالمي، لإعداد مكتبة مؤشرات أداء الويب التي تتيح إرسال جميع مقاييس مؤشرات أداء الويب من مستخدمين حقيقيين إلى "إحصاءات Google" بطريقة تتطابق بدقة مع كيفية قياسها بواسطة Chrome وإبلاغ أدوات Google الأخرى بها.

يعرض التحليل التالي مجموعة بيانات تم التقاطها باستخدام هذه الأدوات على مدار أربعة أشهر بين كانون الأول (ديسمبر) 2020 وآذار (مارس) 2021.

ترتبط سرعة LCP المُحسَّنة ارتباطًا وثيقًا بتفاعل المستخدم ومقاييس النشاط التجاري.

رصدت الفِرق ارتباطًا قويًا بشكل خاص بين انخفاض سرعة عرض أكبر محتوى مرئي (LCP) ومعدلات الارتداد ومعدلات الإحالات الناجحة الإيجابية، كما هو موضَّح في الرسم البياني أدناه.

تسجّل مجموعة البيانات أكثر من 10 ملايين زيارة في 33 بلدًا على مدار أربعة أشهر وتوضح مدى ارتباط مقاييس LCP بما يلي:

• انخفاض في معدلات الارتداد
• المزيد من الإحالات الناجحة (اكتملت نماذج العملاء المحتملين)

ومن المثير للاهتمام أنّ الموقع الإلكتروني يعمل كتطبيق من صفحة واحدة (SPA)، ولذلك يتم تسجيل جميع هذه الإجراءات في الصفحات المقصودة فقط. توضّح البيانات أنّ الأمر يستحق تحسين الموقع الإلكتروني إلى أن يصل سرعة عرض أكبر جزء من المحتوى على الصفحة إلى أقل من ثانية واحدة. لا يمكن أبدًا تحسين مواقع العلامة التجارية للمجموعة بشكل كبير!

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

إيجا راكوتواريمانانا، مستشارة، خمسة وخمسون

يمكن أن يؤدي تحسين سرعة عرض أكبر جزء من المحتوى على الصفحة (LCP) لمدة ثانية واحدة إلى انخفاض بنسبة 14 نقطة مئوية في معدل الارتداد وزيادة بنسبة% 13 في الإحالات الناجحة.

نهج Renault لتحسين "مؤشرات أداء الويب الأساسية" على نطاق واسع

منذ مطلع العام 2020، وفي أهم 5 أسواق أوروبية للعلامة التجارية، تحسَّن عدد الزوّار ارتفاع سرعة عرض أكبر جزء من المحتوى على الصفحة (أقل من 2.5 ثانية) بمعدّل 22 نقطة مئوية لنطاقات Renault (من 51% إلى 73%).

إليك كيفية تعاملهم معه.

تحسين مركزي لـ SPA

من وجهة نظر المنصة، لطالما كان الأداء أولوية على مدى سنوات، وشملت "مؤشرات أداء الويب الأساسية" عملية سلسة بشأن المقاييس الرئيسية. وضعت الفِرق المركزية حلّاً شاملاً للمراقبة (باستخدام Google Lighthouse وChrome UX Report API) ورسّخت ثقافة الأداء في المؤسسة. كانت هناك العديد من الاستراتيجيات لتحسين تطبيق الصفحة الواحدة، بما في ذلك:

• العرض من جهة الخادم (SSR) لضمان سرعة عرض أول محتوى مرئي (FCP).
• تقسيم الرمز لعرض مقاطع JavaScript وCSS المطلوبة للصفحة المقصودة فقط (لتحسين LCP وFID)
• شبكة توصيل المحتوى (CDN): مع مستوى عالٍ من التخزين المؤقت للموارد (بما في ذلك Lambda@Edge لترتيب معلَمات طلب البحث غير الضرورية وإزالتها) ساعد ذلك في تجنّب عيوب SSR (أي إبطاء سرعة تحويل النص إلى كلام بسبب العمليات الحسابية التي يجريها الخادم) وعرض المحتوى بشكل أقرب إلى المستخدم النهائي (للحصول على أداء أفضل لـ TTFB وLCP).
• تحسين الضغط باستخدام botli لتقليل حجم الرمز
• HTTP2 لتفعيل مضاعفة الطلبات والردود.
• استخدام صور متجاوبة مع التوافق مع تنسيق WebP وsrcset وsizes لعرض الصور وتنسيقها الأكثر ملاءمةً للمستخدمين
• طريقة التحميل الكسول للصور والفيديوهات وإطارات iframe باستخدام IntersectionObserver وFPO (صور مصغّرة صغيرة بحجم 1 كيلوبايت)
• إزالة النصوص البرمجية المحظورة وضبط الترجمة حسب أهداف المتصفّح لتقليل أحجام ملفات JavaScript (من خلال تجنُّب رموز polyfill غير الضرورية)
• تقليل حجم حاوية أداة "إدارة العلامات من Google" لتحميل النصوص البرمجية التابعة لجهات خارجية عند الحاجة فقط عند الحاجة
• تقليل عدد الخطوط المخصّصة باستخدام تنسيقات woff/woff2 مع نطاق يونيكود وfont-display:swap لتقليل أحجام ملفات الخطوط وعرض النص في أقرب وقت ممكن حتى إذا لم تكن الخطوط المخصّصة متوفّرة بعد
• التحميل المُسبق للصور الرئيسية التي غالبًا ما تكون عناصر لسرعة عرض أكبر جزء من المحتوى على الصفحة (LCP)

لا يزال الفريق يعمل على التحسينات المستقبلية مثل:

• إرسال المعلومات إلى العميل قبل طلبها من الخادم لتحسين سرعة عرض المحتوى على الصفحة من خلال توفير خدمة CSS بشكل أسرع (في وضع الاستعداد بسبب عدم توفّر دعم AWS واقتراح الإيقاف النهائي.
• الترطيب التدريجي لتحسين FID.
• دعم وحدة ES6 لتقديم تجربة أسرع باستخدام إصدارات ES6 للمتصفّحات الحديثة

يمكن أن يكون نهج "إعلانات Google" مفيدًا لتحقيق الأداء لأنّه ليس من الضروري إعادة تحميل الصفحة بالكامل عندما يتنقل المستخدمون بين الصفحات. ومع ذلك، يمكن اعتبار منهجيات قياس "مؤشرات أداء الويب الأساسية" الحالية في SPA على أنها جانب سلبي لأنّه لا يتم قياس عمليات انتقال المسار. وبالتالي، لا يتم أخذ عمليات تحميل الصفحات الأسرع نسبيًا ضمن الجلسة في الاعتبار بسبب التخزين المؤقت لواجهة المستخدم. ويصعّب ذلك أيضًا مقارنة "مؤشرات أداء الويب الأساسية" بموقع إلكتروني منافس لتطبيقات متعددة الصفحات، لأنّ ذاكرة التخزين المؤقت السريعة قد تؤدي إلى خفض المقاييس في كل صفحة يتصفّحها المستخدم خلال الجلسة. لمعرفة مزيد من التفاصيل، يمكنك الاطّلاع على الأسئلة الشائعة حول SPA من خلال "مؤشرات أداء الويب".

هذه قيود معروفة يتم التحقيق فيها من قِبل فِرق منتجات Chrome. سبق أن تم شحن تعديل على مقياس متغيّرات التصميم التراكمية (CLS) لتحسين القياس في SPA.

يتطلّب الأداء مراقبة مستمرة، حيث يمكن للفِرق الفنية المختلفة التأثير عليه. على الرغم من القيود التي تُفرض على طريقة قياس المؤشرات في تطبيقات الصفحة الواحدة، تتيح لنا "مؤشرات أداء الويب الأساسية" تتبُّع تأثير الإجراءات التي تتّخذها فِرقنا. نأمل أن يتم أخذ عمليات انتقال المسار في الاعتبار قريبًا.

"سيدريك بازورو"، رئيس قسم التكنولوجيا في Renault

الإرشادات المحلية التي تروِّج لتحسين الأداء كمسؤولية مشتركة

يتم تعريف الأداء على أنّه مسؤولية عالمية (مركزية) ومحلية في الوقت نفسه. وضعت الفِرق سلسلة من أفضل الممارسات التي يهدف مالكو المحتوى المحليون إلى اتّباعها. في ما يلي بعض الأمثلة من هذه الإرشادات:

• حسِّن حاوية أداة "إدارة العلامات من Google" المحلية لتحسين أداء الموقع الإلكتروني. على سبيل المثال، يمكنك تشغيل علامات معيّنة بشكل مشروط.
• يمكنك الحدّ من حجم محتوى الفيديو من خلال ضغطه باستخدام أدوات داخلية أو استضافته على منصة خارجية (مثل YouTube).
• تجنَّب تحميل الصور عبر "إدارة العلامات من Google".

إنّ الفهم العميق لأدائنا الرقمي هو أمر أساسي لضمان التحسين المستمر لمواقع علامتنا التجارية. يتمثّل منهج فريق تجربة العملاء لدينا في توفير منصة عالمية تؤثر بشكلٍ إيجابي في نتائج أعمال الفِرق المحلية مع تزويد هذه الفِرق بالإرشادات وأفضل الممارسات للحفاظ على مستوى الأداء العالي.

ألكسندر بيروش، رئيس قسم الأداء في Renault

وختامًا، لطالما كانت لأداء المواقع الإلكترونية أولوية في Renault، ويتم تحسين منصة موقعها الإلكتروني باستمرار. أتاح لهم قياس "مؤشرات أداء الويب الأساسية" إلى جانب مقاييس النشاط التجاري الترويج لهذا الموضوع باعتباره مسؤولية مشتركة على مستوى العالم، كما توفّر الإرشادات المحلية للفِرق إمكانية المشاركة في هذا الجهد المفيد.