أدّى تحسين متغيّرات التصميم التراكمية (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 ضعيف.
![تقرير "مؤشرات أداء الويب الأساسية" في Google Search Console يعرض نسبة عالية من متغيّرات التصميم التراكمية (CLS) لصفحة تفاصيل المقالة](https://web.dev/static/case-studies/yahoo-japan-news/image/google-search-console-cor-65713bd9c58c3.png?authuser=6&hl=ar)
![أداة Lighthouse تبرُز تدقيق نوبات التصميم الكبيرة التي تُظهر عناصر DOm التي تساهم أكثر من غيرها في متغيّرات التصميم التراكمية (CLS) على الصفحة](https://web.dev/static/case-studies/yahoo-japan-news/image/lighthouse-avoid-large-la-23c5555fd5f8f.png?authuser=6&hl=ar)
من المهم مراعاة الجزء التراكمي من متغيّرات التصميم التراكمية، حيث يتم تسجيل النتيجة خلال دورة حياة الصفحة بأكملها. في العالم الحقيقي، يمكن أن تتضمن النتيجة التحولات التي تحدث نتيجة لتفاعلات المستخدم مثل التمرير في الصفحة أو النقر على زر. لجمع نتائج متغيّرات التصميم التراكمية (CLS) من البيانات الفعلية، تكامل الفريق مع تقارير مكتبة JavaScript لبيانات أساسية على الويب.
استخدم الفريق "أدوات مطوري البرامج في Chrome" لتحديد العناصر التي كانت تُجري تغييرات في التصميم على الصفحة. مناطق متغيّرات التصميم في "أدوات مطوري البرامج" تعرض العناصر التي تساهم في متغيّرات التصميم التراكمية (CLS) من خلال تمييزها بمستطيل أزرق كلما حدث أي تغيير في التصميم.
![صفحة تفاصيل المقالة تحتوي على مستطيلات زرقاء متراكبة على صورة الجزء الرئيسي والنص.](https://web.dev/static/case-studies/yahoo-japan-news/image/article-details-page-blu-565ff494e023.png?authuser=6&hl=ar)
اكتشفوا أن تغييرًا في التخطيط حدث بعد تحميل صورة الجزء الرئيسي في الجزء العلوي من المقالة للعرض الأول.
![لقطات شاشة لصفحة تفاصيل المقالة تعرض مقارنة جنبًا إلى جنب قبل متغيّرات التصميم وبعدها](https://web.dev/static/case-studies/yahoo-japan-news/image/screenshots-the-article-b6de7e5cb4ab7.jpg?authuser=6&hl=ar)
في المثال أعلاه، عند انتهاء تحميل الصورة، يتم دفع النص لأسفل (يشار إلى تغيير الموضع بالخط الأحمر).
تحسين متغيّرات التصميم التراكمية (CLS) للصور
بالنسبة إلى الصور ذات الحجم الثابت، يمكن منع متغيّرات التصميم من خلال تحديد السمتَين width
وheight
في العنصر img
واستخدام سمة CSS
aspect-ratio
المتوفّرة في المتصفّحات الحديثة. تجدر الإشارة إلى أنّ Yahoo! كانت خدمة JAPAN News لا تتطلّب فقط دعم المتصفّحات الحديثة، بل أيضًا المتصفّحات المثبَّتة في أنظمة تشغيل قديمة نسبيًا مثل iOS 9.
واستخدموا مربعات نسبة العرض إلى الارتفاع، وهي طريقة تستخدم الترميز لحجز المساحة في الصفحة قبل تحميل الصورة. تتطلّب هذه الطريقة معرفة نسبة العرض إلى الارتفاع للصورة مسبقًا، والتي تمكّنوا من الحصول عليها من واجهة برمجة التطبيقات الخلفية.
![لقطات شاشة لصفحة تفاصيل المقالة تعرض مقارنة جنبًا إلى جنب قبل تحسين متغيّرات التصميم التراكمية (CLS) وبعدها](https://web.dev/static/case-studies/yahoo-japan-news/image/screenshots-the-article-5191c90be0709.jpg?authuser=6&hl=ar)
النتائج
انخفض عدد عناوين URL ذات الأداء السيء في Search Console بنسبة% 98 وانخفضت متغيّرات التصميم التراكمية (CLS) في البيانات الاختبارية من حوالي 0.2 إلى 0. والأهم من ذلك، كان هناك العديد من التحسينات ذات الصلة في مقاييس الأعمال.
![تقرير Search Console يعرض انخفاضًا كبيرًا في عدد الصفحات التي تحتوي على مشاكل في الأداء](https://web.dev/static/case-studies/yahoo-japan-news/image/search-console-report-sho-a2a53f06e3baf.png?authuser=6&hl=ar)
عندما يبدأ Yahoo! قارنت شركة JAPAN News بمقاييس تفاعل المستخدمين قبل تحسين CLS وبعده، شهدت الشركة تحسينات متعدّدة:
زيادة بنسبة %15.1
زيادة في عدد مشاهدات الصفحة على الويب لكل جلسة
زيادة بنسبة %13.3
مدة الجلسة أطول
%*1.72
انخفاض معدّل الارتداد (*النسبة المئوية للنقاط)
من خلال تحسين متغيّرات التصميم التراكمية وغيرها من مقاييس "مؤشرات أداء الويب الأساسية" حصلت شركة JAPAN News أيضًا على تصنيف"الصفحة السريعة" في قائمة السياق في Chrome Android.
![تصنيف الصفحة السريعة في Chrome على نظام Android](https://web.dev/static/case-studies/yahoo-japan-news/image/fast-page-label-chrome-da3bd8521a851.png?authuser=6&hl=ar)
تؤدي تغيّرات التصميم إلى إحباط المستخدمين ومنعهم من قراءة المزيد من الصفحات، ولكن يمكن تحسين ذلك باستخدام الأدوات المناسبة وتحديد المشاكل وتطبيق أفضل الممارسات. ويُعدّ تحسين متغيّرات التصميم التراكمية (CLS) فرصة لتحسين نشاطك التجاري.
للحصول على مزيد من المعلومات، يمكنك الاطلاع على مقالة Yahoo! رسالة من فريق هندسة اليابان.