CLS (الإزاحة التخطيطية التراكمية)

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

ما هي الإزاحة التخطيطية ولماذا تزعج المستخدم

الإزاحة التخطيطية هي أن يبدأ عنصر مرئي في موضع ثم يقفز إلى موضع آخر بعد أن رآه المستخدم ودون أن يتفاعل معه. تحدث لأن المتصفّح يرسم الصفحة على مراحل: يعرض ما توفّر من نصٍّ أولًا، ثم تصل صورة أو إعلان أو خطّ مخصّص فيُعاد ترتيب ما حوله ويُدفع لأسفل. النتيجة المزعجة معروفة للجميع: تهمّ بالضغط على زرّ «إلغاء» فيتزحزح في اللحظة ذاتها ويحلّ محلّه زرّ «تأكيد»، أو تقرأ سطرًا فيقفز بعيدًا عن عينيك. هذا الاضطراب البصري يكسر الثقة ويرفع نسبة الخطأ في النقر، ولذلك جعلت Google من ثبات التخطيط أحد مؤشّرات Core Web Vitals الثلاثة التي تؤثّر في ترتيب البحث وفي جودة التجربة معًا.

كيف يُحسب المؤشّر وما العتبة

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

الأسباب الرئيسية

أكثر الأسباب شيوعًا هو إدراج صور أو فيديوهات دون تحديد width وheight (أو نسبة أبعاد)، فيحجز المتصفّح ارتفاعًا صفريًّا ثم يتمدّد فجأة حين يعرف المقاس الحقيقي. يليه حقن الإعلانات والإطارات المضمّنة (embeds) بعد رسم الصفحة، إذ تظهر متأخّرة فتدفع المحتوى أسفلها. ثالثًا إعادة الرسم الناتجة عن الخطوط المخصّصة: يعرض المتصفّح خطًّا احتياطيًّا أولًا ثم يبدّله بالخطّ المحمّل بأبعاد مختلفة (ظاهرتا FOUT وFOIT)، فيتغيّر ارتفاع الأسطر. ومن الأسباب كذلك إقحام محتوى ديناميكي (لافتة، إشعار، رسالة موافقة على الكوكيز) فوق محتوى رآه المستخدم بالفعل، فيُزاح كلّ ما تحته.

كيف تعالجه

العلاج الجوهري هو حجز المساحة مسبقًا قبل وصول المحتوى. حدّد دائمًا أبعاد الصور والوسائط أو نسبة الأبعاد عبر aspect-ratio كي يعرف المتصفّح المساحة قبل التحميل. احجز كتلة ثابتة لكلّ عنصر ديناميكي معروف الحجم: مكان الإعلان، شريط الإشعارات، الفيديو المضمّن. أمّا الخطوط فوازن بين القيم: تمنح font-display: optional أقلّ إزاحة لأنّها لا تبدّل الخطّ بعد فوات لحظة قصيرة، بينما تضمن swap ظهور النص فورًا لكن بإزاحة محتملة عند التبديل؛ ويساعد تقريب أبعاد الخطّ الاحتياطي من الأصلي. وتجنّب إقحام أي محتوى فوق ما يراه المستخدم إلا استجابةً لتفاعله.

الميدان مقابل المختبر

يُقاس CLS عبر عمر الصفحة كاملًا لا في لحظة واحدة، فقد يبدو ثابتًا عند التحميل ثم يتزحزح حين يمرّر المستخدم وتُحمَّل عناصر متأخّرة. لذلك تختلف قراءة المختبر (lab) — كأدوات مثل Lighthouse التي تقيس في بيئة محكومة لحظة التحميل — عن قراءة الميدان (field) المجمَّعة من زيارات مستخدمين حقيقيين بظروف أجهزة وشبكات متباينة. اعتمد بيانات الميدان حكمًا نهائيًّا، واستعن بالمختبر لتشخيص الأسباب وإصلاحها قبل النشر.