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

مع طرح تحديث تجربة الصفحة من Google الآن ، تتمتع مواقع الويب التي تم ضبطها ببعض فرص التصنيف الجديدة.

على وجه الخصوص ، يمكن أن تتأهل مواقع الويب لتحسين التصنيف استنادًا إلى العديد من مقاييس الأداء الجديدة التي تسميها Google "مؤشرات الويب الأساسية".

تعد مؤشرات الويب الأساسية مجموعة من وظائف صفحات الويب الأساسية التي تؤثر على تجربة المستخدم. يلعبون الآن دورًا في تحسين محركات البحث الإستراتيجي ويمكنهم التأثير على تصنيف مواقع الويب في Google.

حددت Google ثلاث مؤشرات أساسية للويب:

• أكبر طلاء محتوى (LCP)
• أول تأخير في الإدخال (FID)
• التحول في التخطيط التراكمي (CLS)

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

• ما هو CLS؟
• كيف تقيس CLS؟
• كيف يؤثر CLS على تحسين محركات البحث؟
• كيف يمكنني تحسين مجموع نقاط CLS الخاصة بي؟

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

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

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

يناقش Google CLS هنا:

يعد تغيير التنسيق التراكمي (CLS) مقياسًا مهمًا يركز على المستخدم لقياس الاستقرار البصري لأنه يساعد في تحديد عدد المرات التي يواجه فيها المستخدمون تغيرات غير متوقعة في التخطيط - يساعد انخفاض CLS على ضمان أن تكون الصفحة ممتعة.

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

الأهم من ذلك ، يوضح Google أنه ليست كل تغييرات التخطيط تعتبر سيئة:

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

تحولات التخطيط التي تحدث في غضون 500 مللي ثانية من إدخال المستخدم سيكون لها مجموعة علامة hadRecentInput ، بحيث يمكن استبعادها من العمليات الحسابية.

كيف يتم قياس تغيير التخطيط التراكمي (CLS)؟

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

نافذة الجلسة هي أي فترة 5 ثوانٍ من التحولات التي تحدث أثناء زيارة المستخدم للصفحة. يبحث Google عن فاصل 5 ثوانٍ يحتوي على معظم عقوبات التحول ، وهذه هي نتيجة مشاهدة الصفحة هذه.

لحساب درجة تحول التخطيط ، تضاعف Google جزء التأثير وجزء المسافة . سوف أقوم بتفكيكها.

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

في المثال أدناه ، يمكنك أن ترى أن العنصر يشغل 50٪ من منفذ العرض الأصلي ، ولكن بعد ذلك ينخفض ​​بنسبة 25٪. بين كلا الإطارين ، يشغل العنصر 50٪ بالإضافة إلى 25٪ من منفذ العرض ، مما يتسبب في أن يكون جزء التأثير 75٪.

مثال على تغيير التنسيق بين إطارين ، Google Developers

جزء المسافة هو المسافة التي قطعها عنصر غير مستقر. يوضح المثال أدناه أن العنصر قد نقل 25٪ من ارتفاع منفذ العرض.

مثال على إزاحة المسافة في منفذ العرض ، Google Developers

للتلخيص: يتم قياس CLS من خلال درجة تغيير التخطيط ، والتي يتم حسابها على هذا النحو:

جزء التأثير * جزء المسافة = درجة تحول التخطيط

بأخذ الأمثلة أعلاه ، سيكون الحساب على النحو التالي: 0.75 * 0.25 = 0.1875. تقول Google إن صفحة الويب يجب أن تحتفظ بـ CLS أقل من 0.1 عبر جميع الصفحات أو مشاهدات الصفحة على موقعك. هذا المثال سيكون فوق هذا الهدف ، لذلك سيسجل بشكل سيئ.

رسم توضيحي واحد لإعطائك فكرة أوضح عن كيفية تسجيل CLS: إذا تحول كل شيء داخل منفذ العرض خارج إطار العرض في إطار واحد ، فسيكون لذلك تخطيط درجة 1.0. (انظر الأمثلة الأخرى على جيثب.)

كلما زاد عدد العناصر الموجودة في صفحتك والتي تتغير في منفذ العرض ، يمكن أن تكون نتيجتك أسوأ.

هدف درجة CLS من Google

يمكنك قراءة المزيد حول درجة تحول التخطيط هنا وكيف تحدد Google عتباتها هنا.

كيف يؤثر تغيير التخطيط التراكمي (CLS) على تحسين محركات البحث؟

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

يمكن أن تساعد نتيجة تغيير التخطيط الجيدة في ضمان عدم إحباط المستخدمين من صفحة الويب الخاصة بك ، وعدم النقر عن طريق الخطأ والانتقال إلى صفحة أخرى ، وعدم إجراء عملية شراء عن طريق الخطأ. تساعدك تجربة المستخدم الجيدة على تحقيق جميع النتائج التي نود أن نراها في مُحسّنات محرّكات البحث: التصنيفات وحركة المرور والتحويلات والإيرادات.

وفقًا لبحوث Screaming Frog ، كانت عناوين URL في الموضع 1 من نتائج البحث أكثر احتمالًا بنسبة 10٪ في اجتياز تقييم أساسيات الويب مقارنة بعناوين URL الموجودة في الموضع 9. بالطبع ، تعكس هذه البيانات الصفحات الموجودة - والتي ربما لم يتم ضبطها بدقة يتوافق مع مؤشرات الويب الأساسية حتى الآن - قبل تطبيق هذه العوامل على خوارزميات الترتيب.

بالنظر إلى CLS ، فإن أقل من نصف (46٪) عناوين URL للجوال وأقل من نصف (47٪) عناوين URL لسطح المكتب حصلوا على درجات CLS "جيدة". كان متوسط ​​درجة CLS 0.29 على الأجهزة المحمولة و 0.25 على سطح المكتب. بمعنى آخر ، هناك مجال لتحسين CLS في معظم المواقع .

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

"كم عدد المواقع التي اجتازت تقييم أساسيات الويب الحيوية؟" ، screamingfrog.co.uk

كيف يمكنني تحسين مجموع نقاط تغيير التخطيط التراكمي (CLS)؟

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

تشمل الأدوات المتوفرة ما يلي:

• تقرير تجربة مستخدم Chrome (حقل)
• PageSpeed ​​Insights (معمل وحقل)
• Search Console (تقرير Core Web Vitals) (حقل)
• Chrome DevTools (معمل)
• منارة (معمل)
• WebPageTest (معمل)
• WaterFaller.dev (معمل)

هناك طريقة أخرى لقياس CLS تستخدم مكتبة JavaScript لمؤشرات الويب الحيوية. يمكنك معرفة المزيد عن ذلك هنا.

تشمل الأسباب الشائعة لتغييرات التخطيط ما يلي:

• صور بدون أبعاد
• الإعلانات والفيديو والكائنات الأخرى المضمنة أو إطارات iframe بدون أبعاد
• المحتوى المحقون ديناميكيًا
• يتم تحميل CSS متأخرًا حيث يتم تطبيق الأنماط بعد تحميل العناصر الأخرى
• تسبب خطوط الويب ومضات من نص غير مرئي أو غير منظم
• العناصر الموجودة بالصفحة التي تنتظر تحميل العناصر الأخرى عبر الشبكة قبل ظهورها
• تحريك العناصر حسب "الارتفاع" و "العرض" بدلاً من "تحويل: مقياس ()" في CSS
• تحريك العناصر بواسطة "top" أو "right" أو "bottom" أو "left" بدلاً من "transform: translate ()" في CSS

تتضمن المبادئ الأساسية التي ستعمل على تحسين CLS ما يلي:

1. استخدم دائمًا سمات الحجم للصور ومقاطع الفيديو والعناصر المضمنة الأخرى أو إطارات iframe. إذا تم تحميل عنصر ديناميكيًا ، فاستخدم CSS لتصميم أي عناصر حاوية بنفس الحجم أو نسبة العرض إلى الارتفاع قبل تحميل المحتوى. بعد ذلك ، عندما يتم تحميل المحتوى في عناصر الحاوية هذه ، لن يتم نقل الصفحة.
2. لا تقم أبدًا بإدراج المحتوى ديناميكيًا فوق المحتوى الموجود.
3. في حالة استخدام CSS لتحريك العناصر ، تفضل "تحويل" الرسوم المتحركة.

وتحقق من هذا الفيديو حول CLS من Google Chrome Developers على YouTube:

هل تريد المزيد من المعلومات المتعمقة؟ شاهد ندوة الويب الخاصة بنا عند الطلب 3 نصائح الخبراء لتحسين Core Web Vitals بما في ذلك الأسئلة والأجوبة الموسعة في النهاية.

اقرأ سلسلة تجارب الصفحة الكاملة لمزيد من المعلومات حول تحديث الترتيب هذا:

1. ما هو تحديث تجربة الصفحة؟
2. كيفية إنشاء موقع متوافق مع الجوال
3. الإعلانات البينية المتطفلة ولماذا تعتبر ضارة لتحسين محركات البحث
4. HTTPS للمستخدمين والترتيب
5. نظرة عامة على أساسيات الويب الأساسية
6. أساسيات الويب الأساسية: LCP (أكبر رسم محتوى)
7. أساسيات الويب الأساسية: FID (تأخير الإدخال الأول)
8. أساسيات الويب الأساسية: CLS (تغيير التخطيط التراكمي)