تحسين Core Web Vitals عبر الصور

15 كلمة1m قراءة

خطوات عملية لتقليل LCP ومنع CLS وتحسين INP عبر صور محسّنة ومستجيبة.

1. ربط المقاييس

  • LCP → صورة رئيسية كبيرة.
  • CLS → عدم حجز مساحة.
  • INP → فك ترميز ثقيل.

2. تقليل LCP

  • Preload للصورة الرئيسية.
  • صيغة حديثة + ضغط مناسب.
  • srcset responsive دقيق.

3. منع CLS

  • عرض وارتفاع أو aspect-ratio.
  • حجز مساحة للإعلانات.
  • تجنب إدراج متأخر أعلى الصفحة.

4. تحسين INP

  • Lazy للصور أسفل الشاشة.
  • decoding="async".
  • إزالة بيانات EXIF غير الضرورية.

5. التوصيل

  • CDN + ذاكرة تخزين.
  • سلسلة AVIF/WebP + احتياطي.
  • HTTP/2 أو HTTP/3.

6. المراقبة

  • بيانات حقل (CrUX/RUM).
  • موازنات حجم الصورة hero.
  • تنبيهات عند التراجع.

لغات أخرى

مقالات ذات صلة

أسئلة شائعة

  • كيف تؤثر الصور على LCP؟
    الصور الكبيرة (Hero) غير المضغوطة تؤخر العرض؛ قلل الحجم وحدد الأبعاد.
  • كيف أتجنب CLS؟
    حدد دائمًا العرض والارتفاع أو استخدم aspect-ratio لحجز المساحة.

مجموع التحويلات (تحويل، تحسين، تغيير حجم، قص، إزالة خلفية). حد زيادة واحد كل 5 ثوانٍ لكل مستخدم.