ما هو عامل CLS و كيفية معالجته

يعتبر تحديد ومعالجة عامل Cumulative Layout Shift (CLS) جزءاً أساسياً في تحسين تجربة المستخدم على المواقع الإلكترونية. إذ يقيس CLS، أو التغيير التراكمي في التخطيط استقرار الصفحة بصرياً أثناء تحميلها، معتمداً على حجم العناصر ومدى حركتها. كونه أحد المقاييس الثلاثة الرئيسية لـ Core Web Vitals التي تستخدمها جوجل لتقييم تجربة الصفحة، فإن فهم CLS وكيفية تحسينه أصبح ضرورياً لكل مطوري الويب لضمان توفير تجربة مستخدم سلسة وخالية من المشاكل.

ما هو CLS؟

Cumulative Layout Shift (CLS) هو مقياس لاستقرار المحتوى المرئي لصفحة الويب أثناء تحميلها. حيث يتم حساب CLS خلال نافذة الخمس ثواني التي تحدث فيها أكبر تحولات في التخطيط. كما تكمن أهمية CLS في كونه يقيس مدى إزعاج المستخدم عندما يحاول النقر على شيء ما في الصفحة ولكنه يجد نفسه قد نقر على شيء آخر بسبب تحرك الصفحة. وهنا يعتبر CLS أقل من 0.1 جيدًا، حيث يتم تصنيف الصفحات ضمن فئات “جيد”، “يحتاج إلى تحسين”، أو “ضعيف” بناءً على هذا المعيار.

أسباب CLS

هناك العديد من الأسباب التي يمكن أن تؤدي إلى CLS ، بما في ذلك:

تحميل الصور أو المكونات الأخرى الكبيرة بشكل غير متوازن

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

تغيير حجم العناصر بعد تحميلها

تغيير حجم العناصر بعد تحميلها على صفحة الويب يمكن أن يسبب تأثيراً سلبياً في معيار Cumulative Layout Shift (CLS). هذا التغيير يؤثر على استقرارية الصفحة، مما يجعل تجربة المستخدم أقل سلاسة. من الأهمية بمكان تحديد أبعاد العناصر بشكل صريح في الكود الأولي للصفحة للحفاظ على ثبات التخطيط. هذه الخطوة تقلل من احتمالية حدوث تحولات مفاجئة أثناء تحميل الصفحة، مما يساهم في تحسين قياس CLS وتعزيز أداء الصفحة بشكل عام.

إخفاء العناصر ثم إظهارها مرة أخرى

إخفاء العناصر ثم إظهارها مرة أخرى على صفحة الويب يمكن أن يؤثر على معيار Cumulative Layout Shift (CLS). هذه التقنية، رغم فعاليتها في بعض السيناريوهات، قد تسبب تحولات غير متوقعة في التخطيط، مما يزيد من قيمة CLS. من المهم إدارة هذا الأمر بدقة، مثلاً باستخدام CSS و JavaScript، للتحكم في ظهور وإخفاء العناصر بطريقة تحافظ على استقرارية التخطيط وتقدم تجربة مستخدم سلسة.

كيفية تحسين CLS

هناك العديد من الطرق لتحسين CLS ، بما في ذلك:

تقسيم الصور الكبيرة إلى أجزاء أصغر

تقسيم الصور الكبيرة إلى أجزاء أصغر يُعد تقنية فعالة لتحسين أداء المواقع الإلكترونية. من خلال تحديد الأبعاد المحجوزة للصور في وسم <img>، يمكن التحكم في الفضاء الذي تشغله الصورة، مما يقلل من Cumulative Layout Shift (CLS). للصور المتجاوبة، يُفضل استخدام خاصية srcset لتحديد مجموعة من الأحجام المختلفة، بحيث يختار المتصفح الأنسب بناءً على حجم الشاشة. هذه الطريقة تضمن عدم تأثر تخطيط الصفحة بحجم الصورة، وتحافظ على استقرارها أثناء التحميل.

استخدام التخطيطات المستقرة

استخدام التخطيطات المستقرة في تصميم المواقع الإلكترونية أساسي لتقليل Cumulative Layout Shift (CLS). لتحقيق هذا، يجب تحميل الخطوط بسرعة وتجنب تغييرها بعد التحميل. استخدام خطوط النظام يوفر هذه الميزة، حيث لا يوجد تأخير أو تغيير يسبب ازاحة. للخطوط المخصصة، يُفضل دمج <link rel=”preload”> لتحميل الخط بسرعة، وخاصية font-display: optional لمنح الخط فرصة للتحميل خلال وقت قصير. إذا لم يتحمل الخط في الوقت المحدد، ستظهر الصفحة بخط افتراضي ويتم تخزين الخط المخصص لاستخدامه في التحميلات اللاحقة.

 

تجنب إخفاء العناصر ثم إظهارها مرة أخرى

تجنب إخفاء العناصر ومن ثم إظهارها مرة أخرى أمر حاسم لتقليل Cumulative Layout Shift (CLS) في تصميم المواقع. بعض قيم خصائص CSS مثل “box-shadow”، “box-sizing”، “top”، و”left”، قد تتسبب في تغييرات غير متوقعة في التخطيط. يُفضل استخدام التحولات باستخدام خاصية “transform” للتحريك، فهي لا تؤدي إلى تغييرات كبيرة في التخطيط وتساعد في تقديم تجربة مستخدم سلسة دون التأثير سلبًا على CLS.

أدوات تحسين Cumulative Layout Shift 

هناك العديد من الأدوات المتاحة لمساعدتك على تحسين CLS ، بما في ذلك:

Google PageSpeed Insights

تحسين Cumulative Layout Shift (CLS) أمر ضروري لتعزيز تجربة المستخدم، ومن بين الأدوات المتاحة التي تقيس سرعة الموقع لهذا الغرض تبرز Google PageSpeed Insights. توفر هذه الأداة تحليلات مفصلة حول أداء صفحات الويب، بما في ذلك تقييمات CLS، وتقدم توصيات محددة لتحسين ثبات التخطيط. باستخدام Google PageSpeed Insights، يمكن لمطوري الويب تحديد ومعالجة العوامل التي تسهم في تقلبات التخطيط، وبالتالي تحقيق تحميل صفحات أكثر سلاسة واستقرارًا.

Lighthouse

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

CLS Checker

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

خاتمة

في الختام يمكننا القول أنه منذ إدخال Cumulative Layout Shift (CLS)، شهدنا تقدمًا ملحوظًا في تقنيات مثل bfcache وخاصية CSS aspect-ratio التي تساعد في معالجة هذه المشكلة. كما من المتوقع في المستقبل رؤية المزيد من الابتكارات وطرق جديدة لمنع تحولات التخطيط. هذه الجهود تُظهر التزام المطورين بتحسين تجربة المستخدم على الإنترنت وتعزيز فعالية تصميم الويب.