LCP इमेज की समस्या को कैसे ठीक करें

एक धीमी Largest Contentful Paint (LCP) इमेज को 4 चरणों में ठीक करें: इसे इसके डिस्प्ले साइज के अनुसार रीसाइज करें, इसे WebP या AVIF में बदलें, इसे प्रीलोड करें, और fetchpriority को high पर सेट करें। पहले 2 चरण अधिकांश सुधार प्रदान करते हैं और इसके लिए आपके पेज मार्कअप में किसी बदलाव की आवश्यकता नहीं होती है।

अधिकांश पेजों पर सबसे बड़ा कंटेंटफुल पेंट एलिमेंट एक सिंगल हीरो इमेज होती है, जिसका अर्थ है कि LCP वास्तव में आपकी पूरी साइट के बजाय केवल एक फाइल से जुड़ा सवाल है। उस एक फाइल को ठीक करना आमतौर पर उपलब्ध किसी भी अन्य ऑप्टिमाइज़ेशन की तुलना में माप को सबसे अधिक बेहतर बनाता है।

LCP क्या मापता है

LCP यह रिकॉर्ड करता है कि सबसे बड़े दिखाई देने वाले एलिमेंट को रेंडर होने में कितना समय लगता है, जिसे पेज लोड होना शुरू होने के समय से मापा जाता है। Google 2.5 सेकंड या उससे कम को अच्छा, 2.5 से 4 सेकंड को सुधार की आवश्यकता वाला, और 4 सेकंड से अधिक को खराब मानता है।

मापा गया एलिमेंट आमतौर पर एक इमेज होती है, कभी-कभी हेडिंग टेक्स्ट का एक ब्लॉक, और यह हमेशा बिना स्क्रॉल किए दिखाई देने वाली चीज़ होती है। यह एलिमेंट अलग-अलग डिवाइस पर बदल सकता है, क्योंकि डेस्कटॉप लेआउट पर हावी होने वाली हीरो इमेज फोन पर बिना स्क्रॉल किए दिखाई देने वाले हिस्से (fold) से नीचे हो सकती है।

जिम्मेदार एलिमेंट का पता लगाना

Lighthouse चलाएं और Largest Contentful Paint एलिमेंट एंट्री को पढ़ें, जो मापे जा रहे सटीक एलिमेंट का नाम बताती है। अंदाज़ा लगाने से समय बर्बाद होता है, क्योंकि अक्सर वह एलिमेंट वह नहीं होता जिसे लोग मान लेते हैं।

डेस्कटॉप के साथ-साथ मोबाइल पर भी जांचें, क्योंकि लेआउट अलग होते हैं और परिणाम भी। वास्तविक विज़िटर्स का फील्ड डेटा किसी एक लैबोरेटरी रन की तुलना में अधिक विश्वसनीय होता है, क्योंकि नेटवर्क की स्थितियां टेस्ट की तुलना में वास्तविक दुनिया में बहुत अधिक भिन्न होती हैं। जहां दोनों असहमत हों, वहां फील्ड डेटा पर भरोसा करें और डायग्नोसिस के लिए लैबोरेटरी रन का उपयोग करें।

प्रभाव के क्रम में इमेज को ठीक करें

किसी इमेज पर LCP को बेहतर बनाने के लिए, क्रम में इन 6 चरणों पर काम करें।

1. इमेज को उस सबसे बड़े आकार में रीसाइज करें जिसमें वह कभी प्रदर्शित होगी, हाई डेंसिटी स्क्रीन के लिए इसे दोगुना कर दें।
2. इसे WebP में बदलें, या यदि इमेज बड़ी और फोटोग्राफिक है तो AVIF में बदलें।
3. एक हीरो इमेज के लिए 200 KB से कम के टारगेट पर कंप्रेस करें, जो अधिकांश डिज़ाइनों पर पूरी चौड़ाई में प्राप्त करने योग्य है।
4. width और height एट्रिब्यूट्स जोड़ें ताकि ब्राउज़र स्पेस आरक्षित कर सके और कोई लेआउट शिफ्ट न हो।
5. पेज हेड में इमेज को प्रीलोड करें ताकि ब्राउज़र इसे तुरंत फेच करना शुरू कर दे।
6. इमेज एलिमेंट पर fetchpriority को high पर सेट करें, जो ब्राउज़र को बताता है कि यह फाइल सबसे महत्वपूर्ण है।

चरण 1 और 2 आमतौर पर अधिकांश सुधार प्रदान करते हैं, और ये वे 2 चरण हैं जिनमें पेज मार्कअप को छूने की बिल्कुल भी आवश्यकता नहीं होती है।

रीसाइज करना कंप्रेस करने से बेहतर क्यों है

डाइमेंशन्स फाइल साइज के अधिकांश हिस्से को नियंत्रित करते हैं, इसलिए रीसाइज करना किसी भी क्वालिटी सेटिंग की तुलना में अधिक वजन कम करता है। 1200 पिक्सल पर प्रदर्शित होने वाली 4000 पिक्सल की तस्वीर में पेज द्वारा दिखाए जा सकने वाले पिक्सल डेटा से 11 गुना अधिक डेटा होता है।

तीसरी पंक्ति दिखाती है कि रीसाइज करना पहले क्यों आता है। केवल रीसाइज करने ने केवल कंप्रेस करने को पीछे छोड़ दिया, और दोनों के संयोजन ने दोनों को हरा दिया। आंकड़े इमेज और कनेक्शन के आधार पर भिन्न हो सकते हैं, जबकि यह क्रम लगातार बना रहता है।

प्रीलोड और fetchpriority

प्रीलोडिंग ब्राउज़र को पेज को पार्स करना समाप्त करने से पहले हीरो इमेज को फेच करने के लिए कहती है, जिससे आमतौर पर 200 से 500 मिलीसेकंड की बचत होती है। यह सेटिंग इसलिए मायने रखती है क्योंकि ब्राउज़र पार्सिंग प्रक्रिया में देर से इमेज का पता लगाते हैं।

केवल एक इमेज को प्रीलोड करें। कई इमेज को प्रीलोड करने से लाभ समाप्त हो जाता है, क्योंकि ब्राउज़र तब अपना ध्यान ठीक उसी तरह विभाजित करता है जैसा वह सामान्य रूप से करता। fetchpriority को high पर सेट करने से कम मार्कअप के साथ समान परिणाम प्राप्त होता है और शुरुआती HTML में पहले से मौजूद इमेज के लिए यह अक्सर अपने आप में पर्याप्त होता है।

गलतियां जो LCP को बदतर बनाती हैं

• हीरो इमेज को लेजी लोड करना। लेजी लोडिंग उसी फाइल में देरी करती है जिसे आप सबसे पहले चाहते हैं। इसे केवल बिना स्क्रॉल किए दिखाई देने वाले हिस्से (fold) से नीचे ही लागू करें।
• JavaScript के माध्यम से हीरो इमेज लोड करना। स्क्रिप्ट द्वारा इन्सर्ट की गई इमेज तब तक डाउनलोड होना शुरू नहीं हो सकती जब तक स्क्रिप्ट रन न हो जाए।
• CSS बैकग्राउंड इमेज का उपयोग करना। बैकग्राउंड इमेज का पता img एलिमेंट्स की तुलना में देर से चलता है और उन्हें उतनी आसानी से प्राथमिकता नहीं दी जा सकती।
• कई इमेज को प्रीलोड करना। प्रतिस्पर्धी प्राथमिकताएं इस लाभ को पूरी तरह से समाप्त कर देती हैं।
• width और height को छोड़ना। लेआउट शिफ्ट एक अलग माप को नुकसान पहुंचाता है जबकि यह माप सुधरता है।

जब LCP एलिमेंट टेक्स्ट हो

टेक्स्ट आधारित LCP आमतौर पर टेक्स्ट के बजाय वेब फोंट्स के कारण धीमा होता है। ब्राउज़र के पास शब्द तुरंत होते हैं लेकिन वह उन्हें पेंट करने से पहले एक फॉन्ट फाइल का इंतजार करता है।

font-display को swap पर सेट करें ताकि टेक्स्ट एक फॉलबैक फॉन्ट में रेंडर हो और वेब फॉन्ट आने पर स्विच हो जाए। सबसे महत्वपूर्ण सिंगल फॉन्ट फाइल को प्रीलोड करें, और फॉन्ट को उन कैरेक्टर्स तक सीमित (subset) करें जिनका आपके पेज वास्तव में उपयोग करते हैं, जो अक्सर एक फॉन्ट को 200 KB से घटाकर 30 KB से कम कर देता है। अपने खुद के डोमेन से फोंट्स सर्व करने से किसी थर्ड पार्टी से अतिरिक्त कनेक्शन की आवश्यकता समाप्त हो जाती है।

सर्वर रिस्पॉन्स टाइम सीमा तय करता है

LCP आपके सर्वर द्वारा पहला बाइट वापस करने में लगने वाले समय से तेज़ नहीं हो सकता है, इसलिए एक धीमा सर्वर हर दूसरे सुधार को सीमित कर देता है। पहले बाइट के लिए 600 मिलीसेकंड से कम का लक्ष्य रखें।

इमेज को ऑप्टिमाइज़ करने से पहले उस आंकड़े की जांच करें, क्योंकि 2 सेकंड का सर्वर रिस्पॉन्स 2.5 सेकंड के LCP लक्ष्य को असंभव बना देता है, चाहे आप फाइलों के साथ कुछ भी करें। कैशिंग, एक तेज़ होस्ट या कंटेंट डिलीवरी नेटवर्क (CDN) इस समस्या का समाधान करते हैं। इमेज पर काम फिर बची हुई चीज़ों को बेहतर बनाता है न कि कहीं और तय की गई सीमा से लड़ता है।

थर्ड पार्टी स्क्रिप्ट्स भी इमेज में देरी करती हैं

एनालिटिक्स, कंसेंट बैनर, चैट विजेट और विज्ञापन स्क्रिप्ट बैंडविड्थ और प्रोसेसिंग समय के लिए आपकी हीरो इमेज के साथ प्रतिस्पर्धा करते हैं। एक पूरी तरह से ऑप्टिमाइज़ की गई इमेज भी देर से रेंडर होती है जब उससे पहले 12 स्क्रिप्ट लोड होती हैं।

कंसेंट बैनर सबसे अधिक नुकसानदेह होते हैं, क्योंकि कई बैनर विज़िटर द्वारा विकल्प चुनने तक रेंडरिंग को ब्लॉक कर देते हैं। थर्ड पार्टी स्क्रिप्ट्स को defer या async एट्रिब्यूट के साथ लोड करें ताकि वे पेज को न रोकें, और ऑडिट करें कि वास्तव में कितनों की आवश्यकता है। 3 अप्रयुक्त ट्रैकिंग स्क्रिप्ट्स को हटाने से अक्सर इमेज कम्प्रेशन के एक और दौर की तुलना में LCP अधिक बेहतर होता है।

बदलाव का ठीक से परीक्षण करना

एक्सटेंशन अक्षम करके एक प्राइवेट विंडो में टेस्ट करें, और किसी एक परिणाम पर भरोसा करने के बजाय माप को 3 बार चलाएं। अलग-अलग रन के बीच स्कोर में ध्यान देने योग्य अंतर आता है।

सत्यापित करें कि ब्राउज़र को वास्तव में छोटी फाइल प्राप्त हुई है। डेवलपर टूल्स खोलें, Network टैब पर जाएं, इमेज द्वारा फ़िल्टर करें और रीलोड करें। ट्रांसफर किया गया साइज और फॉर्मेट लिस्ट में दिखाई देते हैं। यदि पेज अभी भी पुरानी फाइल सर्व कर रहा है, तो इसका आमतौर पर मतलब है कि एक कैशिंग लेयर पिछले वर्जन को रोके हुए है, न कि यह कि ऑप्टिमाइज़ेशन विफल हो गया।

ठीक करने के बाद LCP को तेज़ रखना

हीरो इमेज को एक-एक करके ठीक करने के बजाय उनके लिए एक नियम निर्धारित करें, क्योंकि नए पेज समस्या को फिर से पैदा कर देते हैं। एक बार ठीक की गई साइट महीनों के भीतर वापस पुरानी स्थिति में आ जाएगी यदि एडिटर्स सीधे कैमरे से अपलोड करते हैं।

हीरो इमेज के लिए एक अधिकतम चौड़ाई और एक अधिकतम फाइल साइज पर सहमति बनाएं, इसे लिख लें, और इसे हर नए पेज पर लागू करें। 1920 पिक्सल चौड़ा और 200 KB से कम जैसा नियम जांचना आसान है और लगभग हर डिज़ाइन को कवर करता है। जहां कई लोग पब्लिश करते हैं, वहां लिखित नियम तकनीक से अधिक मायने रखता है, क्योंकि माप सबसे अच्छे पेज के बजाय सबसे खराब पेज को दर्शाता है।

एक ही बार में हीरो इमेज तैयार करना

साइट पर मौजूद हर हीरो इमेज को एक साथ प्रोसेस करें, क्योंकि वे एक ही स्पेसिफिकेशन और एक ही टारगेट साइज साझा करती हैं। अधिकांश साइटों पर लैंडिंग पेजों, कैटेगरी पेजों और आर्टिकल्स में 10 से 100 के बीच हीरो इमेज होती हैं।

एक बार चौड़ाई और KB टारगेट सेट करें, इमेज को ड्रॉप करें, और हर फाइल मैच होकर वापस आती है। प्रति बैच 500 इमेज तक चलाई जा सकती हैं, पूरी तरह से आपके अपने प्रोसेसर पर आपके ब्राउज़र के अंदर। कुछ भी अपलोड नहीं किया जाता है, इसलिए स्टेजिंग एसेट्स, अप्रकाशित कैंपेन पेज और क्लाइंट का काम आपके कंप्यूटर पर ही सुरक्षित रहता है जबकि पूरी लाइब्रेरी तैयार हो जाती है।