ما هو CLS (Cumulative Layout Shift)؟ طريقة حسابه وأسبابه و6 خطوات لتحسينه
Cumulative Layout Shift (CLS) أو “التغير التراكمي في التخطيط” هو أحد مؤشرات أداء الويب الأساسية من Google، ويقيس الثبات البصري للصفحة: كم تتحرك العناصر فجأة أثناء تصفحها، مثل نص يقفز للأسفل عند ظهور صورة أو إعلان. القيمة الجيدة هي 0.1 أو أقل، والضعيفة أكبر من 0.25. أكثر أسبابه شيوعاً: صور بلا أبعاد محددة، وإعلانات ومحتوى مضمّن بلا مساحة محجوزة، ومحتوى يُضاف ديناميكياً، والخطوط.
أهم النقاط باختصار
- CLS جيد: 0.1 أو أقل. يحتاج تحسين: بين 0.1 و0.25. ضعيف: أكثر من 0.25، ويُقاس عند النسبة المئوية 75 من زيارات الجوال والكمبيوتر كلٌ على حدة.
- يُحسب CLS من أكبر “نافذة” من التحولات المتتالية: تحولات تفصل بينها أقل من ثانية، ومدة النافذة 5 ثوانٍ كحد أقصى.
- التحولات التي تحدث خلال 500 مللي ثانية من نقرة أو ضغطة المستخدم لا تُحتسب.
- أهم إصلاح: حدد width وheight لكل الصور والفيديوهات، واحجز مساحة للإعلانات والمحتوى المتأخر.
- أدوات المختبر مثل Lighthouse تقيس التحميل فقط، وقد تظهر CLS أقل مما يراه المستخدمون الحقيقيون.
ما هو CLS؟
يحدث “تحول التخطيط” عندما يغيّر عنصر ظاهر في الصفحة موضعه بين إطارين دون أن يتسبب المستخدم في ذلك. المشكلة مزعجة: تحاول الضغط على زر فتنزل الصفحة فجأة وتضغط على إعلان. لذلك يعد CLS واحداً من ثلاثة مؤشرات أساسية تقيس بها Google تجربة الصفحة، إلى جانب LCP لسرعة ظهور المحتوى الرئيسي وINP لسرعة الاستجابة. وللصورة الكاملة راجع دليل السيو التقني.
| التقييم | قيمة CLS |
|---|---|
| جيد | 0.1 أو أقل |
| يحتاج إلى تحسين | أكبر من 0.1 حتى 0.25 |
| ضعيف | أكبر من 0.25 |
كيف يُحسب CLS؟
- درجة كل تحول = نسبة التأثير × نسبة المسافة. نسبة التأثير هي مساحة الشاشة التي تأثرت بالتحول، ونسبة المسافة هي المسافة التي تحركتها العناصر مقارنة بأكبر بعد للشاشة.
- نوافذ التحول: تُجمع التحولات المتتالية في “نافذة” إذا فصلت بينها أقل من ثانية، ولا تتجاوز النافذة 5 ثوانٍ.
- القيمة النهائية: CLS هو مجموع درجات النافذة الأعلى خلال عمر الصفحة كاملاً، وليس أثناء التحميل فقط.
- ما لا يُحتسب: التحولات خلال 500 مللي ثانية من نقرة أو ضغطة أو ضغطة مفتاح من المستخدم، لأنها متوقعة. أما التمرير والسحب فلا تُعد إدخالاً، فالتحولات بعدها تُحتسب.
أسباب CLS وطرق إصلاحها
| السبب | الإصلاح |
|---|---|
| صور وفيديوهات بلا أبعاد | أضف width وheight أو aspect-ratio في CSS |
| إعلانات وiframes ومحتوى مضمّن | احجز مساحة بـ min-height أو aspect-ratio، واترك مكاناً ثابتاً حتى لو لم يظهر الإعلان |
| محتوى يُضاف بعد التحميل (بانرات، نماذج، إشعارات) | احجز المساحة مسبقاً، أو اعرضه فوق المحتوى بدل دفعه للأسفل |
| الخطوط المخصصة | font-display: optional، وخط بديل قريب، وتحميل مسبق للخطوط المهمة |
| الحركات والتأثيرات | استخدم transform بدلاً من تغيير top وleft وأبعاد العناصر |
خطوات تحسين CLS في موقعك
1. حدد أبعاد كل الصور والفيديوهات
أضف خاصيتي width وheight لكل صورة وفيديو، أو استخدم aspect-ratio في CSS، مع height: auto وwidth: 100% للصور المتجاوبة. هكذا يحجز المتصفح المساحة قبل تحميل الصورة. ووردبريس يضيف الأبعاد تلقائياً للصور المرفوعة عبر المحرر، لكن تحقق من الصور في القوالب والإضافات.
2. احجز مساحة للإعلانات والمحتوى المضمّن
حدد ارتفاعاً أدنى لمساحات الإعلانات وفيديوهات يوتيوب والخرائط والنماذج المضمنة. وإذا كان حجم الإعلان متغيراً، احجز أصغر حجم محتمل، واجعل الإعلانات المتأخرة أسفل الصفحة بدل أعلاها.
3. لا تُدخل محتوى فوق المحتوى الموجود
بانرات الكوكيز والعروض والاشتراك في النشرة يجب أن تظهر فوق الصفحة (كطبقة) أو في مساحة محجوزة، لا أن تدفع المحتوى للأسفل. وللقوائم الطويلة استخدم زر “تحميل المزيد” بدل الإضافة التلقائية.
4. حسّن تحميل الخطوط
استخدم font-display: optional أو swap مع خط بديل مشابه في الحجم، وحمّل الخطوط الأساسية مسبقاً بـ link rel=”preload”، وقلل عدد أوزان الخطوط المستخدمة.
5. استخدم transform في الحركات
حرّك العناصر بـ transform (translate وscale) بدلاً من تغيير الموضع أو الأبعاد، لأن الأخيرة تجبر المتصفح على إعادة حساب التخطيط وتسبب تحولات.
6. قِس النتيجة ببيانات المستخدمين الحقيقيين
بعد الإصلاح، راقب تقرير مؤشرات أداء الويب في Search Console وبيانات المستخدمين في PageSpeed Insights، لأنها تعكس التحولات التي تحدث بعد التحميل أيضاً.
أدوات قياس CLS وتشخيصه
| الأداة | نوع البيانات | الاستخدام |
|---|---|---|
| PageSpeed Insights | مستخدمون حقيقيون + مختبر | قارن CLS الحقيقي بالمختبر؛ الفرق الكبير يعني تحولات بعد التحميل |
| Search Console | مستخدمون حقيقيون | تقرير مؤشرات أداء الويب يجمع الصفحات المتشابهة ذات المشكلة |
| Lighthouse | مختبر | يكشف الصور بلا أبعاد والعناصر التي تحركت |
| Chrome DevTools (Performance) | مختبر وأثناء التصفح | مسار Layout Shifts و”مسببات تحول التخطيط”، والمقاييس المباشرة أثناء التفاعل |
| مكتبة web-vitals | مستخدمون حقيقيون | جمع CLS والعناصر المسببة من زوار موقعك |
للمزيد من الأدوات راجع أفضل أدوات قياس سرعة الموقع ودليل أداة GTmetrix.
الأسئلة الشائعة
ما هو CLS باختصار؟
هو مؤشر من Google يقيس مدى تحرك عناصر الصفحة بشكل غير متوقع أثناء التصفح. كلما كانت القيمة أقل كانت الصفحة أكثر ثباتاً، والقيمة الجيدة 0.1 أو أقل.
ما هي القيمة الجيدة لـ CLS؟
0.1 أو أقل تعتبر جيدة، وبين 0.1 و0.25 تحتاج إلى تحسين، وأكثر من 0.25 تعتبر ضعيفة، وتُقاس عند النسبة المئوية 75 من زيارات المستخدمين.
ما أكثر أسباب ارتفاع CLS؟
الصور والفيديوهات بلا أبعاد محددة، والإعلانات والمحتوى المضمّن بلا مساحة محجوزة، والمحتوى الذي يُضاف بعد التحميل فوق المحتوى الموجود، والخطوط المخصصة التي تغير حجم النص عند تحميلها.
لماذا يختلف CLS في Lighthouse عن PageSpeed Insights؟
Lighthouse يقيس أثناء التحميل فقط في بيئة مختبر، بينما بيانات المستخدمين الحقيقيين في PageSpeed Insights تشمل التحولات التي تحدث أثناء التمرير والتفاعل بعد التحميل، لذلك تكون غالباً أعلى.
هل يؤثر CLS على ترتيب الموقع في جوجل؟
مؤشرات أداء الويب الأساسية، ومنها CLS، جزء من إشارات تجربة الصفحة التي تستخدمها أنظمة الترتيب في Google، لكن المحتوى المفيد والملائم يبقى الأهم. تحسين CLS يحسن تجربة المستخدم ويقلل النقرات الخاطئة والمغادرة.
الخلاصة
CLS يقيس ثبات صفحتك، وإصلاحه غالباً أسهل من بقية المؤشرات: حدد أبعاد الصور، واحجز مساحة للإعلانات والمحتوى المتأخر، وحسّن الخطوط، واستخدم transform في الحركات، ثم تابع النتائج ببيانات المستخدمين الحقيقيين. ولتحسين تجربة الموقع كاملة، اقرأ 10 طرق لتحسين تجربة المستخدم.
المصادر
- web.dev: Cumulative Layout Shift (CLS)
- web.dev: تحسين Cumulative Layout Shift
- web.dev: مؤشرات أداء الويب الأساسية
- PageSpeed Insights
آخر تحديث: أكتوبر 2026. راجعنا طريقة الحساب والحدود والأسباب وفق توثيق web.dev الحالي.
