في مايو 2020، قدمت Google مجموعة من ثلاثة مقاييس مهمة تُعرف باسم عناصر الويب الأساسيةهذه المقاييس هي وسيلة لقياس تجربة المستخدم الإجمالية لموقع الويب. الهدف بسيط: جعل الإنترنت مكانًا أفضل للجميع. مؤشرات الويب الأساسية الثلاثة هي:
- أكبر طلاء محتوى (LCP): يقيس هذا المدة التي يستغرقها ظهور المحتوى الرئيسي للصفحة على الشاشة.
- أول تأخير في الإدخال (FID): يقيس هذا المدة التي يستغرقها الزائر قبل أن يتمكن من البدء في التفاعل مع الصفحة.
- التحول في التخطيط التراكمي (CLS): يقيس هذا ما إذا كانت الصفحة مستقرة بصريًا، أو ما إذا كانت عناصرها تتغير كثيرًا أثناء التحميل.
هذه المقاييس ليست مجرد أرقام لتصنيفات البحث، بل لها تأثير مباشر على تجربة زوارك. تحسين هذه المقاييس لا يُحسّن تصنيفاتك فحسب، بل يجعل موقعك الإلكتروني أكثر متعةً.
ما هو التحول التراكمي للتخطيط؟
التحول التراكمي في التخطيط (CLS) هذا هو محور هذه المقالة. قد يبدو الاسم تقنيًا، لكن الفكرة بسيطة. هل سبق لك أن ضغطت على زر أو قرأت سطرًا من نص، وفجأة ظهرت صورة أو إعلان، فدفعت كل شيء للأسفل؟ هذه التجربة المزعجة هي تغيير في التصميم. يقيس مؤشر CLS مقدار حركة عناصر الصفحة أثناء تحميلها. تُعتبر درجة CLS الجيدة 0.1 أو أقل. أي درجة أعلى من 0.25 تُعتبر ضعيفة. تعني الدرجة المنخفضة صفحة أكثر استقرارًا، مما يُقدم تجربة أفضل لمستخدميك.
كيف يتم حساب CLS؟
درجة CLS هي رقم يتراوح بين ٠ و١. تُعتبر الدرجة ٠ مثالية، بدون أي تغييرات في التصميم، بينما تُشير الدرجة الأقرب إلى ١ إلى حركة كبيرة. الحساب وراء الرقم ليس مُعقدًا للغاية: نتيجة تحول التخطيط = كسر التأثير * كسر المسافة. جزء التأثير يقيس مقدار الصفحة المتأثرة بالتحول، و كسر المسافة يقيس هذا المؤشر مدى تحرك العناصر. على سبيل المثال، إذا تحرك عنصر كبير مسافة كبيرة، فسيؤدي ذلك إلى تقييم CLS ضعيف. أي تغييرات في التصميم تحدث خلال نصف ثانية من تفاعل المستخدم مع الصفحة (مثل النقر أو الكتابة) لا تُحتسب ضمن التقييم.
كيف يمكنني العثور على CLS الخاص بي؟
قبل أن تتمكن من إصلاح CLS الخاص بك، عليك أن تعرف ماهيته. هناك عدة طرق مختلفة لمعرفة درجة CLS الخاصة بك.
رؤى صفحات جوجل
يمكنك تشغيل فحص سرعة الصفحة في رؤى صفحات جوجلوسوف ترى درجة CLS مدرجة في بيانات المختبر القسم. وسوف يسلط التقرير الضوء أيضًا على الأسباب الرئيسية لـ CLS في التشخيص القسم. بناءً على حجم الزيارات التي يحصل عليها موقعك الإلكتروني، قد يتضمن التقرير أيضًا بيانات خاطئهوالتي تعتمد على تجارب المستخدمين الحقيقيين.
Google Search Console
تحتوي وحدة التحكم في البحث لديك على عناصر الويب الأساسية تقرير يوضح لك الصفحات ذات الأداء الجيد أو الضعيف. يتضمن هذا التقرير درجة CLS الخاصة بك، بالإضافة إلى أكبر معدل لرسم المحتوى وتأخير الإدخال الأول.
منارة جوجل
يمكنك أيضا استخدام منارة في أدوات المطورين بمتصفحك، يمكنك تشغيل تقرير أداء كامل، بما في ذلك ميزة "تحويل التخطيط التراكمي". يشبه هذا التقرير إلى حد كبير تقرير Pagespeed Insights، ولكنه يتميز بميزة إضافية: يمكنك تشغيله على صفحات غير متاحة للعامة بعد، مما يجعله أداة رائعة للمطورين.
ما الذي يسبب التحول التراكمي في التخطيط؟
يمكن إصلاح الأسباب الأكثر شيوعًا لتغييرات التخطيط بإجراء بعض التغييرات البسيطة. إليك الأسباب الأكثر شيوعًا وكيفية إصلاحها.
الصور ومقاطع الفيديو بدون أبعاد
هذا أحد أكثر أسباب CLS شيوعًا. عند تحميل المتصفح لصفحة، يتم تحميل كود HTML أولًا، يليه CSS، ثم الصور ومقاطع الفيديو. إذا لم تحدد عرض وارتفاع الصورة أو الفيديو، فلن يعرف المتصفح المساحة التي يجب تخصيصها لهما. ونتيجة لذلك، سيتغير تصميم الصورة بعد تحميلها. وهذا ملحوظ بشكل خاص عند الاتصال بشبكة الإنترنت البطيئة.
كيف يمكن اصلاح هذا؟
الحل بسيط: حدد دائمًا ارتفاع وعرض صورك بتنسيق HTML. هذا يُحدد للمتصفح المساحة المطلوبة بدقة، وبالتالي يتم تحميل باقي الصفحة في المكان الصحيح. يجب عليك أيضًا التأكد من أن صورك تحتوي على نص بديل جيد، فهو جزء أساسي من... على صفحة كبار المسئولين الاقتصاديين.مجانا مولد نص بديل للصور بالذكاء الاصطناعي يمكن أن يساعدك في كتابة وصف جيد لصورك، وهي أيضًا طريقة رائعة لتحسين محرك البحث الخاص بك.
الإعلانات سبب رئيسي لـ CLS. غالبًا ما يتم تحميلها واستهدافها لزائر محدد، وقد يستغرق تحميلها بعض الوقت. قد يؤدي هذا إلى تغيير مفاجئ في تصميم الصفحة، خاصةً إذا كان الإعلان في أعلى الصفحة.
كيف يمكن اصلاح هذا؟
كما هو الحال مع الصور، يمكنك تحديد الأبعاد التي ترغب في تخصيصها لإعلانك. هذا يضمن عدم تغير تصميم الإعلان بعد تحميله. يُنصح بتخصيص أكبر مساحة ممكنة للإعلان، حتى لو كان حجمه أصغر.
التضمينات والإطارات المضمنة
إذا كنت تُضمّن عناصر مثل فيديوهات يوتيوب أو خرائط جوجل أو موجزات تويتر في صفحتك، فعليك توخي الحذر بشأن CLS. لا تعرف دائمًا الحجم الدقيق للعنصر، مما قد يؤدي إلى تغيير تخطيطاته.
كيف يمكن اصلاح هذا؟
يُنصح بمحاولة تقدير حجم العنصر بدقة، وتخصيص مساحة كافية له في التصميم. إذا لم تكن متأكدًا، يُنصح بتحديد أقصى ارتفاع أو عرض له.
خطوط الويب
إذا كنت تُحمّل خطوطًا من خدمات مثل خطوط جوجل، فقد يُحدث ذلك تغييرًا في التصميم. أثناء تحميل الخط، قد تظهر الصفحة بخط بديل. بمجرد وصول الخط، سيتم استبداله، مما يُسبب تغييرًا طفيفًا في التصميم.
كيف يمكن اصلاح هذا؟
هناك طريقتان لتقليل التأثير السلبي لخطوط الويب على CLS: ضبط سمة CSS عرض الخط إلى مقايضة وتسريع تحميل الخطوط عن طريق جلب خطوط الويب وتحميلها مسبقًا. مقايضة تخبر الخاصية المتصفح باستخدام الخط البديل حتى يصبح الخط الجديد جاهزًا.
المحتوى المحقون ديناميكيًا
مع تزايد شعبية تطوير الويب الحديث، يزداد عدد الصفحات التي تحتوي على محتوى مُحمّل ديناميكيًا. ستحتوي الصفحات على عناصر نائبة لا تُملأ إلا بعد أن يُعيد استدعاء خادم JavaScript المحتوى الصحيح. قد يستغرق هذا بعض الوقت وقد يُسبب تغييرات في التصميم.
كيف يمكن اصلاح هذا؟
يجب عليك دائمًا تخصيص مساحة للمحتوى الذي سيُنشر لاحقًا. كما يجب عليك التأكد من تحميل المحتوى بأسرع وقت ممكن. هذه مهمة فنية يمكن للمطور مساعدتك فيها.
خاتمة
تُسبب تغييرات التصميم إزعاجًا للزوار وتُؤدي إلى تجربة مستخدم سيئة. منذ عام ٢٠٢١، قد تؤثر تغييرات التصميم سلبًا على ترتيب موقعك على جوجل. الخبر السار هو أن CLS لها أسباب مختلفة، ولكل منها حل سهل نسبيًا. منصة تحسين محركات البحث (SEO) آلية. كليك رانك يمكننا مساعدتك في تحسين محركات البحث على صفحتك، والمشكلات الفنية، والمحتوى الخاص بك، حتى تتمكن من بناء موقع ويب قوي يحظى بتصنيف جيد.
