वेबसाइटों के Core Web Vitals में फेल होने का नंबर एक कारण इमेज होती हैं। वे आमतौर पर पेज पर सबसे भारी तत्व होती हैं, रेंडरिंग को ब्लॉक करती हैं, और बिना पहले से जगह आरक्षित किए अचानक लोड होकर लेआउट को हिला (layout shift) देती हैं।
डेवलपर्स के लिए अच्छी बात यह है: इमेज से जुड़ी समस्याएँ Core Web Vitals में सबसे आसानी से ठीक होने वाली समस्याएँ हैं। जटिल जावास्क्रिप्ट ऑप्टिमाइज़ेशन (INP) के विपरीत, इमेज ऑप्टिमाइज़ेशन स्पष्ट और दोहराए जाने वाले नियमों का पालन करता है। यदि आप इन्हें सही कर लेते हैं, तो आप एक ही बार में तीन में से दो प्रमुख मेट्रिक्स (LCP और CLS) को 'Red' से 'Green' में बदल सकते हैं।
यह एक व्यावहारिक चेकलिस्ट है, कोई सैद्धांतिक व्याख्यान नहीं। इसमें दिए गए हर नियम को आप आज ही अपनी वेबसाइट पर लागू कर सकते हैं।
इमेज प्रत्येक Core Web Vital को कैसे प्रभावित करती हैं?
Core Web Vitals वे तीन मेट्रिक्स हैं जिन्हें Google वास्तविक यूज़र अनुभव मापने और सर्च रैंकिंग तय करने के लिए उपयोग करता है:
1. LCP (Largest Contentful Paint): 2.5 सेकंड से कम
यह मापता है कि स्क्रीन पर सबसे बड़ा दिखने वाला मुख्य तत्व कितनी देर में रेंडर होता है। अधिकांश पेजों पर यह मुख्य बैनर या हीरो इमेज (Hero Image) होती है। एक भारी, धीमी हीरो इमेज LCP स्कोर खराब होने का सबसे बड़ा कारण है।
2. CLS (Cumulative Layout Shift): 0.1 से कम
यह पेज लोड होते समय अनपेक्षित हलचल या कंटेंट के अचानक खिसकने को मापता है। बिना चौड़ाई और ऊंचाई (width/height) निर्धारित किए लोड होने वाली इमेज इसका सबसे बड़ा कारण हैं। जब इमेज लोड होती है और नीचे के टेक्स्ट को धक्का देकर नीचे खिसका देती है, तो CLS स्कोर तुरंत गिर जाता है।
3. INP (Interaction to Next Paint): 200 मिलीसेकंड से कम
यह उपयोगकर्ता की क्लिक या टैप जैसी बातचीत पर पेज की प्रतिक्रिया गति को मापता है। अत्यधिक भारी इमेज को डिकोड करने में ब्राउज़र का मुख्य थ्रेड (Main Thread) व्यस्त हो जाता है, जिससे पेज की प्रतिक्रिया धीमी हो सकती है। हल्की इमेज यहाँ भी मदद करती हैं।
2026 Core Web Vitals मानक थ्रेसहोल्ड
Google वास्तविक विज़िटर्स के 75वें प्रतिशतक (75th percentile) पर इन स्कोर्स को मापता है:
चेकलिस्ट भाग 1: LCP सुधारें (मुख्य हीरो इमेज)
1. LCP इमेज को AVIF या WebP में सर्व करें
आधुनिक फ़ॉर्मेट फ़ाइल साइज़ को भारी मात्रा में घटाते हैं। AVIF, JPEG से 50% तक और WebP 25-35% तक छोटा होता है। JPEG vs PNG vs WebP vs AVIF की तुलना देखें ताकि आप सही फ़ॉर्मेट चुन सकें।
2. हीरो इमेज में fetchpriority="high" जोड़ें
ब्राउज़र को बताएं कि यह इमेज सबसे महत्वपूर्ण है। अपनी मुख्य हीरो इमेज पर fetchpriority="high" लगाने से ब्राउज़र अन्य सभी संसाधनों से पहले इसे फेच करता है, जिससे LCP में सैकड़ों मिलीसेकंड की बचत होती है।
3. LCP इमेज को कभी भी Lazy-load न करें!
लेज़ी लोडिंग नीचे की इमेज के लिए बेहतरीन है, लेकिन मुख्य हीरो इमेज पर loading="lazy" लगाना सबसे बड़ी गलती है। इससे सबसे महत्वपूर्ण इमेज देर से लोड होती है। हीरो इमेज को तुरंत, उच्च प्राथमिकता के साथ उत्सुकतापूर्वक (eagerly) लोड होना चाहिए।
4. हीरो इमेज को Preload करें
HTML के <head> में <link rel="preload" as="image"> जोड़ें ताकि ब्राउज़र बाकी HTML पार्स करने से पहले ही इमेज ढूंढ ले।
5. वास्तविक डिस्प्ले साइज़ पर रिसाइज़ करें
800px के कंटेनर में 3000px चौड़ी इमेज भेजने से केवल लोडिंग समय बर्बाद होता है। इसे अधिकतम वास्तविक डिस्प्ले साइज़ पर रिसाइज़ करें और मोबाइल के लिए रिस्पॉन्सिव वेरिएंट्स दें।
क्या आपको अपनी हीरो इमेज सही साइज़ और फ़ॉर्मेट में कंप्रेस करनी है? मुफ़्त इमेज कंप्रेसर का उपयोग करें → या कस्टम कंप्रेसर आज़माएँ →।
चेकलिस्ट भाग 2: CLS सुधारें (इमेज के लिए जगह आरक्षित करें)
इमेज से होने वाला CLS लगभग हमेशा एक ही कारण से होता है: ब्राउज़र को पहले से पता नहीं होता कि इमेज कितनी बड़ी होगी, इसलिए वह कोई जगह नहीं छोड़ता। जब इमेज अचानक आती है, तो सारा टेक्स्ट नीचे खिसक जाता है।
6. हमेशा width और height एट्रिब्यूट्स सेट करें
प्रत्येक <img> एलिमेंट में स्पष्ट width और height पिक्सल एट्रिब्यूट होने चाहिए। ब्राउज़र इमेज लोड होने से पहले ही सही आस्पेक्ट रेशियो की गणना करके खाली जगह आरक्षित कर लेता है।
7. रिस्पॉन्सिव इमेज के लिए CSS aspect-ratio का उपयोग करें
अपने CSS में aspect-ratio: 16 / 9; या संबंधित अनुपात सेट करें ताकि ब्राउज़र किसी भी स्क्रीन चौड़ाई पर आनुपातिक जगह पहले से रोककर रखे।
8. बाद में लोड होने वाली इमेज के लिए कंटेनर रिज़र्व करें
जावास्क्रिप्ट या हिडन कैरोसेल से आने वाली तस्वीरों के कंटेनर की न्यूनतम ऊंचाई (min-height) पहले से तय रखें।
चेकलिस्ट भाग 3: डिलीवरी ऑप्टिमाइज़ेशन (सभी इमेज के लिए)
9. नीचे की इमेज पर loading="lazy" लगाएं
स्क्रीन के नीचे (below-the-fold) मौजूद हर इमेज पर loading="lazy" लगाएं। ब्राउज़र उन्हें केवल तभी लोड करेगा जब उपयोगकर्ता स्क्रॉल करके उनके पास पहुँचेगा।
10. srcset के साथ रिस्पॉन्सिव इमेज दें
srcset और sizes का उपयोग करके मोबाइल यूज़र्स को छोटी इमेज और डेस्कटॉप को बड़ी इमेज भेजें। चूंकि Google मोबाइल डेटा पर रैंकिंग करता है, इसलिए मोबाइल फ़ाइल साइज़ सबसे महत्वपूर्ण है।
11. केवल हीरो नहीं, हर इमेज कंप्रेस करें
पेज की सभी 20-30 तस्वीरों को 80-85% क्वालिटी पर कंप्रेस करें। वेबसाइट स्पीड के लिए इमेज कंप्रेस करने की पूरी गाइड में ऑटोमेशन का पूरा विवरण है।
12. इमेज CDN का उपयोग करें
Cloudflare Images, Cloudinary या ImageKit जैसे इमेज सीडीएन विज़िटर के नज़दीकी सर्वर से इमेज डिलीवर करते हैं और खुद ब खुद WebP या AVIF में बदल देते हैं।
प्राथमिकता क्रम: पहले क्या ठीक करें?
- पहला: हर इमेज में
widthऔरheightजोड़ें (अधिकांश CLS तुरंत हल हो जाएगा)। - दूसरा: LCP हीरो इमेज को WebP/AVIF में बदलें और डिस्प्ले साइज़ पर रिसाइज़ करें।
- तीसरा: हीरो इमेज में
fetchpriority="high"जोड़ें और यदि कोईloading="lazy"लगा हो तो उसे तुरंत हटाएं। - चौथा: नीचे की सभी इमेज पर
loading="lazy"लगाएं। - पाँचवाँ: मोबाइल के लिए
srcsetजोड़ें।
निष्कर्ष
Core Web Vitals में फेल होने का सबसे मुख्य कारण इमेज हैं, और इन्हें ही सबसे आसानी से ठीक भी किया जा सकता है।
इस चेकलिस्ट को क्रम से अपनाएं: स्थिर लेआउट के लिए डायमेंशन, तेज़ LCP के लिए आधुनिक WebP/AVIF हीरो इमेज, और नीचे की इमेज के लिए लेज़ी लोडिंग। इससे आपकी वेबसाइट तेज़ी से लोड होगी और Google सर्च पर बेहतरीन रैंक करेगी!