كان العثور على الارتباط بين أداء الموقع الإلكتروني ومقاييس النشاط التجاري هو العامل الأساسي لنجاح جهود التحسين التي بذلوها.
Swappie هي شركة ناشئة ناجحة تبيع الهواتف المُجدَّدة. لعدة سنوات، كان يتم منح الأولوية لإضافة ميزات جديدة بدلاً من التركيز على أداء الموقع الإلكتروني، ولكن عندما لاحظ الفريق أنّ نتائج النشاط التجاري على الموقع الإلكتروني المتوافق مع الأجهزة الجوّالة كانت متأخرة عن الإصدار المتوافق مع أجهزة الكمبيوتر المكتبي، حدثت تغييرات. وركّز الفريق على تحسين الأداء، وسرعان ما شهد زيادة في أرباح الأجهزة الجوّالة.
42%
زيادة في الأرباح الواردة من الزوّار على الأجهزة الجوّالة
10لكل مستخدم*
*النسبة المئوية لزيادة "معدّل الإحالات الناجحة النسبي"
إبراز الفرصة
يتم احتساب معدّل الإحالات الناجحة النسبي على الأجهزة الجوّالة (Rel mCvR) من خلال قسمة معدّل الإحالات الناجحة على الأجهزة الجوّالة على معدّل الإحالات الناجحة على أجهزة الكمبيوتر المكتبي. هناك العديد من الفرص لتتبُّع مقاييس السرعة، ولكن قد يكون ربطها بمقاييس النشاط التجاري أمرًا صعبًا للغاية. بما أنّه يتمّ الوصول إلى كلّ من الأجهزة الجوّالة وأجهزة الكمبيوتر المكتبي من خلال الحملات والمواسم نفسها، يزيل مقياس "نسبة التحويل المعدَّلة للأجهزة الجوّالة" أثر هذه المَعلمات الخارجية، ولا يعرض سوى ما إذا كان الموقع الإلكتروني المتوافق مع الأجهزة الجوّالة يتحسّن أم لا.
بلغ متوسط "نسبة الإحالات الناجحة النسبية لإعلانات Shopping" في أكبر عشرة مواقع إلكترونية للتجارة الإلكترونية في الولايات المتحدة 50%، بينما بلغت النسبة في Swappie 24%. يشير ذلك إلى أنّ الموقع المتوافق مع الأجهزة الجوّالة يواجه تحديات ويؤدي إلى خسارة الشركة للإيرادات، ما أدّى إلى إطلاق مشروع تحسين الأداء.
قياس تأثير تحسينات الأداء
استخدَمت Swappie "إحصاءات Google" لإعداد التتبّع اليومي لمقياس Rel mCvR وقياس متوسط وقت تحميل الصفحة على الأجهزة الجوّالة، باستخدام نموذج جدول البيانات هذا. (اطّلِع على تعليمات كيفية استخدام جدول البيانات). وبدأوا أيضًا تتبُّع "مؤشرات الأداء الرئيسية للويب" من خلال "إحصاءات Google" وBigQuery. بعد بدء التتبّع، بدأ المطوّرون العمل على تحسين أداء الموقع الإلكتروني.
بعد ثلاثة أشهر فقط من العمل، كان التأثير واضحًا، إذ ارتفع معدّل الإحالات الناجحة النسبي على الأجهزة الجوّالة من% 24 إلى% 34، وزاد معدّل الأرباح من الأجهزة الجوّالة بنسبة %42.
23%
انخفاض متوسّط وقت تحميل الصفحة
55%
انخفاض في سرعة عرض أكبر محتوى مرئي
91%
انخفاض متغيّرات التصميم التراكمية (CLS)
90%
تقليل مهلة الاستجابة لأوّل إدخال
تحسينات
تحسين مقياسَي LCP وCLS
لاحظ فريق تطوير Swappie أنّه كان هناك مجال كبير للتحسين في العناصر الصغيرة التي تم تجاهلها لفترة طويلة. من خلال دراسة الموقع الإلكتروني على ملفات العرض المختلفة وباللغات المختلفة، تم رصد مشاكل في LCP و CLS كان من السهل حلّها وكان لها تأثير كبير في الأداء العام. على سبيل المثال، أدى عرض عنصر LCP على الخادم بدلاً من العميل عند الإمكان إلى انخفاض LCP.
كان من الصعب رصد تغييرات التنسيق، لأنّها قد تختلف كثيرًا استنادًا إلى مساحة العرض والاتصال. بعد نقل "مؤشرات أداء الويب الأساسية" من المستخدِمين إلى ملفّات تحليلاتهم، عرفوا أنّهم على الطريق الصحيح، ويعود السبب إلى انخفاض مقياس CLS.
الصور
تم تحسين الصور من خلال التحميل المُسبَق والتحميل الكسول وتحديد الحجم المناسب. وتعمل هذه الصفحات على preloaded تحميل الصور الرئيسية (مثل LCP)، مع تحميل الصور خارج إطار العرض عند الحاجة فقط.
الخطوط
حسّنت Swappie الخطوط من خلال تبديل مقدّمي الخدمة. وقد كان لهذا الإجراء تأثير كبير لأنّه كانوا بحاجة إلى طريقة مثالية للتعامل مع الخطوط المطلوبة للغات المختلفة.
النصوص البرمجية التابعة لجهات خارجية
بذل فريق Swappie الكثير من الجهد لمراجعة كل نص برمجي وتطبيق مصغّر تابعَين لجهة خارجية، وأماكن استخدامهما، والوظائف التي يقدّمانها. بعد مناقشات مع جميع الجهات المعنيّة، وضع الفريق خططًا لتقليل تأثير النصوص البرمجية على الموقع الإلكتروني، مع الحفاظ على الوظائف. وأزالوا المحتوى غير الضروري وصعّبوا الوصول إلى المحتوى المتبقي، ما أدى إلى خفض كمية برمجة JavaScript التابعة لجهات خارجية على الموقع الإلكتروني بشكل كبير.
إزالة الرموز البرمجية غير المستخدَمة وتحسين التجميع
أدّى تحسين عمليات الاستيراد وإزالة ملفّات JS وCSS غير المستخدَمة إلى تحسينات طفيفة في أداء موقع Swappie الإلكتروني، إلا أنّ هذه التحسينات الطفيفة تتراكم بمرور الوقت. ونجحت الشركة أيضًا في تحسين عملية إعداد الحِزم.
إنشاء ثقافة الأداء في Swappie
لا تعود النتيجة التي حقّقتها Swappie إلى التغييرات في الرمز البرمجي فقط، بل تعود أيضًا إلى التغييرات في المؤسسة وأولوياتها.
يوضّح مدير الهندسة، تيمو هوفينن، ما يلي:
عليك ربط سرعة الموقع الإلكتروني بمقاييس النشاط التجاري للتأكيد على أهميتها. في حال عدم توفّر الوقت والموارد، عليك تحديد الأولويات، وهذا هو الحال دائمًا. إنّ إعطاء الأولوية لقيمة العميل هو المسار الذي يجب اتّباعه، ولكن من السهل جدًا التركيز على الميزات الجديدة وتحسينات الإحالات الناجحة المباشرة إذا كنت ترى أنّ سرعة الموقع الإلكتروني تؤدي فقط إلى تحسين "الشعور" الذي يتركه الموقع الإلكتروني. ليس من السهل دائمًا ربط سرعة الموقع الإلكتروني بمقاييس النشاط التجاري، وهذا هو السبب في أنّ الحساب باستخدام Rel mCvR ساعدنا كثيرًا.
Teemu Huovinen
بعد أن تم منح فريق المطوّرين فرصة التركيز بشكل كامل على سرعة الموقع الإلكتروني لمدة ربع سنة، أصبحوا أكثر تحفيزًا للتوغّل في التفاصيل.
إنّ الجمع بين تأثيرنا ونمو فريقنا هو ما يجعل الأمر أكثر روعة. بدأ أربعة من المطوّرين السبعة العمل خلال الشهر الذي بدأنا فيه العمل على الأداء. نشكر الفريق على جهوده، فقد كان من المدهش حقًا أنّنا تمكّنا من التركيز على الموضوع وتحقيق هذا التأثير الكبير.
Teemu Huovinen
يشير "تيمو" أيضًا إلى أهمية تخصيص بعض الوقت في البداية لوضع خطط مستندة إلى البيانات، ومعرفة كيفية استخدام علامة التبويب "الأداء" في "أدوات المطوّر"، و إعداد إحصاءات المستخدمين قبل إجراء أي تحسينات. إنّ الرسوم البيانية (خاصةً تلك التي تسير في الاتجاه الصحيح) هي مصدر رائع للتعليقات والآراء بشأن عملك. ساعدت مراجعة "مؤشرات أداء الويب الأساسية" في الميدان إلى جانب نتائج Lighthouse (المستندة إلى المختبر) في التركيز على تحسين العناصر المناسبة التي ستؤثر في أكبر عدد من المستخدمين.