الـ CLS في Lighthouse
mhmda965290 منذ شهر
أكيد حصلت معاك إنك جيت تضغط على زرار، وفجأة ظهر إعلان أو صورة خلت الزرار يتحرك لتحت، فضغطت على حاجة غلط.
الـ CLS في Lighthouse
الـ CLS هو مقياس بصري بيحسب مجموع كل التحركات غير المتوقعة للعناصر أثناء تحميل الصفحة.
الـ Score بتاعك لازم يكون أقل من 0.1.
لو الموقع عندك بيتحرك يمين وشمال وهو بيحمل، إنت محتاج تطبق الـ 4 قواعد دول فوراً:
حدد أبعاد الصور والفيديو
أشهر سبب للـ CLS هو إن المتصفح بيبدأ يرسم الصفحة وهو مش عارف مساحة الصورة اللي لسه بتتحمل كام، فأول ما الصورة تظهر، تزيح الكلام اللي تحتها.
الحل: لازم دايماً تضيف width و height في كود الـ HTML لأي صورة أو فيديو.
نصيحة: استخدم الـ Aspect Ratio في الـ CSS عشان المتصفح يحجز المكان Placeholder قبل ما الصورة تتحمل.
احجز مكان الإعلانات
الإعلانات والـ Iframes زي فيديوهات يوتيوب أو خرائط جوجل بتاخد وقت عقبال ما تظهر، وغالباً بتظهر فجأة وتغير شكل الصفحة بالكامل.
الحل: حط الإعلان جوه <div> له ارتفاع ثابت. لو الإعلان محملش، المكان هيفضل فاضي بس الصفحة مش هتتحرك.
بلاش حقن المحتوى فوق المحتوى الموجود
لما بتبعت طلب للسيرفر وبعد ما يخلص تروح ضايف عنصر جديد في أول الصفحة، إنت كدة بتدمر الـ CLS.
الحل: لو محتاج تظهر رسالة نجاح أو محتوى جديد، استخدم Skeleton Screens مكان رمادي وهمي بيتحول للمحتوى الحقيقي، أو ضيف المحتوى تحت المحتوى الموجود مش فوقه.
تحسين تحميل الخطوط
أحياناً الخط بتاعك بياخد وقت عقبال ما يتحمل، فالمتصفح بيعرض خط النظام، ولما خطك يجهز، أبعاده بتبقى مختلفة فيقوم شافت الكلام كله.
الحل: استخدم font-display: swap مع التأكد إن خط النظام (Fallback font) قريب في الحجم من خطك الأساسي عشان الفرق يكون غير ملحوظ.
