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