أفضل النصائح لإصلاح مشاكل CLS في Search Console

Table of contents

CLS: الخلفية

يقيس Cumulative Layout Shift حركات التخطيط غير المتوقعة. في كل مرة ينتقل فيها عنصر مرئي من موضعه أثناء تحميل الصفحة أو التفاعل معها، تُحسَب درجة إزاحة تخطيط. الدرجة التراكمية هي CLS.

الأسباب الشائعة:

• صور أو iframes بلا سمات width وheight صريحة
• إعلانات تتوسّع بعد أن يكون المحتوى المحيط قد تمّ تقديمه
• محتوى محقون ديناميكيًا (لافتات وإشعارات ملفات تعريف الارتباط وأدوات الدردشة) يُدرج فوق المحتوى القائم
• خطوط ويب تسبّب وميضًا وإعادة تدفق عند التحميل (FOUT/FOIT)
• جافاسكريبت من طرف ثالث يُضيف عناصر واجهة مستخدم بعد التقديم الأولي

ذات صلة: كيفية إصلاح مشاكل LCP في Search Console

قياس CLS

Google Search Console

تقرير Core Web Vitals في Search Console هو نقطة البداية. يعرض الصفحات المُعلَّمة بـ “ضعيف” (CLS ≥ 0.25) أو “يحتاج إلى تحسين” (0.1–0.25)، مجمّعةً حسب نوع المشكلة. استخدم هذا التقرير للحصول على قائمة عناوين URL المتأثرة.

PageSpeed Insights

يعرض PageSpeed Insights (PSI) بيانات المختبر (محاكاة Lighthouse) وبيانات الحقل من المستخدمين الفعليين عبر Chrome UX Report (CrUX). بيانات الحقل أهم لأغراض التصنيف — فهي تعكس تجارب المستخدمين الفعلية، لا مجرد اختبار اصطناعي.

لا يحاكي PSI سوى منفذ العرض الأولي عند التحميل، لذا قد لا يرصد CLS المحرَّك بالتمرير أو تفاعل المستخدم. استخدم Chrome DevTools لتلك الحالات.

Chrome DevTools وإضافة Web Vitals

تعرض إضافة Web Vitals لمتصفح Chrome (يصونها Google) درجات CLS المباشرة أثناء التمرير والتفاعل مع الصفحة. إنها أسرع طريقة لاستنساخ إزاحات التخطيط يدويًا. كما تُبرز لوحة Performance في Chrome DevTools سجلات إزاحة التخطيط مع تعليقات توضيحية تُظهر أيّ العناصر تحرّكت وبأيّ مقدار.

إصلاح مشاكل CLS

إضافة width وheight إلى جميع الصور وiframes

هذا الإصلاح الأعلى تأثيرًا لمعظم المواقع. بدون أبعاد صريحة، لا يعرف المتصفح كم من المساحة يحجزها أثناء تحميل الصورة، فيُدفع المحتوى الذي يليها إلى الأسفل حين تظهر الصورة.

<!-- سيّئ: لا أبعاد -->
<img src="photo.jpg" alt="…">

<!-- جيد: الأبعاد الصريحة تتيح للمتصفح حجز المساحة -->
<img src="photo.jpg" alt="…" width="800" height="450">

يُحقق CSS الحديث (aspect-ratio) الأثر ذاته للصور المتجاوبة، غير أن تحديد سمتَي width وheight في HTML يظل الأسلوب الأكثر موثوقية، وتتولّاه معظم أطر العمل الحديثة وخطوط معالجة الصور في أنظمة إدارة المحتوى تلقائيًا.

حجز مساحة للإعلانات

الإعلانات هي السبب الأكثر شيوعًا لارتفاع CLS في المواقع المُدرّة للدخل. تقدّم شبكات الإعلانات أحجامًا ديناميكية، وإن لم تُحجز مساحة مسبقًا أعادت الصفحة التدفق حين يُحمَّل الإعلان.

1. احجز حاوية ثابتة (min-height يوافق أكثر أحجام إعلاناتك شيوعًا) قبل تحميل وسم الإعلان.
2. لا تطوِ الحاوية إن لم يُقدَّم أيّ إعلان — فالعنصر النائب الفارغ يمنع إعادة تدفق ثانية.
3. انتبه بشكل خاص للإعلانات الموضوعة قرب أعلى منفذ العرض. الإعلانات غير الثابتة المدرجة فوق الطية تتسبّب في أسوأ درجات CLS.
4. استخدم بيانات مرات الظهور التاريخية من شبكتك الإعلانية لتحديد أكثر أحجام الإعلانات شيوعًا لكل موضع، ثم حدّد حجم الحاوية وفق ذلك.

تجنّب إدراج محتوى فوق المحتوى القائم

لافتات الموافقة على ملفات تعريف الارتباط ونوافذ الإشعارات وأدوات الدردشة التي تُحمَّل بصورة غير متزامنة وتظهر فوق المحتوى القائم مصدرٌ متكرر لـ CLS. الخيارات:

• حمّلها في طبقة تراكبية ذات موضع ثابت (لا تؤثر في تدفق المستند).
• خصّص مساحة مسبقًا في التخطيط إن كان لا بدّ من ظهورها ضمن السطر.
• بالنسبة للافتات ملفات تعريف الارتباط تحديدًا، فكّر في الوضع في أسفل الشاشة — فهو يتجنّب CLS كليًّا ويظل مطابقًا للمتطلبات القانونية بالقدر ذاته.

إصلاح تحميل خطوط الويب (FOIT وFOUT)

يحدث FOIT (Flash of Invisible Text) حين يُخفي المتصفح النص حتى يكتمل تحميل خط مخصص. يحدث FOUT (Flash of Unstyled Text) حين يُعرض أولًا خط احتياطي ثم يُستبدل — يُسبّب الاختلاف في مقاييس الخطوط إزاحة في التخطيط.

الحل: font-display: swap مقترنًا بـ <link rel="preload"> للخطوط الجوهرية:

<link rel="preload" href="/fonts/my-font.woff2" as="font" type="font/woff2" crossorigin>

@font-face {
  font-family: 'MyFont';
  src: url('/fonts/my-font.woff2') format('woff2');
  font-display: swap;
}

يُسبّب font-display: swap حالة FOUT (نص مرئي لكن بلا تنسيق) بدلًا من FOIT (نص غير مرئي)، وهو أفضل لـ CLS لأن النص يظهر فورًا. لتقليل أثر الاستبدال على المقياس أكثر، استخدم خاصية CSS size-adjust لمطابقة مقاييس الخط الاحتياطي بالخط المخصص — وهذا يقلّص إعادة التدفق حين يدخل الخط المخصص حيّز التنفيذ.

جافاسكريبت من طرف ثالث

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

• ادفع العناصر المرئية لجهات خارجية إلى ما دون منفذ العرض الأولي متى أمكن — يملك المحتوى الأسفل في الصفحة وقتًا أكثر للتحميل قبل أن يصله المستخدم.
• عرّف أبعاد الحاوية مسبقًا قبل تشغيل السكريبت حتى يعرف المتصفح مسبقًا كم يحجز من مساحة.
• استخدم علامة تبويب Network في Chrome DevTools مع التصفية حسب مصادر الأطراف الثالثة لتحديد السكريبتات المساهمة في إزاحات التخطيط.

التحميل المُؤجَّل والعناصر النائبة

يُؤجّل التحميل المُؤجَّل (Lazy Loading) تحميل الصور حتى تقترب من منفذ العرض، مما يوفّر استهلاك النطاق الترددي. لكن إن لم يُحدَّد عنصر نائب، تنهار حاوية الصورة إلى ارتفاع صفري ثم تقفز حين تُحمَّل الصورة.

احرص دائمًا على أن تحمل العناصر المُحمَّلة بتأخير أبعادًا صريحة أو aspect-ratio محددًا عبر CSS، كي يحجز المتصفح المساحة الصحيحة حتى قبل تحميل الصورة. ينطبق هذا على كل من الخاصية الأصلية loading="lazy" ومحمّلات التأخير المستندة إلى JavaScript.

CLS — الأسئلة الشائعة لعام 2026

هل لا يزال FID إشارة تصنيف في 2026؟

لا. أحالت Google رسميًا FID (First Input Delay) إلى التقاعد من Core Web Vitals في مارس 2024 وأحلّت محله INP (Interaction to Next Paint). الثلاثي الحالي لـ CWV هو: LCP وINP وCLS. حدّث أي توثيق داخلي أو أدوات لا تزال تشير إلى FID.

ما درجة CLS الجيدة التي يجب استهدافها؟

عتبات Google: ما دون 0.1 “جيد”، 0.1–0.25 “يحتاج إلى تحسين”، ما فوق 0.25 “ضعيف”. استهدف البقاء دون 0.1. تُقاس الدرجة عند النسيل المئيني الخامس والسبعين لتحميلات الصفحات في بيانات حقل CrUX.

هل يؤثر CLS في التصنيفات؟

نعم، لكنه إشارة من بين إشارات كثيرة. كانت Core Web Vitals عاملًا في تصنيف تجربة الصفحة منذ منتصف عام 2021. لن يُغرق CLS الضعيف صفحة قوية، لكنه قد يكون عامل الحسم عند التعادل وسيُلحق الضرر مباشرةً بمقاييس تفاعل المستخدمين (معدل الارتداد وعمق الجلسة) بحكم طبيعته.

تُظهر درجة PSI لديّ CLS جيدًا لكن Search Console تُعلّم الصفحة بأنها ضعيفة — أيّهما صحيح؟

ثق بـ Search Console (بيانات الحقل) على بيانات مختبر PSI عند التعارض. لا تحاكي اختبارات مختبر PSI سوى تحميل منفذ العرض الأولي؛ فتفوتها حالات CLS المحرَّكة بتمرير المستخدم أو استبدال الخطوط على اتصالات أبطأ أو الإعلانات المُحمَّلة بعد التفاعل. تعكس بيانات حقل CrUX في Search Console مستخدمين حقيقيين في ظروف حقيقية.

قراءة ذات صلة:

• كيفية إصلاح مشاكل LCP في Search Console
• كيفية تحسين سرعة موقعك الإلكتروني
• تدقيق SEO التقني

النسخة المختصرة

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

تحديث مايو 2026

قصة Google في 2026 هي AI Overviews في كل مكان: تخرّجت تجربة SGE من عام 2023 لتصبح ميزة افتراضية في مايو 2024، وتظهر الآن في ما يُقدَّر بـ ~60% من الاستعلامات المعلوماتية الأمريكية. لمشغّلي SEO والإعلانات:

• انخفض معدل النقر العضوي على الاستعلامات المصحوبة بـ AI Overviews بنسبة 15–30% في المتوسط وفق دراسات منشورة من Ahrefs وAuthoritas وما شابهها (بيانات 2024–25).
• أعادت Google Ads تسمية عدة ميزات من PMax تحت مسمى AI-powered Search؛ تعرض واجهة إدارة الحملات الآن اقتراحات عروض أسعار مدعومة بالذكاء الاصطناعي بشكل افتراضي.
• أضافت Search Console مرشّح “ظهورات AI Overview” في أواخر 2025 — إن أشار أي مقال هنا إلى تقارير GSC، فالدليل بحاجة إلى تحديث.
• تجاوزت إيرادات إعلانات Google ~265 مليار دولار في 2024؛ ولا تزال Search تمثّل ~57% من إجمالي إيرادات Alphabet.

إجابة سؤال “كيف تجني Google أموالها” في 2026: لا تزال إعلانات Search (مهيمنة)، لكن إعلانات YouTube وCloud والاشتراكات (YouTube Premium + Google One) باتت جميعها خطوطًا إيرادية جوهرية الآن.