इमेज 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 कैसे ठीक करें:

• हमेशा width और height दें: <img width="800" height="600">
• aspect-ratio CSS इस्तेमाल करें: आधुनिक विकल्प के रूप में aspect-ratio: 16/9;
• ऊपर वाली इमेज को लेज़ी लोड न करें: अपनी हीरो इमेज में loading="lazy" न जोड़ें

झटपट सुधार की चेकलिस्ट

1. सभी इमेज को स्मार्ट कम्प्रेस करें (क्वालिटी अपने आप सबसे अच्छी)
2. असल में दिखने वाले साइज़ पर रीसाइज़ करें
3. सभी <img> टैग में width/height एट्रिब्यूट जोड़ें
4. अपनी LCP इमेज प्रीलोड करें
5. स्क्रीन के नीचे की हर चीज़ लेज़ी लोड करें
6. PageSpeed Insights में फिर से जाँचें

अक्सर पूछे जाने वाले सवाल