كيف تؤثر الصور على Core Web Vitals - وكيف تصلح ذلك

الصور مسؤولة عن معظم إخفاقات LCP (Largest Contentful Paint). إذا كانت نتائج Core Web Vitals لديك حمراء، فالصور هي السبب على الأرجح. إليك كيف تصلحها بالضبط.

جرّبه الآن - مجانًا وبلا تسجيل.

اضغط الصور بذكاء ←

الصور و LCP (Largest Contentful Paint)

يقيس LCP متى ينتهي تحميل أكبر عنصر مرئي. في معظم الصفحات يكون هذا العنصر صورة. تريد Google أن يكون LCP أقل من 2.5 ثانية.

كيف تحسّن LCP:

استخدم WebP/AVIF: ملفات أصغر بنسبة 25-50% = تنزيل أسرع. حوّل الآن.
غيّر حجم الصور: قدّم الحجم المناسب للإطار. غيّر الحجم هنا.
حمّل الصورة الرئيسية مسبقًا: <link rel="preload" as="image" href="hero.webp">
استخدم CDN: قدّم الصور من خوادم طرفية قريبة من المستخدمين.
اضبط fetchpriority: <img fetchpriority="high"> للصور في الشاشة الأولى.

الصور و CLS (Cumulative Layout Shift)

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

كيف تحسّن CLS:

حدّد العرض والارتفاع دائمًا: <img width="800" height="600">
استخدم aspect-ratio في CSS: aspect-ratio: 16/9; كبديل حديث
لا تحمّل صور الشاشة الأولى بكسل: لا تضف loading="lazy" إلى الصورة الرئيسية

قائمة الإصلاح السريع

طبّق الضغط الذكي على كل الصور (جودة مثلى تلقائيًا)
غيّر الحجم إلى أبعاد العرض الفعلية
أضف العرض والارتفاع إلى كل وسوم <img>
حمّل صورة LCP مسبقًا
حمّل بكسل كل ما يقع أسفل الشاشة الأولى
أعد الاختبار في PageSpeed Insights

الأسئلة الشائعة

ما النتيجة الجيدة لـ LCP؟

أقل من 2.5 ثانية تعني "Good" (أخضر). من 2.5 إلى 4 ثوانٍ تعني "Needs Improvement" (أصفر). أكثر من 4 ثوانٍ تعني "Poor" (أحمر). تحسين الصور وحده كثيرًا ما ينقلك من الأحمر إلى الأخضر.

هل أحمّل كل الصور بكسل؟

لا! لا تحمّل صور الشاشة الأولى بكسل (خاصة الصورة الرئيسية/صورة LCP). حمّل بكسل فقط الصور الخارجة عن الشاشة في البداية. الإفراط في التحميل الكسول يضر بـ LCP فعلًا.

مستعد؟ مجاني 100%، ويعمل داخل متصفحك.