تحول التخطيط التراكمي: تحسين نقاط Google CLS

هل سبق لك أن كنت في موقف يختفي فيه زر الخروج عند محاولة تقديم طلب؟

نعم! انه محبط.

الحقيقة هي أنه يحدث كثيرًا جدًا ومع الكثير منا.

لحسن الحظ ، كما هو الحال دائمًا ، تعطي Google الأولوية لتجربة المستخدم فوق أي شيء آخر.

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

تم تصميم Core Web Vitals لقياس سرعة التحميل والتفاعل والاستقرار البصري للصفحة.

ثلاثة مقاييس تمثل ما يلي:

1. أكبر طلاء محتوى (LCP)

2. تأخير الإدخال الأول (FIP)

3. التحول في التخطيط التراكمي (CLS)

دعونا نفهم CLS من وجهة نظر كل من المستخدم ومشرفي المواقع (SEO).

ما هو تغيير التخطيط التراكمي؟

يمثل التحول في التخطيط التراكمي (CLS) الاستقرار المرئي لموقع الويب.

يقيس مقدار التحولات غير المهمة في التخطيط على الصفحة.

التحولات غير المتوقعة في التخطيط هي نتيجة تحرك صفحة الويب حول نفسها دون إدخال المستخدم.

يعد Google CLS نوعًا من المؤشرات (Signal) لإصلاح المشكلة عن طريق قياس عدد المرات التي تؤثر فيها حركة غير متوقعة لعناصر الصفحة على تجربة المستخدم.

يمكن أن يحدث التحول في التخطيط في أي وقت عندما يغير عنصر مرئي موضعه من إطار معروض إلى الإطار التالي.

دعنا نحاول فهم المعنى الشائع وتعريف "التحول في التخطيط التراكمي" بكلمات بسيطة:

التراكمي هو زيادة في الكمية.

التخطيط هو الإطار

التحول هو تغيير في الموقف

ببساطة ، التحول في التخطيط التراكمي عبارة عن مجموع إجمالي لجميع تغييرات الإطار الفردية في مواضع تصميم موقع الويب.

مصدر الصورة web.dev

يجب أن تكون درجة CLS القياسية أقل من 0.1.

الحد الأدنى المناسب لقياس ذلك هو النسبة المئوية الخامسة والسبعون لتحميلات الصفحات عبر الأجهزة المحمولة وأجهزة سطح المكتب.

في الصورة أعلاه يتضح أن بحسب جوجل:

1. إذا كانت نتيجة CLS أقل من 0.1 ، فهذه إشارة جيدة. هذا يعني أن موقعك ليس لديه مشكلة مع أي تغيير في التخطيط.

2. إذا كانت نتيجة CLS بين 0.1 و 0.25 ، فهذا يعني أن موقعك يحتاج إلى تحسين معين في التخطيطات المرئية.

3. إذا كانت نتيجة CLS أعلى من 0.25 ، فهذه إشارة ضعيفة ، مما يعني أيضًا أن حركة العنصر المرئي تحدث كثيرًا.

كيف يتم حساب التحول في التخطيط التراكمي؟

يحسب Google CLS للصفحة عن طريق حساب جزء التأثير وكسر المسافة لكل تحول تخطيط غير متوقع.

تأثير جزء من CLS

يقيس مقدار المساحة التي يشغلها عنصر غير مستقر في منطقة منفذ العرض بين إطارين.

صيغة لحساب تأثير الكسر لـ CLS

لحساب نقاط تحول التخطيط ، نحتاج إلى كسر التأثير.

كيفية حساب تأثير الكسر ل CLS؟

سيساعدك التمثيل الرسومي على فهم الكسور المؤثرة بشكل أفضل.

 جزء التأثير = [منطقة منطقة التأثير] / [مساحة منفذ العرض] جزء التأثير = [330 × 490] / [375 × 667] جزء التأثير = [161700] / [250125] جزء التأثير = 0.645

المسافة جزء من CLS

إنه مقياس مقدار المساحة التي نقلها عنصر الصفحة من الموضع الأصلي إلى الموضع النهائي الذي ينتقل بشكل أساسي في التخطيط.

لتجنب حالات العقوبة المفرطة ، قم بتغيير العناصر الكبيرة بمقدار صغير مع مراعاة إدخال جزء المسافة.

صيغة لحساب المسافة الكسرية لـ CLS

كيف تحسب المسافة الكسر ل CLS؟

سيساعدك التمثيل الرسومي على فهم جزء المسافة بشكل أفضل.

جزء المسافة = [ماكس. نقل المسافة] / [ارتفاع منفذ العرض] جزء المسافة = [120] / [667] جزء المسافة = 0.179

صيغة لحساب Google CLS Score

يتم حساب نقاط التخطيط التراكمي بضرب جزء التأثير في جزء المسافة:

 التحول في التخطيط التراكمي (CLS) = جزء التأثير x جزء المسافة

CLS = 0.645 × 0.179 كلس = 0.1154.

تستمر درجة CLS في الارتفاع مع زيادة التأثير وكسر المسافة.

التحول في التخطيط التراكمي مع مثال بسيط.

قمت بزيارة موقع ورأيت شيئًا ممتعًا للقراءة.

تفضل بالضغط على الرابط.

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

المصدر: nitropack.io

تبدو غير عادلة ، أليس كذلك؟

إنه تحول تخطيط غير متوقع.

هذا يعني فقط أنه سيتم إعادة توجيهك إلى بعض الصفحات المقصودة غير المرغوب فيها حيث يتعين عليك العودة إلى صفحة الويب الأصلية.

لدينا أيضًا شيء يعرف باسم التحول المتوقع في التخطيط.

يحدث ذلك عند النقر فوق شيء ما على صفحة الويب ، ويغير التخطيط الحالي للصفحة.

على سبيل المثال ، تذهب إلى مدونة تبحث عن معلومة معينة.

بمجرد إدخال اسم الموضوع في شريط البحث ، سوف يقوم باسترداد منشور مدونة معين حيث ستجد المعلومات المطلوبة أو يأتي ببعض منشورات المدونة المتعلقة بالموضوع.

المصدر: nitropack.io

هذه نتيجة متوقعة من صفحة الويب ويمكن اعتبارها تحول تخطيط متوقع.

ما الذي يسبب مشكلات CLS؟

وفقًا لـ Google ، محرك البحث العملاق ، هناك 5 أسباب محتملة لتغيير التخطيط التراكمي :

صور وفيديوهات بدون أبعاد

يُنصح دائمًا بتحديد عرض وارتفاع الصور ومقاطع الفيديو الخاصة بك.

يمكنك أيضًا استخدام مربعات نسبة العرض إلى الارتفاع في CSS للسماح للمتصفح بتخصيص المقدار المناسب من المساحة على صفحة الويب أثناء تحميل الصورة.

الإعلانات والتضمينات وإطارات iframe بدون أبعاد

يمكن أن تعزز أحجام الإعلانات الأرباح من خلال نسبة النقر إلى الظهور المرتفعة.

ومع ذلك ، يمكن أن يؤثر ذلك على جودة تجربة المستخدم من خلال دفع المحتوى إلى أسفل الصفحة.

يمكن التخفيف من هذا التحول في التخطيط عن طريق حجز مساحة للشرائح الإعلانية ، والقضاء على التحولات عن طريق حجز أكبر حجم ممكن للشريحة الإعلانية ، أو اختيار أفضل حجم ممكن للشريحة الإعلانية استنادًا إلى البيانات السابقة.

المحتوى المحقون ديناميكيًا

تجنب إدراج أي محتوى جديد فوق المحتوى الموجود ، ما لم يكن ذلك استجابة لتفاعل المستخدم.

سيضمن ذلك توقع أي تغييرات في التخطيط تحدث دائمًا بدلاً من تشغيل الصورة أو النص للتحرك بشكل غير متوقع.

تسبب خطوط الويب في FOIT / FOUT

جرب استخدام الخط: قيم العرض مع الخطوط المخصصة الخاصة بك مثل auto ، swap ، block ، backback ، والاختياري ، لمنع التحولات غير الضرورية في التخطيط.

للتأكد من عدم وجود تحول في التخطيط ، استخدم font: display مع link rel = preload.

سيتم إخفاء أي عنصر يستخدم هذا الخط حتى يتم تنزيل أصل الخط بالكامل ، ويُعرف باسم FOIT (فلاش للنص غير المرئي).

مصدر nimation: malthemilthers.com

يُعرف عرض الخط الاحتياطي في مكدس الخطوط حتى يتم تحميل الخط المخصص باسم FOUT (فلاش للنص غير المصمم).

الإجراءات تنتظر استجابة الشبكة قبل تحديث DOM

ابحث دائمًا عن الرسوم المتحركة "المحولة" للرسوم المتحركة للخصائص التي تؤدي إلى تغييرات التخطيط.

كيف تتأثر نقاط Google CLS من خلال الإعلانات؟

للتعامل مع الإعلانات التي تسبب CLS ، تحتاج إلى تصميم العنصر الذي سيظهر فيه الإعلان.

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

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

بدلاً من ذلك ، قد يملأ الإعلان الصف بالكامل أعلى العمود في هامش التوثيق الأيمن أو الأيسر للصفحة لتخطيطات معينة.

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

ومع ذلك ، يجب أن تلاحظ أن ذلك يعتمد على تنسيق الموضوع وسيتعين عليك اختباره إذا كانت هناك مشكلة في المخزون الإعلاني.

كيف يمكن أن تنزلق CLS أثناء تطوير الويب؟

يمكن لـ Google CLS أن يتخطى مرحلة التطوير.

إليك ما يمكن أن يحدث.

يتم تحميل العديد من الأصول اللازمة لعرض صفحة ويب في ذاكرة التخزين المؤقت للمتصفح.

في المرة التالية التي يزور فيها أحد المطورين الصفحة قيد التطوير ، لن يلاحظوا تحولًا في التخطيط نظرًا لأن عناصر الصفحة قد تم تنزيلها بالفعل.

لذلك يوصى بإجراء قياس في الميدان أو في المختبر.

اختبار التحول في التخطيط التراكمي

يمكن قياس مقاييس موقع الويب لأداء تغيير التخطيط التراكمي بأي من الطرق التالية:

الأدوات الميدانية

في الميدان: على المستخدمين الحقيقيين الذين يتفاعلون بالفعل مع الصفحة. يمكن قياسه باستخدام الأدوات الميدانية التالية:

تقرير تجربة مستخدم Chrome

يوفر مقاييس تجربة المستخدم لكيفية تجربة مستخدمي Chrome في العالم الحقيقي للوجهات الشائعة على الويب.

PageSpeed ​​Insights

تقوم هذه الأداة بتحليل محتوى صفحة الويب وإنشاء اقتراحات لجعل هذه الصفحة أسرع من ذي قبل.

Search Console (تقرير Core Web Vitals)

تعرض Search Console كيفية أداء صفحاتك بناءً على بيانات الاستخدام الواقعية (تسمى أحيانًا بيانات الحقل).

أدوات المعمل

في المعمل: يمكن قياس استخدام الأدوات لمحاكاة تحميل الصفحة في بيئة خاضعة للرقابة باستخدام أدوات المعمل التالية:

Chrome DevTools

يمكن أن تساعدك Chrome DevTools في تحرير الصفحات أثناء التنقل وتشخيص المشكلات بسرعة ، مما يمكّنك في النهاية من إنشاء مواقع ويب أفضل بشكل أسرع.

منارة

LightHouse هي أداة آلية مفتوحة المصدر لتحسين جودة صفحات الويب.

يمكنك تشغيله على أي صفحة ويب ، عامة ، أو تتطلب مصادقة.

يحتوي على عمليات تدقيق للأداء وإمكانية الوصول وتطبيقات الويب التقدمية وتحسين محركات البحث والمزيد.

WebPageTest

قم بإجراء اختبار مجاني لسرعة موقع الويب من جميع أنحاء العالم باستخدام متصفحات حقيقية بسرعات اتصال المستهلك مع توصيات تحسين مفصلة.

وفقًا لموقع الويب . تحذير: عادةً ما تقوم أدوات المعمل بتحميل الصفحات في بيئة تركيبية وتقيس فقط تغيرات التخطيط أثناء تحميل الصفحة.

نتيجة لذلك ، قد تكون قيم CLS التي تم الإبلاغ عنها بواسطة أدوات المعمل لصفحة معينة أقل مما يختبره المستخدمون الحقيقيون في هذا المجال.

أدوات سريعة للتحقق من التحول في التخطيط التراكمي

1. CLS بتنسيق GIF من Defaced Tool بواسطة Chris Johnson لتحديد LS الذي به إشكالية.

2. حاسبة التحول التخطيطي التراكمي

خطأ في حسابات CLS

تلقت Google تعليقات حول عدم ملاءمة مقياس CLS لقياس صفحات الويب المفتوحة لفترة طويلة ، مما أدى إلى معاقبتهم بدرجات أقل.

استعرضت Google ثلاثة حلول لتحديث كيفية حصولها على درجات CLS ، لذلك لا داعي للقلق بشأن تفاقم درجات CLS بسبب هذا التغيير.

نوافذ الجلسات لقياس CLS

اتجهت Google إلى نهج نافذة الجلسة لقياس CLS.

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

إجمالي الدرجات لكل نافذة جلسة هو التغيير التراكمي في التخطيط ، والتحول الكلي للصفحة بأكملها.

3٪ من صفحات الويب ذات التمرير اللانهائي أو التي تحتوي على معالجات واجهة مستخدم بطيئة في الاستجابة لتفاعل المستخدم ستشهد ارتفاع درجاتها إلى تصنيف جيد.

التحديث يجعل نتائج CLS أكثر دقة

إنها فائدة للناشرين مع نظام التسجيل الجديد الذي أصبح أكثر عدلاً ، لا سيما لصفحات الويب المفتوحة لفترة طويلة أو التي تستخدم التمرير اللانهائي والتي تم تسجيلها بشكل غير عادل بسبب ذلك.

مع اقتراب أن تصبح مقاييس Core Web Vitals عامل ترتيب في مايو 2021 ، يعد إجراء تغيير مهم في اللحظة الأخيرة.

خاتمة

سيساعدك فهم تغيير التخطيط التراكمي (CLS) على تقديم تجربة مستخدم أفضل في الأيام القادمة.

نظرًا لأن المقياس جزء من Core Web Vitals لتحسين تجربة المستخدم ومن المقرر أن يصبح إشارة تصنيف في عام 2021 ، فمن المهم فهم أهميته وتأثيره على موقعك.