تحسين متغيّرات التصميم التراكمية في Telegraph Media Group

وفي غضون شهرين، نجح الموقع الإخباري الرائد في المملكة المتحدة في تحسين قيمة CLS للنسبة المئوية الخامسة والسبعين بنسبة% 250 من 0.25 إلى 0.1.

Chris Boakes

تحدي الثبات البصري

يمكن أن تكون متغيّرات التصميم مزعجة للغاية. يحظى الثبات البصري في مجموعة Telegraph Media Group (TMG) بأهمية خاصة، وذلك لأنّ القرّاء يستخدمون تطبيقاتنا بشكل أساسي لاستيعاب الأخبار. إذا تغير التخطيط أثناء قراءة مقالة، فمن المحتمل أن يفقد القارئ مكانه. وقد تكون هذه تجربة محبطة ومشتتة للانتباه.

من المنظور الهندسي، قد يمثّل التأكّد من عدم تغيّر الصفحات أو مقاطعة القارئ صعوبةً، خاصةً عندما يتم تحميل مناطق من تطبيقك بشكل غير متزامن وإضافتها بشكل ديناميكي إلى الصفحة.

في TMG، لدينا فِرق متعدّدة تساهم في توفير الرموز البرمجية من جهة العميل:

• الهندسة الأساسية: تنفيذ حلول تابعة لجهات خارجية لتعزيز مجالات مثل اقتراحات المحتوى والتعليق.
• التسويق: إجراء اختبارات A/B لتقييم كيفية تفاعل القرّاء مع الميزات أو التغييرات الجديدة
• الإعلانات: إدارة طلبات الإعلانات وتقديم عروض الأسعار المسبقة.
• المتطلبات التحريرية: تضمين رمز ضمن المقالات مثل التغريدات أو الفيديوهات، بالإضافة إلى التطبيقات المصغّرة المخصّصة (على سبيل المثال، أداة تتبُّع حالة فيروس كورونا)

وقد يكون من الصعب التأكّد من أنّ كلّ فريق من هذه الفِرق لا يتسبب في اهتزاز الصفحة. باستخدام مقياس متغيّرات التصميم التراكمية لقياس معدّل تكرار حدوثه للقرّاء، حصلت الفِرق على إحصاءات أكثر حول تجربة المستخدم الحقيقية وهدفًا واضحًا يجب السعي لتحقيقه. وأدّى ذلك إلى تحسُّن قيمة متغيّرات التصميم التراكمية (CLS) الخاصة بنا والبالغة 75% من 0.25 إلى 0.1، وزادت مجموعة التمرير من 57% إلى 72%.

المكان الذي بدأنا فيه

باستخدام لوحات بيانات CrUX، تمكّنا من التأكّد من أنّ صفحاتنا تتغير أكثر مما أردنا.

أردنا أن يكون لدى 75٪ على الأقل من القراء تجربة "جيدة"، لذلك بدأنا في تحديد أسباب عدم استقرار التصميم.

كيفية قياس متغيّرات التصميم

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

يُبرز 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 لنتمكّن من التحقيق في السبب. أعددنا أيضًا تقارير أسبوعية، حتى لو بقيت النماذج في الميزانية، نكون على دراية بأي تغييرات كان لها تأثير سلبي.

نخطط أيضًا لتوسيع ميزانياتنا لاستخدام بيانات RUM بالإضافة إلى البيانات الاصطناعية، وذلك باستخدام mPulse لضبط كل من التنبيهات الثابتة وإمكانية اكتشاف الحالات الشاذة والتي قد تجعلنا على دراية بأية تغييرات

من المهم بالنسبة إلينا أن نتعامل مع الميزات الجديدة مع وضع متغيّرات التصميم التراكمية في الاعتبار. الكثير من التغييرات التي ذكرتها هي تلك التي كان علينا إصلاحها بعد إتاحتها للقرّاء. سيكون استقرار التصميم في الاعتبار عند تصميم الحل لأي ميزة جديدة من الآن فصاعدًا حتى نتمكّن من تجنُّب أي تغييرات غير متوقعة في التصميم من البداية.

الخلاصة

كانت التحسينات التي أجريناها حتى الآن سهلة التنفيذ وقد كان لها تأثير كبير. لم يستغرق تقديم الكثير من التغييرات التي حددتها في هذه المقالة الكثير من الوقت وتم تطبيقها على جميع القوالب الأكثر استخدامًا مما يعني أنها كان لها تأثير إيجابي على نطاق واسع في القراء.

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