من المستحيل إرضاء جوجل تمامًا. لقد تخليت عن ذلك منذ فترة طويلة، على الرغم من وجود مشاكل يجب معالجتها، مثل CLS
التحول التراكمي للتخطيط التراكمي تغيير التخطيط التراكمي هو التغيير التراكمي في التخطيط. هذا المقياس مهم لأنه يحلل الاستقرار البصري وتكرار تجربة الزوار للتغييرات غير المتوقعة في التخطيط.
باختصار، ما يقيسه هو أي إزاحة للعناصر في أعلى الصفحة أثناء التحميل.
إن تحقيق مستوى منخفض من CLS يساعد على ضمان أن تكون الصفحة ممتعة للعين ويمنع الحركات المزعجة التي قد تتسبب في فقدان القارئ البصر و/أو وضع عنصر مهم من عناصر التصفح.
تُعتبر تجربة المستخدم جيدة إذا لم تتجاوز درجة CLS 0.1، وحتى 0.25 تحتاج إلى التحسن، ومن هناك تُعتبر درجة سيئة. هذا، كما أفترض أنك تعرف بالفعل، يمكن قياسه بعدة طرق. وأكثرها استخدامًا هو PageSpeed Insights
كما هو مذكور في وثائق Core Web Vitals، يمكن أن يكون سبب سوء CLS هو عناصر مختلفة مثل صورة أو مقطع فيديو بأبعاد غير معروفة، أو خط يتم عرضه أكبر أو أصغر من بديله، أو إعلان أو عنصر واجهة مستخدم أو تأثير رسوم متحركة لجهة خارجية يتغير حجمه ديناميكيًا.
من المفارقات أن بعض العناصر التي تميل إلى تنظيف CLS هي إعلانات Google Adsense. خاصةً إذا كنت تستخدم خيار الإعلانات التلقائية النقطية و/أو إعلانات الارتساء ). هناك حالات تؤدي فيها هذه الإعلانات إلى إفساد سرعة التحميل تمامًا.
كيفية اكتشاف الإزاحة إليك جوهر المسألة: ما الذي يجب أن نبحث عنه بالضبط وكيف نجده؟ حسناً، أي شيء يتغير حجمه و/أو يتحول أثناء التحميل.
والآن بعد أن أصبحنا في خضم محاولة إصلاح مشكلة Adsense، يمكننا إلقاء نظرة على بقية العناصر التي قد تؤدي إلى تسمين CLS. هناك طرق مختلفة للقيام بذلك، إليك بعضها.
النظر إلى الطريقة الأكثر ريفية هي الملاحظة البسيطة بالعين. إذا كانت الإزاحة ملحوظة، فسوف تراها على الفور، ولكن هناك حركات أقل وضوحًا تتطلب فحصًا أدق.
في وحدة تحكم البحث في GSC، تحت عنوان "أهم مقاييس الويب"، يمكنك الحصول على قائمة عناوين URL التي تعاني من مشاكل CLS و LCP لإلقاء نظرة فاحصة عليها واحدة تلو الأخرى.
مصحح أخطاء التحول في التخطيط التراكمي مصحح تغيير التخطيط التراكمي
تعد هذه الأداة، التي صممها أحد مهندسي Chrome، واحدة من أكثر الأدوات المفيدة للعثور على مشاكل CLS.
إذا تم تظليل معظم النص على الصفحة، فمن المحتمل أن تكون الخطوط هي السبب في تغيير التخطيط.
مُنشئ صورة GIF لتخطيط التحول في التصميم منشئ صور GIF بتنسيق Shift GIF
متخيل CLS هذه الأداة، كونها واحدة من أبسط الأدوات، هي الأداة التي تمكنت من خلالها من التقاط أفضل الإزاحات.
CLS Visualizer هو
كان لهذا الرمز الشيطاني إزاحة لموقع الكتلة التي تحتوي عليه غير محسوسة في التنقل. عند تنشيط الامتداد، سيُظهر لك قياسات CLS في قائمة، وعند النقر على كل واحدة منها، ستظهر الرسوم المتحركة للعنصر المسبب لها باللون الأحمر.
بفضل هذه الإضافة حققت صفر CLS على العديد من الصفحات. على الرغم من أنه يمكن أن يكون هناك العديد من الأشياء التي تسبب ذلك لدرجة أنني تركته مثبتًا لمراجعة عناوين url دون تسرع.
توفر أدوات Chrome Dev Tools إمكانيات مثيرة للاهتمام، ومن أكثرها فائدة في التعامل مع CLS هو خيار تقليل عرض النطاق الترددي الذي يتم فيه تحميل الصفحة بحيث يمكنك أن ترى بوضوح متى يحدث تغيير التصميم والعناصر التي تساهم في ذلك.
للقيام بذلك افتح أدوات Chrome Dev Tools في المتصفح مع النقر بزر الماوس الأيمن/التفتيش على موقعك الإلكتروني وفي الشبكة ابحث عن أيقونة Wifi الموضحة في الصورة وبجانبها ستجد قائمة منسدلة حيث يمكنك إضافة سرعة مخصصة.
أنشئ ملفاً شخصياً جديداً وأضف 100 كيلوبايت أو أقل لاختباره في "حركة بطيئة".
والآن، عندما تتصفح الإنترنت بسرعة أكبر من تلك التي كان يتصفحها الإنترنت عندما كان يعمل بسرعة عالية، ستجد أنه من الأسهل بكثير تحديد ما قد يسبب لك مشاكل أثناء التحميل.
التقديم في مناطق تحول التخطيط في أدوات تطوير كروم، يمكنك أيضًا رؤية تغييرات التخطيط مظللة باللون الأزرق أثناء تنقلك في صفحتك في الوقت الفعلي.
هذه هي خطوات تفعيل مناطق تغيير التصميم:
باستخدام امتداد المتصفح في كروم، يمكنك تثبيت امتداد CLS Checker - Journey Further
Webpagetest موقع قياس آخر يمكنك من خلاله إجراء اختبار على webpagetest.org
يؤدي إيقاف الفيديو مؤقتاً إلى تسهيل العثور على الإزاحات الصغيرة.
إذا نظرت عن كثب، ستجد أن كلاً من عناصر القائمة والعنوان والنصوص قد تم إزاحتها قليلاً إلى اليمين من خلال ما يبدو أنه تغيير في حجم الخط و/أو موضعه، ولكن المساحة الإعلانية أعلى العنوان محجوزة بالفعل، لذا لا يؤدي ذلك إلى إزاحة المحتوى إلى أسفل. تم حلها عن طريق تصغير حجم H1 قليلاً وإصلاح التفاف النصوص المصاحبة.
لكن هذا أمر مختلف، دعنا نتعامل مع سلوك الإعلانات.
حلول لحجز مساحات حظر الإعلانات بالبحث عن الحل الأفضل والأسرع، وجدت أن الحل الأفضل هو إضافة قيمة الحد الأدنى للارتفاع إلى غلاف (div) حول كل كتلة من الكتل الإعلانية لحجز تلك المساحة وتجنب التمرير بعد التحميل.
ومع ذلك، يبدو أنه لا يكفي استخدام فئة للإشارة إلى خاصية CSS هذه، ولكن يبدو أنه لا يكفي استخدام معرّف للمُجمّع. يبدو أنه، لسبب غير معروف، تقوم Google AdSense JavaScript بإزالة توجيهات الحد الأدنى للارتفاع من أي كائن أصل. ومع ذلك، لا تتم إزالتها إذا تم استخدام معرّف لاستهداف CSS.
هذا موضح هنا ومزيد من التفاصيل أداة إدراج الإعلانات
تغيير الإعلانات القابلة للتكيف إلى الحجم الثابت كان أول شيء هو التوقف عن استخدام المكوِّنات الإعلانية القابلة للتكيف . لقد غيرت جميع الكتل إلى أحجام ثابتة .
يجب دراسة هذا القرار وتقييمه على أساس كل حالة على حدة.
على الرغم من أن Google تدّعي أن الإعلانات القابلة للتخصيص تحقق المزيد من الإيرادات (من الواضح أن ذلك يرجع إلى القدرة على عرض أحجام مختلفة)، إلا أن هذا مرن تمامًا ويمكن أن يختلف وفقًا لسيناريوهات مختلفة. إذا اخترت الأحجام الأكثر شيوعًا، فستعرض الإعلانات دائمًا.
تعطيل تحسين الحجم المعطل على الرغم من أنه من المفترض أن تكون الكتل ذات حجم ثابت بالفعل، يجب عليك تعطيل الخيار الذي يسمح لـ Google بتحديد حجم إعلانات الجوّال من تلقاء نفسها. يمكن العثور على هذا الخيار في إدارة Adsense ضمن الإعلانات/الإعدادات العامة .
بهذه الطريقة نتجنب المفاجآت في حال تركنا بعض الإعلانات التي وضعناها يدويًا. على أي حال، حقيقة أن حجمها ثابت لا يعني أنها لم تعد تستجيب.
حجز المساحات الإعلانية باستخدام أداة إدراج الإعلانات أعتقد أن أداة إدراج الإعلانات هي أفضل إضافة لإدارة الإعلانات، والتي يمكن استخدامها حتى لإضافة محتوى آخر.
لحجز المساحة الخاصة بكل إعلان، ما عليك سوى الانتقال إلى "العرض" وتحديد العرض والارتفاع أو ارتفاع كل مكوِّن فقط.
إذا كنت تستخدم إصدار PRO
بعض الاعتبارات إن حجز مساحة لـ Adsense له عيوبه، حيث لا يمكن عرض الإعلانات بسبب عدم عرضها بهذا الحجم أو عدم وجود معلنين لموقعك في أي وقت، يمكنك الحصول على مساحة فارغة بحجم المساحة المحجوزة.
في أداة إدراج الإعلانات، فقط للإدراج من جانب الخادم، يمكنك تحديد الارتفاع مباشرةً باستخدام كود CSS مخصص .
لاحظ أن ارتفاع الإعلان يتم تحديده بواسطة رمز الإعلان . يمكن أن يحدد رمز الإعلان التكيفي ارتفاع الإعلان وفقًا للمساحة المتاحة.
قد تعرض بعض شبكات الإعلانات (مثل AdSense) أيضًا إعلانات أصغر من المساحة المتاحة. ارتفاع المكوّن، كما هو محدد في أداة إدراج الإعلانات، هو ارتفاع المكوِّن المدرج، أي ارتفاع القسم الذي يغلفه. هذه هي المساحة المحجوزة للإعلان . يمكن أن يحدث ما يلي عند حجزها:
إذا كان ارتفاع الإعلان هو نفس ارتفاع المساحة المحجوزة (ارتفاع الكتلة)، فلن يكون هناك أي تغيير في التصميم ولن يؤثر ذلك على CLS. إذا كان ارتفاع الإعلان أكبر من ارتفاع المساحة المحجوزة (ارتفاع الكتلة)، فقد يتم إزاحة التصميم إلى أسفل لاستيعاب الإعلان والتأثير على CLS. إذا كان ارتفاع الإعلان أقل من ارتفاع المساحة المحجوزة (ارتفاع الكتلة)، فستحصل على مساحة فارغة أسفل الإعلان، ولكن لن يتغير التخطيط ولن يؤثر على CLS. قد تتجاوز بعض أكواد الإعلانات، مثل رمز الإعلان التكييفي AdSense، ارتفاع الحاويات الرئيسية . في هذه الحالة، سيتم الكتابة فوق ارتفاع المكوِّن ولن يتم تطبيقه.
باختصار، في حالة مشاكل CLS العاجلة التي يجب حلها عن طريق تقليل التغييرات في التصميم، فإن الخيار الأسرع هو استخدام أحجام الإعلانات الثابتة كلما أمكن ذلك.
وأثناء قيامك بذلك، يمكنك التأكد من عدم وجود أبعاد مفقودة في الصور، ويمكن إصلاح ذلك أيضًا بطرق مختلفة. تتمثل بعض الطرق السريعة والسهلة في استخدام Perfmatters ( أوصي بها) أو WP Rocket
أو إضافة Litespeed Cache
إذا سار كل شيء على ما يرام، يجب أن ترى انخفاض CLS الخاص بك في غضون ساعات قليلة في التقارير الميدانية وفي غضون أيام قليلة في تقارير مختبر PageSpeed Insights
