أدّى تحسين متغيّرات التصميم التراكمية (CLS) بمقدار 0.2 إلى زيادة بنسبة %15 في مشاهدات الصفحة لكل جلسة، ومدّة جلسات أطول بنسبة %13، وانخفاض بنسبة %1.72 في معدّل الارتداد.
حساب JAPAN هي واحدة من أكبر الشركات الإعلامية في اليابان، حيث تقدم أكثر من 79 مليار مشاهدة للصفحات شهريًا. منصتها الإخبارية، Yahoo! شركة JAPAN News هي التي تحقّق أكثر من 22 مليار مشاهدة للصفحات شهريًا، وفريق هندسي مخصّص لتحسين تجربة المستخدم.
ومن خلال المراقبة المستمرة لـ "مؤشرات أداء الويب الأساسية"، استطاعت الشركة ربط نتيجة متغيّرات التصميم التراكمية (CLS) التي سجّلها الموقع الإلكتروني بشكل أفضل من خلال زيادة بنسبة %15 في مشاهدات الصفحة لكل جلسة و% 13 في مدة الجلسة.
0.2
تحسين متغيّرات التصميم التراكمية (CLS)
زيادة بنسبة %15.1
زيادة في عدد مشاهدات الصفحة على الويب لكل جلسة
زيادة بنسبة %13.3
مدة الجلسة أطول
غالبًا ما يؤدي انتقال محتوى الصفحة بشكل غير متوقع إلى نقرات غير مقصودة، وتشوش الصفحة، وفي النهاية شعور المستخدم بالاستياء. يميل المستخدمون المحبطون إلى عدم البقاء لفترة طويلة. لإرضاء المستخدمين، يجب أن يظل تخطيط الصفحة مستقرًا خلال دورة حياة رحلة المستخدم بأكملها. بالنسبة إلى Yahoo! اليابان كان لهذا التحسين تأثير إيجابي كبير في مقاييس التفاعل المهمة في الأعمال.
للحصول على التفاصيل الفنية حول كيفية تحسين متغيّرات التصميم التراكمية (CLS)، يمكنك الاطّلاع على دليل Yahoo! مشاركة من فريق هندسة الأخبار في اليابان
تحديد المشكلة
تؤدي مراقبة "مؤشرات أداء الويب الأساسية"، بما في ذلك متغيّرات التصميم التراكمية (CLS)، دورًا أساسيًا في رصد المشاكل وتحديد مصدرها. في Yahoo! JAPAN News ، Search Console قدّمت نظرة عامة رائعة على مجموعات الصفحات التي تواجه مشاكل في الأداء، وساعدت Lighthouse في تحديد الفرص لكلّ صفحة من أجل تحسين تجربة الصفحة. باستخدام هذه الأدوات، اكتشفوا أن صفحة تفاصيل المقالة تحتوي على مقياس CLS ضعيف.
من المهم مراعاة الجزء التراكمي من متغيّرات التصميم التراكمية، حيث يتم تسجيل النتيجة خلال دورة حياة الصفحة بأكملها. في العالم الحقيقي، يمكن أن تتضمن النتيجة التحولات التي تحدث نتيجة لتفاعلات المستخدم مثل التمرير في الصفحة أو النقر على زر. لجمع نتائج متغيّرات التصميم التراكمية (CLS) من البيانات الفعلية، تكامل الفريق مع تقارير مكتبة JavaScript لبيانات أساسية على الويب.
استخدم الفريق "أدوات مطوري البرامج في Chrome" لتحديد العناصر التي كانت تُجري تغييرات في التصميم على الصفحة. مناطق متغيّرات التصميم في "أدوات مطوري البرامج" تعرض العناصر التي تساهم في متغيّرات التصميم التراكمية (CLS) من خلال تمييزها بمستطيل أزرق كلما حدث أي تغيير في التصميم.
اكتشفوا أن تغييرًا في التخطيط حدث بعد تحميل صورة الجزء الرئيسي في الجزء العلوي من المقالة للعرض الأول.
في المثال أعلاه، عند انتهاء تحميل الصورة، يتم دفع النص لأسفل (يشار إلى تغيير الموضع بالخط الأحمر).
تحسين متغيّرات التصميم التراكمية (CLS) للصور
بالنسبة إلى الصور ذات الحجم الثابت، يمكن منع متغيّرات التصميم من خلال تحديد السمتَين width
وheight في العنصر img واستخدام سمة CSS
aspect-ratio
المتوفّرة في المتصفّحات الحديثة. تجدر الإشارة إلى أنّ Yahoo! كانت خدمة JAPAN News لا تتطلّب فقط دعم المتصفّحات الحديثة، بل أيضًا المتصفّحات المثبَّتة في أنظمة تشغيل قديمة نسبيًا مثل iOS 9.
واستخدموا مربعات نسبة العرض إلى الارتفاع، وهي طريقة تستخدم الترميز لحجز المساحة في الصفحة قبل تحميل الصورة. تتطلّب هذه الطريقة معرفة نسبة العرض إلى الارتفاع للصورة مسبقًا، والتي تمكّنوا من الحصول عليها من واجهة برمجة التطبيقات الخلفية.
النتائج
انخفض عدد عناوين URL ذات الأداء السيء في Search Console بنسبة% 98 وانخفضت متغيّرات التصميم التراكمية (CLS) في البيانات الاختبارية من حوالي 0.2 إلى 0. والأهم من ذلك، كان هناك العديد من التحسينات ذات الصلة في مقاييس الأعمال.
عندما يبدأ Yahoo! قارنت شركة JAPAN News بمقاييس تفاعل المستخدمين قبل تحسين CLS وبعده، شهدت الشركة تحسينات متعدّدة:
زيادة بنسبة %15.1
زيادة في عدد مشاهدات الصفحة على الويب لكل جلسة
زيادة بنسبة %13.3
مدة الجلسة أطول
%*1.72
انخفاض معدّل الارتداد (*النسبة المئوية للنقاط)
من خلال تحسين متغيّرات التصميم التراكمية وغيرها من مقاييس "مؤشرات أداء الويب الأساسية" حصلت شركة JAPAN News أيضًا على تصنيف"الصفحة السريعة" في قائمة السياق في Chrome Android.
تؤدي تغيّرات التصميم إلى إحباط المستخدمين ومنعهم من قراءة المزيد من الصفحات، ولكن يمكن تحسين ذلك باستخدام الأدوات المناسبة وتحديد المشاكل وتطبيق أفضل الممارسات. ويُعدّ تحسين متغيّرات التصميم التراكمية (CLS) فرصة لتحسين نشاطك التجاري.
للحصول على مزيد من المعلومات، يمكنك الاطلاع على مقالة Yahoo! رسالة من فريق هندسة اليابان.