ما المقصود بـCLS (التحوّل التراكمي في التخطيط)؟
يقيس CLS (Cumulative Layout Shift) مقدار تحرك المحتوى المرئي بشكل غير متوقع أثناء فتح الصفحة؛ والدرجة الجيدة هي 0.1 أو أقل.
التحوّل التراكمي في التخطيط (Cumulative Layout Shift — CLS) يقيس الثبات البصري — مقدار قفز المحتوى بشكل غير متوقع أثناء استخدام أحدهم للصفحة. تعرف هذا الشعور: تمد يدك إلى رابط فيحمَّل إعلان فوقه، فتنقر على الشيء الخطأ. يحوّل CLS هذا الانزعاج إلى رقم، وهو أحد مؤشرات الويب الأساسية الثلاثة.
كيف تعمل الدرجة
يُقيَّم كل تحوّل غير متوقع بحاصل كسر الأثر × كسر المسافة: أي مقدار ما تؤثر فيه العناصر المتحركة من إطار الرؤية، مضروبًا في مدى حركتها نسبةً إلى إطار الرؤية. وتُجمَّع التحولات في «نوافذ جلسة» — دفعات تحدث فيها التحولات بفارق أقل من ثانية، بحد أقصى خمس ثوانٍ — وCLS هو درجة أسوأ نافذة، لا مجموع الزيارة كلها (web.dev: CLS).
وتُستبعد التحولات التي تحدث خلال 500 ms من نقرة أو لمسة أو ضغطة مفتاح، لأن الحركة المتوقعة، كانفتاح قائمة أكورديون، لا بأس بها.
الحدود
الجيد هو 0.1 أو أقل، والضعيف فوق 0.25، عند المئين 75 من الزيارات الفعلية. وليس لـ CLS وحدة؛ فهو درجة لا زمن.
الأسباب الشائعة والإصلاحات
| السبب | الإصلاح |
|---|---|
| صور وفيديوهات بلا أبعاد | اضبط السمتين width وheight، أو خاصية CSS aspect-ratio |
| إعلانات وتضمينات وiframes تُحمَّل متأخرة | احجز المكان بـ min-height |
| لافتات ملفات تعريف الارتباط وأشرطة العروض المُدرجة في الأعلى | اجعلها طبقة فوق المحتوى (overlay)، أو احجز مساحتها من البداية |
| تبديل الخطوط الذي يعيد تدفق النص | حمّل الخطوط المهمة مسبقًا (preload) وعدّل الخط الاحتياطي بـ size-adjust |
تحريك top أو height أو margin | حرّك transform وopacity بدلًا منها |
مثال: أعطِ المتصفح الشكل مسبقًا
<img src="/img/chart.webp" width="800" height="450" alt="Monthly sales chart">
<style>
img { max-width: 100%; height: auto; } /* ما زال متجاوبًا */
.ad-slot { min-height: 250px; } /* مساحة لإعلان 300×250 */
</style>مع وجود العرض والارتفاع، تحسب المتصفحات الحديثة نسبة الأبعاد قبل وصول الملف وتُبقي تلك المساحة مفتوحة بدل أن تنهار إلى صفر.
أخطاء شائعة
- اختبار التحميل الأول فقط في أداة مختبر. يواصل CLS العدّ أثناء تمرير الناس، فالتغذيات اللانهائية والإعلانات المتأخرة التحميل كثيرًا ما تظهر في بيانات الميدان وحدها.
- صور محمّلة تحميلًا كسولًا بلا أبعاد. فـالتحميل الكسول وتحولات التخطيط يسيران معًا كثيرًا.
- شاشات الهيكل العظمي (Skeleton) التي لا تطابق التخطيط النهائي في تطبيقات الصفحة الواحدة، فيتحرك كل شيء حين يحل المحتوى الحقيقي محلها.
- إدراج «مقالات ذات صلة» أو صناديق النشرة البريدية في منتصف المقال بعد التحميل.
اختبار سريع: حمّل صفحتك على هاتف باتصال مُبطَّأ وراقب أول خمس ثوانٍ. أي شيء يتحرك دون أن تلمس الشاشة يكلّفك درجة في CLS.
افحصه
تعرض أداة اختبار سرعة الصفحة قيمة CLS الميدانية من PageSpeed Insights حين تتوفر. وتسرد أداة فحص الصور كل صورة في الصفحة مع أبعادها وتنبّه إلى الصور المعرّضة لتحولات التخطيط.
الأسئلة الشائعة
ما هي درجة CLS الجيدة؟
تعدّ جوجل 0.1 أو أقل جيدة وأي شيء فوق 0.25 ضعيفًا، عند المئين 75 من زيارات الصفحة الفعلية على الجوال وسطح المكتب كلٌّ على حدة.
هل يحتسب CLS تحولات التخطيط التي تحدث أثناء التمرير؟
نعم. يُقاس CLS طوال الزيارة، فالمحتوى الذي يتحول أثناء التمرير يُحتسب أيضًا. ولا تُستبعد إلا التحولات خلال 500 ms من نقرة أو لمسة أو ضغطة مفتاح.
لماذا يختلف CLS في Lighthouse عنه في بيانات الميدان؟
يقيس Lighthouse تحميلًا واحدًا للصفحة دون تمرير أو تفاعل. أما بيانات الميدان فتسجل زيارات كاملة لمستخدمين حقيقيين، بما فيها الإعلانات المتأخرة ولافتات ملفات تعريف الارتباط والتمرير اللانهائي، لذا تُظهر غالبًا CLS أعلى.