CLS: تحولات التخطيط

التمرير الذي يختبر صبر المستخدم: CLS

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

لماذا يحدث CLS؟

• الصور ومقاطع الفيديو ذات الأحجام غير المحددة.
• تأخر تحميل الخطوط (مشكلة FOIT/FOUT).
• المساحات الإعلانية أو الأدوات المصغّرة المضافة ديناميكيًا.
• تغييرات النمط بسبب التحميل المتأخر لملفات CSS.

الحلول

• أضف قيم العرض والارتفاع إلى جميع علامات و.
• حجز المساحة باستخدام خاصية نسبة العرض إلى الارتفاع في CSS
• عند استخدام font-display: Swap للخط التحميلات، قم بمحاذاة أبعاد الخط الاحتياطي مع الخط الرئيسي.
• إنشاء حاويات ذات ارتفاع ثابت للمساحات الإعلانية.