ما درجة CLS الجيدة؟

0.1 أو أقل تُعد "جيدة". من 0.1 إلى 0.25 تحتاج تحسينًا، وما فوق 0.25 يُعد "ضعيفًا". الدرجة بلا وحدة قياس - وهي مجموع مدى تحرك العناصر المرئية، مرجّحًا بمقدار ما تشغله من إطار العرض.

هل يُحتسب تحول التخطيط إذا حدث بسرعة؟

نعم. لا يهتم CLS بالسرعة، بل بالمسافة والمساحة فقط - تحول خاطف يُحرّك عنصرًا كبيرًا لا يزال يُضيف الدرجة نفسها التي يُضيفها تحول بطيء. التحولات الوحيدة المستثناة هي تلك التي تحدث خلال 500 مللي ثانية من تفاعل المستخدم مثل نقرة أو لمسة.

لماذا يبدو CLS جيدًا محليًا لكنه سيء في تقرير Scanverra؟

غالبًا ما يُحمّل الاختبار المحلي على اتصال سريع الإعلانات والخطوط والتضمينات قبل أن تلاحظ أي تحول. تقيس Scanverra تسلسل العرض الحقيقي مقابل عنوان URL الحي لديك، ما يكشف تحولات لا تظهر إلا في توقيت شبكة واقعي.

هل تُحتسب الترويسات الثابتة أو شرائط ملفات تعريف الارتباط ضد CLS؟

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

كيفية إصلاح تحول التخطيط التراكمي (CLS)

لماذا تتحرك صفحتك

يكاد كل مشكلة CLS تأتي من أحد ثلاثة مصادر:

صور وإطارات iframe بلا أبعاد محجوزة. إذا لم يعرف المتصفح حجم الصورة قبل تحميلها، فإنه يعرض المربع بارتفاع صفر، ثم يدفع كل ما تحته للأسفل فجأة لحظة وصول الصورة.
محتوى يُدرج فوق محتوى موجود مسبقًا. الإعلانات، وأشرطة الترويج، وشرائط ملفات تعريف الارتباط التي تُدرج في DOM بعد العرض الأولي تدفع كل ما تحتها للأسفل.
خطوط ويب تعيد تدفق النص عند التبديل. يُعرض خط احتياطي أولاً، ثم يُحمّل الخط الحقيقي ويحل محله بعرض/ارتفاع مختلف، ما يعيد تدفق كل سطر يمسّه.

كيفية تحديد ما الذي يتحرك

تُقيّم فحوصات الأداء في Scanverra قيمة CLS مباشرة من تشغيل Lighthouse حقيقي على عنوان URL الحي لديك، باستخدام المقياس نفسه cumulative-layout-shift الذي تُبنى عليه بيانات Google الميدانية. عندما تكون القيمة مرتفعة، تُبلّغ عنها Scanverra كمشكلة منفصلة - ليست مجرد رقم، بل مشكلة مُسمّاة - لأن التخطيط غير المستقر يكسر أمرًا آخر أيضًا: وكيل ذكاء اصطناعي أو أداة آلية تحاول النقر على زر تحرّك للتو ستستهدف العنصر الخطأ.

للعثور على العنصر المحدد المسبب للمشكلة، يسجّل لوح Performance في Chrome DevTools إدخالات "Layout Shift" مع العقدة الدقيقة التي تحركت ومقدار تحركها - افتحه، وسجّل تحميل صفحة، وابحث عن علامات تحول التخطيط الحمراء في مسار Experience.

كيفية إصلاحه

1. احجز المساحة بأبعاد صريحة

ينبغي أن تُعلن كل صورة وفيديو وإطار iframe عرضه وارتفاعه (أو تستخدم خاصية CSS الحديثة aspect-ratio) حتى يتمكن المتصفح من تخصيص المربع الصحيح قبل وصول المورد:

العرض/الارتفاع الصريحان يحجزان المربع مسبقًاtypescript

1<img
2  src="/product.webp"
3  alt="Wireless keyboard, top view"
4  width={640}
5  height={480}
6  loading="lazy"
7/>

عندما يتفاوت الحجم الدقيق بالبكسل (تضمين متجاوب، مثلًا)، استخدم CSS بدلاً من ذلك:

يحجز aspect-ratio المساحة بلا أبعاد بكسل ثابتةcss

1.video-embed {
2  width: 100%;
3  aspect-ratio: 16 / 9;
4}

2. امنح المحتوى المُدرج ديناميكيًا فتحة بارتفاع ثابت

إذا كان يجب إدراج شريط ملفات تعريف ارتباط، أو فتحة إعلان، أو شريط ترويج بعد العرض الأولي، امنح الحاوية الخاصة به min-height محجوزًا من البداية بدلاً من تركه يدفع المحتوى للأسفل عند وصوله - حتى مربع نائب فارغ يمنع التحول.

3. طابق مقاييس خطك الاحتياطي مع الخط الحقيقي

استخدم font-display: swap مقترنًا بخط احتياطي يقترب ارتفاع الأحرف الصغيرة فيه ومتوسط عرض الحرف من خطك الحقيقي (يمكن لأدوات مثل Fontaine أو size-adjust اليدوي في كتلة @font-face مطابقتهما)، حتى لا يُعيد التبديل تدفق السطر بشكل مرئي.

4. لا تُدرج محتوى أبدًا فوق موضع التمرير الحالي للمستخدم

إذا كان لا بد من ظهور محتوى جديد - شريط "منشورات جديدة متاحة"، مثلًا - أدرجه أسفل الصفحة أو اطلب إجراءً من المستخدم لإظهاره، بدلاً من إدراجه فوق ما هو مرئي بالفعل.

كيف تكتشف Scanverra مشاكل CLS

تُشغّل Scanverra تمريرة Lighthouse حقيقية على عنوان URL الحي لديك وتقرأ القيمة الفعلية cumulative-layout-shift منه - نفس التشغيل المستخدم لـ LCP وTTFB - وتُبلغ عن مشكلة مخصصة عندما تكون مرتفعة، مع وصف مرتبط بسبب أهمية عدم استقرار التخطيط تحديدًا لأي جهة (بشرية أو آلية) تحاول التفاعل مع صفحتك.