استقرار التصميم

ما هو CLS

CLS اختصار يعني «التزحزح التراكمي للتخطيط» — مجموع كل التحرّكات غير المتوقّعة للتخطيط أثناء تحميل الصفحة. كل مرّة عنصر يقفز فجأة من مكانه، CLS يزيد. المتصفّح يجمع كل هذه القفزات في رقم واحد (٠ إلى ١+).

النقطة الحرجة: هذا التزحزح يحدث في اللحظات الأولى من تحميل الصفحة — حين يكون المستخدم عنده المؤشّر على الشاشة، يستعدّ للنقر. لو القائمة قفزت لتحت بمئة بكسل، نقرته تذهب لمكان لم يقصده.

الأرقام

• أقل من ٠.١ — جيد. لا يلاحظ المستخدم أي قفزات.
• بين ٠.١ و٠.٢٥ — يحتاج تحسين. قفزات بسيطة محسوسة.
• أكثر من ٠.٢٥ — سيّء. قفزات تربك المستخدم وتؤذي سهولة الاستخدام.

CLS هو المؤشّر الذي يبدو 'صغير' لكنّه قاتل. ٠.٤ يبدو رقماً صغيراً — لكنه يعني أن نصف الصفحة تتحرّك أثناء التحميل.

أسباب CLS في متاجر سلة وزد

1. صور بدون أبعاد محدّدة — المتصفّح لا يعرف ارتفاع الصورة قبل تحميلها، فيحجز ٠ بكسل، ثم يدفع المحتوى لتحت لما تصل الصورة.
2. الإعلانات أو اللافتات تُحقن في أعلى الصفحة بعد التحميل، فتدفع كل المحتوى لتحت.
3. لافتات ملفات التتبّع أو الموافقة تظهر بعد ثانية وتغطّي جزء من المحتوى أو تدفعه.
4. خطوط الويب تحمّل متأخرة، فتغيّر حجم الخط وارتفاع السطر عند الوصول.
5. المحتوى المتغيّر (عدّادات حيّة، 'يشاهد الآن كذا زائر'، 'العرض ينتهي خلال') يُحقن بدون مساحة محجوزة.

أمثلة محسوسة

المستخدم يفتح صفحة منتج. يقرأ السعر — ١٢٠ ر.س. يضغط 'أضف للسلة'. في اللحظة الأخيرة، لافتة خصومات تظهر فوق السعر، تدفع الصفحة لتحت، نقرته تذهب على 'أزل من السلة' (لو كان عنده شيء من قبل) أو على رابط آخر تماماً. الإحباط فوري، الثقة تتزعزع.

هذا ليس سيناريو متخيّل — هذا حدث في كل تشخيص شاهدنا فيه CLS فوق ٠.٢. والمالك لا يعرف. لأن المالك يفتح متجره من حاسوب محمول سريع وكل شيء يبدو 'في مكانه'.

كيف نُصلحها

1. كل صورة يجب أن يكون لها width و height في الـHTML. ليس CSS — في الـHTML نفسه. هذا يخبر المتصفّح بالمساحة المحجوزة قبل تحميل الصورة.
2. الأشرطة الدوّارة الرئيسية: حدّد ارتفاعاً ثابتاً بخاصية aspect-ratio في CSS، حتى تكون المساحة محجوزة حتى لو فشل تحميل الصور.
3. لافتة ملفات التتبّع: ضعها في الأسفل (تظهر من القاع بتثبيت fixed)، لا في الأعلى. لا تدفع المحتوى.
4. خطوط الويب: استخدم font-display: optional أو swap-block لمنع إعادة التدفّق الكبيرة. أو حمّل الخط الأساسي مسبقاً بـpreload.
5. الأدوات المتغيّرة: احجز مساحة فارغة (هيكل مؤقّت) قبل تحميل المحتوى الحقيقي.

في سلة وزد تحديداً

كثير من قوالب سلة تأتي بصور بدون خاصيتَي width/height. هذا اختيار قديم من مصمّمي القوالب. الحلّ: لو متجرك على قالب مخصّص، اطلب من المطوّر إضافة الأبعاد. لو على القالب الافتراضي، اطلب من فريق دعم سلة تحديثه — قد لا يكون بإمكانك ذلك مباشرة.

زد أحدث في هذه النقطة، عادة القوالب الافتراضية فيها تحجز مساحة للصور. لكن التطبيقات الإضافية قد تكسر ذلك.

الـCLS هو المؤشّر الذي يكشف هل صمّمت موقعك من حاسوب سريع، أم اختبرته على جوّال ٤G. تجربة المستخدم الصادقة تحدث في الظروف الحقيقية.

الخلاصة

CLS = القفزات. كل قفزة = ثقة مكسورة. كل ثقة مكسورة = ارتداد محتمل. المؤشّر يبدو صغيراً، لكنّ تأثيره مركّب — يضرب الـSEO وأحياناً التحويل في نفس الوقت.

افتح متجرك على جوّال، مرّر عبر الصفحة الرئيسية، صفحة منتج، صفحة عربة. لو تحسّ أيّ شيء يقفز — حتى لو ميلي ثانية واحدة — أنت عندك مشكلة CLS تحتاج إصلاحاً.