प्रॉम्प्ट
Largest Contentful Paint एलिमेंट आमतौर पर एक रिस्पॉन्सिव हीरो इमेज होती है। प्रयोग (experiment), रोलबैक और एक्सेसिबिलिटी आवश्यकताओं सहित fetchpriority, loading, preload और srcset का उपयोग करके एक ऑप्टिमाइज़ेशन डिज़ाइन करें।
परिदृश्य और बाधाएं
डेस्कटॉप और मोबाइल अलग-अलग LCP इमेज का उपयोग करते हैं, जबकि पेज फोंट, क्रिटिकल CSS और एनालिटिक्स भी लोड करता है। ब्राउज़र स्वयं संसाधनों को शेड्यूल करता है और प्राथमिकता केवल एक संकेत (hint) है; सभी जगह इम्प्लीमेंटेशन एक समान व्यवहार नहीं करते हैं।
यह क्या टेस्ट करता है
उम्मीदवार को डिस्कवरी टाइमिंग, लोडिंग रणनीति और रिक्वेस्ट प्राथमिकता के बीच अंतर करना आना चाहिए। fetchpriority=high किसी रिसोर्स की सापेक्ष कतार प्राथमिकता को बढ़ाता है, loading=eager/lazy डेफरल को नियंत्रित करता है, और preload किसी रिसोर्स को पहले से घोषित करता है। इन्हें मिलाने से रिक्वेस्ट डुप्लिकेट हो सकती हैं या CSS और फोंट के लिए बैंडविड्थ कम पड़ सकती है।
संदर्भ दृष्टिकोण
LCP एलिमेंट और रिक्वेस्ट चेन की पहचान करने के लिए फील्ड डेटा और परफॉर्मेंस पैनल का उपयोग करें। केवल पुष्ट किए गए above-the-fold LCP इमेज पर ही उच्च प्राथमिकता सेट करें। एक उपयुक्त एसेट का चयन करने के लिए srcset और sizes का उपयोग करें; डेस्कटॉप और मोबाइल दोनों उम्मीदवारों को प्रीलोड न करें। इमेज सूचियों पर उच्च प्राथमिकता से बचें और हीरो इमेज को लेज़ी-लोड (lazy-load) न करें। ट्रैफ़िक का विस्तार करने से पहले LCP, क्रिटिकल-CSS कम्प्लीशन, कुल बाइट्स और लॉन्ग टास्क पर प्रयोग करें।
महत्वपूर्ण विवरण
रिस्पॉन्सिव उम्मीदवारों को प्रीलोड imagesrcset और imagesizes से मेल खाना चाहिए; अन्यथा एक इमेज प्रीलोड हो सकती है और दूसरी रेंडर हो सकती है। लो-एंड डिवाइसों और धीमे नेटवर्क पर नेटवर्क प्राथमिकता, सर्जक (initiator), कैश हिट्स और रिक्वेस्ट क्रम का निरीक्षण करें। एक फीचर स्विच और रोलबैक वर्ज़न बनाए रखें।
सामान्य गलतियाँ
high को एक बाध्यकारी (forced) डाउनलोड मानना; प्रत्येक इमेज को high के रूप में चिह्नित करना; सही इमेज मार्कअप के बजाय preload का उपयोग करना; केवल Lighthouse की जाँच करना; alt, आयामों (dimensions) और क्रॉस-ऑरिजिन कैशिंग को अनदेखा करना; या बेसलाइन के बिना सुधार का दावा करना।
मूल्यांकन रुब्रिक
मजबूत उत्तर ब्राउज़र के अंतरों को स्वीकार करते हुए LCP चयन, प्राथमिकता संघर्ष, रिस्पॉन्सिव निरंतरता, प्रयोग मेट्रिक्स और रोलबैक गेट्स की व्याख्या करते हैं। कमजोर उत्तर रिक्वेस्ट कतार या फील्ड परिणामों को मान्य किए बिना केवल एक विशेषता का नाम देते हैं।
अनुवर्ती प्रश्न
आप fetchpriority के बिना preload का उपयोग कब करेंगे?
preload पर तब विचार करें जब किसी रिसोर्स को HTML में शुरुआत में नहीं खोजा जा सकता है और वास्तव में उसे तुरंत रिक्वेस्ट करने की आवश्यकता होती है। यदि ब्राउज़र पहले से ही इमेज को तुरंत खोज लेता है, तो एक छोटे प्राथमिकता संकेत (priority hint) को रोलबैक करना आसान हो सकता है; दोनों विकल्पों को मापें।
क्या होगा यदि LCP में सुधार होता है लेकिन फोंट धीमे हो जाते हैं?
क्रिटिकल CSS, फोंट और इमेज के लिए रिक्वेस्ट क्रम और बैंडविड्थ की तुलना करें। गैर-महत्वपूर्ण इमेज प्राथमिकता कम करें या डुप्लिकेट प्रीलोड हटाएं, फ़ॉन्ट लोडिंग को एडजस्ट करें और फिर से मापें।
इमेज ऑप्टिमाइज़ करते समय आप एक्सेसिबिलिटी को कैसे बनाए रखते हैं?
लेआउट शिफ्ट को रोकने के लिए सटीक alt टेक्स्ट और स्पष्ट आयाम या aspect-ratio प्लेसहोल्डर रखें। सुनिश्चित करें कि कम बैंडविड्थ पर या इमेज अक्षम होने पर भी सार्थक सामग्री बनी रहे, और सहायक तकनीक (assistive technology) के साथ परीक्षण करें।