Largest Contentful Paint (LCP)

सबसे बड़े एलिमेंट को रेंडर करने में लगने वाला समय (एलसीपी), स्टेबल वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक है. इससे अनुमानित लोड होने की स्पीड को मापा जाता है. यह पेज लोड होने की टाइमलाइन में उस पॉइंट को मार्क करता है जिस पर पेज का मुख्य कॉन्टेंट लोड होने की संभावना होती है. तेज़ एलसीपी, उपयोगकर्ता को यह भरोसा दिलाने में मदद करता है कि पेज काम का है.

पहले से, वेब डेवलपर के लिए यह आकलन करना चुनौती भरा होता रहा था कि किसी वेब पेज का मुख्य कॉन्टेंट कितनी तेज़ी से लोड होता है और उपयोगकर्ताओं को दिख रहा है. load या DOMContentLoaded जैसी पुरानी मेट्रिक अच्छा काम नहीं करती. ऐसा इसलिए है, क्योंकि यह ज़रूरी नहीं है कि ये मेट्रिक, उपयोगकर्ता को अपनी स्क्रीन पर दिखने वाली मेट्रिक जैसी हों. साथ ही, उपयोगकर्ता पर आधारित नई परफ़ॉर्मेंस मेट्रिक, जैसे कि फ़र्स्ट कॉन्टेंटफ़ुल पेंट (एफ़सीपी), सिर्फ़ लोडिंग के अनुभव की शुरुआत को ही कैप्चर करती है. अगर किसी पेज पर स्प्लैश स्क्रीन या लोडिंग इंडिकेटर दिखाता है, तो यह पल उपयोगकर्ता के लिए ज़्यादा काम का नहीं है.

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

W3C वेब परफ़ॉर्मेंस वर्किंग ग्रुप में हुई चर्चा और Google में की गई रिसर्च के आधार पर, हमें पता चला है कि किसी पेज का मुख्य कॉन्टेंट लोड होने के दौरान, सबसे बड़े एलिमेंट को कब रेंडर किया जाता है, इसे मापना ज़्यादा सटीक होता है.

एलसीपी क्या है?

एलसीपी, व्यूपोर्ट में दिखने वाले सबसे बड़े इमेज या टेक्स्ट ब्लॉक के रेंडर होने में लगने वाले समय की रिपोर्ट करता है. यह समय, उस समय के मुताबिक होता है जब उपयोगकर्ता पहली बार पेज पर गया.

अच्छा एलसीपी स्कोर क्या होता है?

अच्छा उपयोगकर्ता अनुभव देने के लिए, साइटों का एलसीपी 2.5 सेकंड या इससे कम होना चाहिए. यह पक्का करने के लिए कि आपने ज़्यादातर उपयोगकर्ताओं के लिए यह टारगेट पूरा किया है, पेज लोड का 75वां पर्सेंटाइल है. इसे मोबाइल और डेस्कटॉप डिवाइसों के हिसाब से बांटा जाता है.

किन एलिमेंट को माना जाता है?

जैसा कि सबसे बड़े कॉन्टेंटफ़ुल पेंट एपीआई में बताया गया है, सबसे बड़े कॉन्टेंटफ़ुल पेंट के लिए एलिमेंट के टाइप इस तरह हैं:

• <img> एलिमेंट (पहले फ़्रेम के प्रज़ेंटेशन के समय का इस्तेमाल, ऐनिमेशन वाले कॉन्टेंट के लिए किया जाता है, जैसे कि GIF या ऐनिमेशन वाले PNG)
• <svg> एलिमेंट में <image> एलिमेंट
• <video> एलिमेंट (पोस्टर इमेज लोड होने में लगने वाले समय या वीडियो को पहले फ़्रेम को दिखाने के समय का इस्तेमाल किया जाता है—इनमें से जो भी पहले हो)
• ऐसा एलिमेंट जिसमें बैकग्राउंड इमेज वाला एलिमेंट हो, जिसे url() फ़ंक्शन का इस्तेमाल करके लोड किया गया हो, न कि सीएसएस ग्रेडिएंट
• ब्लॉक-लेवल वाले एलिमेंट, जिनमें टेक्स्ट नोड या अन्य इनलाइन-लेवल टेक्स्ट एलिमेंट चाइल्ड शामिल हों.

एलिमेंट को इस सीमित सेट तक सीमित करने का मकसद, जटिलता को कम करना था. आने वाले समय में, इस बारे में अतिरिक्त जानकारी जोड़ी जा सकती है. जैसे, <svg> के बारे में ज़्यादा रिसर्च.

सिर्फ़ कुछ एलिमेंट को ध्यान में रखने के साथ, एलसीपी मेज़रमेंट में कुछ एलिमेंट को शामिल न करने के लिए, {4}ह्यूरिस्टिक का इस्तेमाल किया जाता है. यह ऐसे एलिमेंट होते हैं जिन्हें उपयोगकर्ता "नॉन-कॉन्टेंटफ़ुल" के तौर पर देख सकते हैं. Chromium पर आधारित ब्राउज़र के लिए, इनमें ये शामिल हैं:

• ऐसे एलिमेंट जिनकी ओपैसिटी 0 है, जिससे वे उपयोगकर्ता को नहीं दिखते.
• पूरे व्यूपोर्ट को कवर करने वाले एलिमेंट, जिनके बैकग्राउंड एलिमेंट हो सकते हैं.
• प्लेसहोल्डर इमेज या कम एंट्रॉपी वाली अन्य इमेज, जिनमें पेज का सही कॉन्टेंट नहीं दिखाया गया हो.

ब्राउज़र इन अनुमानों को लगातार बेहतर बनाते रहेंगे, ताकि हम उपयोगकर्ता की उम्मीदों को सबसे बड़े कॉन्टेंटफ़ुल एलिमेंट के मुताबिक बना सकें.

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

एलिमेंट का साइज़ कैसे तय किया जाता है?

एलसीपी के लिए रिपोर्ट किए गए एलिमेंट का साइज़, आम तौर पर वैसा ही साइज़ होता है जो व्यूपोर्ट में उपयोगकर्ता को दिखता है. अगर एलिमेंट, व्यूपोर्ट से बाहर फैल जाता है या किसी एलिमेंट को क्लिप किया गया है या उसमें overflow नहीं है, तो उन हिस्सों को एलिमेंट के साइज़ में नहीं गिना जाता.

जिन इमेज एलिमेंट का साइज़ मूल साइज़ से बदला गया है उनके लिए, रिपोर्ट किया जाने वाला साइज़, दिखने वाला साइज़ होता है या ओरिजनल साइज़, जो भी छोटा हो.

टेक्स्ट एलिमेंट के लिए, एलसीपी सिर्फ़ सबसे छोटे रेक्टैंगल को ध्यान में रखता है जिसमें सभी टेक्स्ट नोड शामिल हो सकते हैं.

सभी एलिमेंट के लिए, एलसीपी, सीएसएस का इस्तेमाल करके लागू किए गए मार्जिन, पैडिंग या बॉर्डर को ध्यान में नहीं रखता.

को जनरेट करता है

एलसीपी को कब रिपोर्ट किया जाता है?

वेब पेज अक्सर अलग-अलग चरणों में लोड होते हैं और इस वजह से, पेज का सबसे बड़ा एलिमेंट लोड होने के दौरान बदल सकता है.

ऐसे बदलाव की संभावना को मैनेज करने के लिए, जैसे ही ब्राउज़र पहला फ़्रेम पेंट करता है, ब्राउज़र सबसे बड़े कॉन्टेंटफ़ुल एलिमेंट की पहचान करने वाला PerformanceEntry टाइप largest-contentful-paint भेजता है. बाद के फ़्रेम को रेंडर करने के बाद, जब भी सबसे बड़े कॉन्टेंटफ़ुल एलिमेंट में बदलाव होता है, तो यह दूसरा PerformanceEntry फ़्रेम भेज देता है.

उदाहरण के लिए, टेक्स्ट और हीरो इमेज वाले पेज पर, हो सकता है कि ब्राउज़र शुरुआत में सिर्फ़ टेक्स्ट रेंडर करे. साथ ही, ब्राउज़र ऐसी largest-contentful-paint एंट्री को भेज सकता है जिसकी element प्रॉपर्टी, <p> या <h1> का रेफ़रंस देती है. हीरो इमेज के लोड होने के बाद, largest-contentful-paint की दूसरी एंट्री भेजी जाती है. इसमें <img> की जानकारी देने वाली element प्रॉपर्टी होती है.

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

देर से लोड होने वाली इमेज और फ़ॉन्ट के अलावा, नया कॉन्टेंट उपलब्ध होने पर पेज डीओएम में नए एलिमेंट जोड़ सकता है. अगर इनमें से कोई भी नया एलिमेंट, पिछले सबसे बड़े कॉन्टेंटफ़ुल एलिमेंट से बड़ा है, तो नया PerformanceEntry बनाया जाता है.

अगर सबसे बड़े कॉन्टेंटफ़ुल एलिमेंट को व्यूपोर्ट से या DOM से भी हटा दिया जाता है, तो यह तब तक सबसे बड़ा कॉन्टेंटफ़ुल एलिमेंट बना रहता है, जब तक कि कोई बड़ा एलिमेंट रेंडर नहीं किया जाता.

जैसे ही उपयोगकर्ता, पेज से इंटरैक्ट (टैप, स्क्रोल करके या बटन दबाने के ज़रिए) करता है, तो ब्राउज़र नई एंट्री की रिपोर्ट करना बंद कर देता है. इसकी वजह यह है कि उपयोगकर्ता के इंटरैक्शन से, उपयोगकर्ता को दिखने वाली जानकारी अक्सर बदल जाती है (खास तौर पर स्क्रोल करते समय).

विश्लेषण के लिए, आंकड़ों की सेवा देने वाली सिर्फ़ PerformanceEntry की रिपोर्ट हाल ही में भेजी गई है.

कॉन्टेंट लोड होने में लगने वाले समय और रेंडर होने में लगने वाले समय की तुलना में अंतर

सुरक्षा की वजहों से, उन क्रॉस-ऑरिजिन इमेज के लिए इमेज रेंडर टाइमस्टैंप नहीं दिखाए जाते हैं जिनमें Timing-Allow-Origin हेडर नहीं होता. इसके बजाय, सिर्फ़ उनकी लोड होने में लगने वाले समय की जानकारी उपलब्ध होती है, जिसे दूसरे एपीआई पहले से दिखाते हैं.

इससे ऐसी स्थिति हो सकती है जो संभव न हो, जहां वेब एपीआई से एलसीपी को एफ़सीपी के मुकाबले पहले रिपोर्ट किया जाता है. ऐसा सिर्फ़ इस सुरक्षा पाबंदी की वजह से हुआ है. इससे पता नहीं चलता कि असल में क्या हो रहा है.

हमारा सुझाव है कि जहां भी हो सके, मेट्रिक को ज़्यादा सटीक बनाने के लिए, Timing-Allow-Origin हेडर को सेट करें.

एलिमेंट लेआउट और साइज़ में किए गए बदलावों को कैसे मैनेज किया जाता है?

नई परफ़ॉर्मेंस का हिसाब लगाने और भेजने में, परफ़ॉर्मेंस ओवरहेड को कम बनाए रखने के लिए, एलिमेंट के साइज़ या पोज़िशन में बदलाव करने से नई एलसीपी कैंडिडेट जनरेट नहीं होती हैं. व्यूपोर्ट में सिर्फ़ एलिमेंट के शुरुआती साइज़ और जगह को ध्यान में रखा जाता है.

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

उदाहरण

यहां कुछ लोकप्रिय वेबसाइटों पर सबसे बड़े एलिमेंट को रेंडर करने में लगने वाले समय के कुछ उदाहरण दिए गए हैं:

इन दोनों टाइमलाइन में, कॉन्टेंट लोड होने के साथ सबसे बड़ा एलिमेंट (हरे रंग से हाइलाइट किया गया) बदलता है. पहले उदाहरण में, सबसे बड़ा एलिमेंट बदलते हुए डीओएम में नया कॉन्टेंट जोड़ा गया है. दूसरे उदाहरण में, व्यूपोर्ट से पिछले सबसे बड़े कॉन्टेंट एलिमेंट को हटाते हुए लेआउट बदल जाता है.

आम तौर पर, देर से लोड होने वाला कॉन्टेंट, पेज पर पहले से मौजूद कॉन्टेंट के मुकाबले बड़ा होता है. हालांकि, ज़रूरी नहीं है कि ऐसा हो. अगले दो उदाहरणों में दिखाया गया है कि पेज के पूरी तरह लोड होने से पहले एलसीपी क्या होता है.

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

एलसीपी को मापने का तरीका

एलसीपी को लैब या फ़ील्ड में मापा जा सकता है. यह इन टूल में उपलब्ध है:

फ़ील्ड टूल

• Chrome के लिए उपयोगकर्ता अनुभव से जुड़ी रिपोर्ट
• PageSpeed Insights
• Search Console (वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली रिपोर्ट)
• web-vitals JavaScript लाइब्रेरी

लैब टूल

• Chrome DevTools
• लाइटहाउस
• PageSpeed Insights
• WebPageTest

JavaScript में एलसीपी को मापें

JavaScript में एलसीपी को मापने के लिए, सबसे बड़े कॉन्टेंटफ़ुल पेंट एपीआई का इस्तेमाल करें. इस उदाहरण में, PerformanceObserver बनाने का तरीका बताया गया है, जो largest-contentful-paint एंट्री सुनता है और उन्हें कंसोल में लॉग करता है.

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    console.log('LCP candidate:', entry.startTime, entry);
  }
}).observe({type: 'largest-contentful-paint', buffered: true});

ऊपर दिए गए उदाहरण में, लॉग की गई हर largest-contentful-paint एंट्री से मौजूदा एलसीपी उम्मीदवार की जानकारी मिलती है. आम तौर पर, आखिरी एंट्री की startTime वैल्यू, एलसीपी वैल्यू होती है. हालांकि, एलसीपी को मापने के लिए सभी largest-contentful-paintएंट्री मान्य नहीं होती.

नीचे दिए गए सेक्शन में, एपीआई की रिपोर्ट और मेट्रिक की गिनती के तरीके के बीच के अंतर को बताया गया है.

मेट्रिक और एपीआई के बीच अंतर

• एपीआई, बैकग्राउंड टैब में लोड किए गए पेजों के लिए, largest-contentful-paint एंट्री भेजता है. हालांकि, एलसीपी का हिसाब लगाते समय उन पेजों को अनदेखा किया जाना चाहिए.
• किसी पेज को बैकग्राउंड में चलाने के बाद, एपीआई largest-contentful-paint एंट्री भेजता है. हालांकि, एलसीपी को कैलकुलेट करते समय इन एंट्री को अनदेखा किया जाना चाहिए. एलिमेंट को सिर्फ़ तब शामिल किया जा सकता है, जब पेज पूरे समय फ़ोरग्राउंड में मौजूद हो.
• जब पेज को बैक/फ़ॉरवर्ड कैश मेमोरी से वापस लाया जाता है, तो एपीआई largest-contentful-paint एंट्री को रिपोर्ट नहीं करता. हालांकि, इन मामलों में एलसीपी को मापा जाना चाहिए, क्योंकि उपयोगकर्ताओं को अलग-अलग पेज विज़िट मिलते हैं.
• एपीआई, iframe में मौजूद एलिमेंट पर ध्यान नहीं देता, लेकिन मेट्रिक ऐसा करता है, क्योंकि वे पेज के उपयोगकर्ता अनुभव का हिस्सा होते हैं. iframe के अंदर एलसीपी वाले पेजों—उदाहरण के लिए, एम्बेड किए गए वीडियो पर पोस्टर इमेज होने पर—यह CrUX और RUM के बीच अंतर के तौर पर दिखेगा. एलसीपी को सही तरीके से मेज़र करने के लिए, आपको iframe शामिल करने होंगे. सब-फ़्रेम, एग्रीगेशन के लिए पैरंट फ़्रेम पर अपनी largest-contentful-paint एंट्री की रिपोर्ट करने के लिए, एपीआई का इस्तेमाल कर सकते हैं.
• नेविगेशन की शुरुआत से ही, एपीआई एलसीपी को मापता है. पहले से रेंडर किए गए पेजों के लिए, इसके बजाय activationStart से एलसीपी को मेज़र करें. ऐसा इसलिए, क्योंकि यह एलसीपी उपयोगकर्ता के अनुभव के हिसाब से होता है.

इन सभी छोटे-छोटे अंतर को याद रखने के बजाय, हमारा सुझाव है कि डेवलपर एलसीपी को मापने के लिए web-vitals JavaScript लाइब्रेरी का इस्तेमाल करें. यह एलसीपी आपके लिए इस तरह के ज़्यादातर अंतर को हैंडल करता है. (इसमें iframe की समस्या शामिल नहीं है.)

import {onLCP} from 'web-vitals';

// Measure and log LCP as soon as it's available.
onLCP(console.log);

JavaScript में एलसीपी को मापने के तरीके के बारे में जानने के लिए, onLCP() का सोर्स कोड देखें.

अगर सबसे बड़ा एलिमेंट सबसे ज़रूरी नहीं है, तो क्या होगा?

कुछ मामलों में, पेज पर मौजूद सबसे ज़रूरी एलिमेंट (या एलिमेंट) सबसे बड़े एलिमेंट के समान नहीं होते. इसके बजाय, डेवलपर इन दूसरे एलिमेंट के रेंडर होने में लगने वाले समय को मापने में ज़्यादा दिलचस्पी ले सकते हैं. ऐसा करने के लिए, एलिमेंट टाइमिंग एपीआई का इस्तेमाल किया जा सकता है, जैसा कि कस्टम मेट्रिक से जुड़े लेख में बताया गया है.

एलसीपी को बेहतर बनाने का तरीका

एलसीपी को ऑप्टिमाइज़ करने के बारे में एक पूरी गाइड उपलब्ध है. इससे आपको फ़ील्ड में एलसीपी टाइम का पता लगाने की प्रोसेस के बारे में जानकारी मिलेगी. साथ ही, लैब डेटा की मदद से उसे ड्रिल-डाउन और ऑप्टिमाइज़ करने की जानकारी भी मिलेगी.

अन्य संसाधन

• साल 2019 में, performance.now() में ऐनी सुलिवन ने Chrome में परफ़ॉर्मेंस को मॉनिटर करने की प्रक्रिया से सीखे सबक

बदलावों का लॉग

कभी-कभी, मेट्रिक को मापने के लिए इस्तेमाल किए जाने वाले एपीआई में गड़बड़ियां मिलती हैं. कभी-कभी, मेट्रिक की परिभाषा में भी गड़बड़ियां मिलती हैं. इसलिए, कभी-कभी बदलाव करने पड़ते हैं. ये बदलाव, आपकी इंटरनल रिपोर्ट और डैशबोर्ड में सुधार या रिग्रेशन के तौर पर दिख सकते हैं.

इसे मैनेज करने में आपकी मदद के लिए, इन मेट्रिक को लागू करने या इनकी परिभाषा में होने वाले सभी बदलावों को इस चेंजलॉग में दिखाया जाता है.

अगर आपके पास इन मेट्रिक के बारे में कोई सुझाव/शिकायत/राय है, तो उसे वेब-वाइटल-सुझाव/शिकायत/राय वाले Google ग्रुप में दें.