في غضون بضعة أشهر، تمكّن الموقع الإلكتروني الرائد للأخبار في المملكة المتحدة من تحسين CLS في الشريحة المئوية التسعون بنسبة% 250 من 0.25 إلى 0.1.
اختبار الثبات البصري
يمكن أن تكون تغييرات التصميم مزعجة جدًا. في Telegraph Media Group (TMG)، يُعدّ ثبات الأداء المرئي مهمًا بشكل خاص لأنّ القراء يستخدمون تطبيقاتنا بشكل أساسي لقراءة الأخبار. إذا تغيّر التنسيق أثناء قراءة مقالة، من المرجّح أن يفقد القارئ مكانه. وقد تكون هذه التجربة محبطة ومشتتة للانتباه.
من منظور هندسي، قد يكون من الصعب ضمان عدم تغيُّر الصفحات وعدم مقاطعة القارئ، خاصةً عند تحميل أقسام من تطبيقك بشكل غير متزامن وإضافتها إلى الصفحة بشكل ديناميكي.
في TMG، لدينا فِرق متعدّدة تساهم في إنشاء الرموز البرمجية من جهة العميل:
- الهندسة الأساسية: تنفيذ حلول تابعة لجهات خارجية لتعزيز ميزات محدّدة، مثل اقتراحات المحتوى والتعليقات
- التسويق: إجراء اختبارات أ/ب لتقييم كيفية تفاعل القرّاء مع الميزات أو التغييرات الجديدة
- الإعلانات: إدارة طلبات الإعلانات وعروض الأسعار المُسبَقة للإعلانات
- المتطلبات التحريرية: تضمين الرموز البرمجية في المقالات، مثل التغريدات أو الفيديوهات، بالإضافة إلى التطبيقات المصغّرة المخصّصة (مثل أداة تتبُّع حالات فيروس كورونا)
قد يكون من الصعوبة بمكانٍ ضمان عدم تسبب كل فريق من هذه الفِرق في حدوث تغييرات مفاجئة في تنسيق الصفحة. باستخدام مقياس التغيير التراكمي في التنسيق لقياس عدد المرات التي يحدث فيها ذلك للقراء، حصلت الفِرق على المزيد من الإحصاءات حول تجربة المستخدِم الفعلية وهدف واضح للسعي لتحقيقه. وقد أدّى ذلك إلى تحسين متغيّرات التصميم التراكمية (CLS) في الشريحة المئوية الخامسة والسبعين من 0.25 إلى 0.1 وزيادة نسبة الصفحات التي اجتازت الاختبار من 57% إلى 72%.
250%
تحسين متغيّر التصميم التراكمية (CLS) في الشريحة المئوية الخامسة والسبعين
زيادة بنسبة %15
المزيد من المستخدمين الذين حقّقوا نتيجة CLS جيدة
نقطة البداية
باستخدام لوحات بيانات CrUX، تمكّنا من تحديد أنّ صفحاتنا كانت تتغيّر أكثر مما نريد.
أردنا أن يحصل 75% على الأقل من القرّاء على تجربة "جيدة"، لذلك بدأنا في تحديد أسباب عدم ثبات التنسيق.
كيفية قياس تغييرات التنسيق
لقد استخدمنا أدوات Chrome DevTools وWebPageTest للمساعدة في تحديد سبب اختلاف التنسيق. في DevTools، استخدمنا قسم تجربته ضمن علامة التبويب الأداء لتمييز الحالات الفردية لتغيير التنسيق وكيفية أثرها في النتيجة الإجمالية.
يُبرز WebPageTest بشكلٍ مفيد مواضع تغيُّر التنسيق في عرض المخطط الزمني عند تحديد "تمييز التغيُّرات في التنسيق".
بعد مراجعة كلّ تغيير في النماذج الأكثر زيارة، توصّلنا إلى قائمة بالأفكار حول كيفية تحسينها.
الحدّ من تغييرات التصميم
ركّزنا على أربعة مجالات يمكننا فيها تقليل عمليات تغيير التنسيق: - الإعلانات - الصور - العناوين - المحتوى المضمّن
الإعلانات
يتم تحميل الإعلانات بعد عملية الرسم الأولية من خلال JavaScript. بعض الحاويات التي تم تحميلها لم يكن لها أي ارتفاع محجوز.
على الرغم من أنّنا لا نعرف الارتفاع الدقيق، يمكننا حجز مساحة باستخدام حجم الإعلان الأكثر شيوعًا الذي يتم تحميله في المساحة.
لقد قيّمنا خطأً متوسط ارتفاع الإعلان في بعض الحالات. بالنسبة إلى تطبيقات القراءة على الأجهزة اللوحية، كانت المساحة المخصّصة للقراءة تتقلّص.
لقد أعدنا النظر في المساحة وضبطنا ارتفاعها لاستخدام الحجم الأكثر شيوعًا.
الصور
يتم تحميل الكثير من الصور على الموقع الإلكتروني بشكل بطيء، كما أنّه تم حجز مساحة لها.
ومع ذلك، لم تكن الصور المضمّنة في أعلى المقالات تشغل أي مساحة محجوزة في الحاوية، ولم تكن تحتوي على سمتَي العرض والارتفاع المرتبطتَين بالعلامات. وقد أدّى ذلك إلى تغيير التنسيق أثناء تحميلها.
من خلال إضافة سمتَي العرض والارتفاع إلى الصور، تم ضمان عدم تغيُّر التنسيق.
العنوان
كان العنوان أسفل المحتوى في الترميز وتم وضعه في الأعلى باستخدام CSS. كانت الفكرة الأصلية هي إعطاء الأولوية لتحميل المحتوى قبل التنقّل، ولكن هذا الإجراء تسبب في تغيُّر الصفحة مؤقتًا.
سمح نقل العنوان إلى أعلى العلامة بعرض الصفحة بدون هذا التحول.
التضمينات
تتميز بعض عمليات التضمين المستخدَمة بشكل متكرّر بنسبة عرض إلى ارتفاع محدّدة. على سبيل المثال، فيديوهات YouTube أثناء تحميل المشغّل، نسحب الصورة المصغّرة من YouTube ونستخدمها كعنصر نائب أثناء تحميل الفيديو.
قياس التأثير
تمكّنا من قياس التأثير على مستوى الميزة بسهولة باستخدام الأدوات المذكورة في بداية المقالة. ومع ذلك، أردنا قياس CLS على مستوى النموذج وعلى مستوى الموقع الإلكتروني. بشكلٍ اصطناعي، استخدمنا SpeedCurve للتحقّق من التغييرات في مرحلة ما قبل الإنتاج وخلال مرحلة الإنتاج.
بعد ذلك، يمكننا التحقّق من النتائج في بيانات RUM (التي يوفّرها mPulse) بعد وصول الرمز إلى مرحلة الإنتاج.
من خلال التحقّق من بيانات RUM، نحصل على مستوى جيد من الثقة بأنّ التغييرات التي نجريها لها تأثير إيجابي على القرّاء.
إنّ الأرقام النهائية التي اطّلعنا عليها هي لبيانات RUM التي تجمعها Google. وينطبق ذلك بشكل خاص الآن لأنّها ستؤثّر قريبًا في ترتيب الصفحة. في البداية، استخدمنا تقرير تجربة المستخدِم على Chrome، سواءً في البيانات الشهرية على مستوى المصدر المتوفّرة من خلال لوحة بيانات CrUX، أو من خلال طلب بيانات BigQuery لاسترداد بيانات p75 السابقة. بهذه الطريقة، تمكّنا بسهولة من معرفة أنّه بالنسبة إلى جميع الزيارات التي تم قياسها باستخدام CrUX، تحسّنت قيمة متغيّر التصميم التراكمية (CLS) في الشريحة المئوية الخامسة والسبعين بنسبة% 250 من 0.25 إلى 0.1، كما زادت نسبة الزيارات التي اجتازت الفحص من% 57 إلى%72.
بالإضافة إلى ذلك، تمكّنا من الاستفادة من واجهة برمجة التطبيقات لتقرير تجربة المستخدم في Chrome وإنشاء بعض لوحات البيانات الداخلية المُقسَّمة إلى نماذج.
تجنُّب التراجع في مقياس CLS
يُعدّ تجنُّب التراجعات أحد الجوانب المهمة لإجراء تحسينات على الأداء. لقد أعددنا بعض ميزانيات الأداء الأساسية لقياس مقاييسنا الرئيسية، وأدرجنا مقياس متغيّرات التصميم التراكمية (CLS) فيها.
إذا تجاوز الاختبار الميزانية، سيتم إرسال رسالة إلى قناة Slack لنتمكّن من التحقيق في السبب. لقد أعددنا أيضًا تقارير أسبوعية، حتى إذا بقيت نماذج الميزانية ضمن الميزانية، نكون على دراية بأي تغييرات كان لها تأثير سلبي.
نخطّط أيضًا لتوسيع ميزانياتنا لاستخدام بيانات مراقبة المستخدمين في الوقت الفعلي بالإضافة إلى بيانات الاصطناعية، وذلك باستخدام mPulse لضبط كلّ من المنبّهات الثابتة ورصد الانحراف المحتمل، ما سيجعلنا على دراية بأي تغييرات غير عادية.
من المهم أن نأخذ مقياس CLS في الاعتبار عند إضافة ميزات جديدة. إنّ الكثير من التغييرات التي ذكرتها هي تلك التي اضطررنا إلى تصحيحها بعد طرحها أمام قرائنا. سيكون ثبات التنسيق من بين الاعتبارات التي نأخذها في الاعتبار عند تصميم أي حلّ ل أي ميزة جديدة من الآن فصاعدًا حتى نتمكّن من تجنُّب أي تغييرات غير متوقّعة في التنسيق من البداية.
الخاتمة
كانت التحسينات التي أجريناها حتى الآن سهلة التنفيذ جدًا، وقد تركت أثرًا كبيرًا. لم تستغرق الكثير من التغييرات التي أوضحتها في هذه المقالة وقتًا طويلاً لتنفيذها، وتم تطبيقها على جميع نماذج الرسائل الأكثر استخدامًا، ما يعني أنّها كان لها تأثير إيجابي واسع النطاق على قرائنا.
لا تزال هناك مجالات في الموقع الإلكتروني يجب تحسينها. نحن نستكشف طرقًا قد تسمح لنا بالاستفادة من المزيد من المنطق من جهة العميل من جهة الخادم، ما سيؤدي إلى تحسين CLS بشكل أكبر. سنواصل تتبُّع مقاييس الأداء ومراقبتها بهدف تحسينها باستمرار وتقديم أفضل تجربة ممكنة للمستخدمين.