Largest Contentful Paint (LCP)

Philip Walton

Barry Pollard

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

विश्लेषण के लिए, आपको अपनी Analytics सेवा में सिर्फ़ हाल ही में भेजे गए 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 में एलसीपी मेज़र करने के लिए, Largest Contentful Paint API का इस्तेमाल किया जा सकता है. नीचे दिए गए उदाहरण में, largest-contentful-paint एंट्री को सुनने और उन्हें कंसोल में लॉग करने वाला PerformanceObserver बनाने का तरीका बताया गया है.

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 के बीच अंतर के तौर पर दिखेगा. एलसीपी को सही तरीके से मापने के लिए, आपको इन पर ध्यान देना चाहिए. सब-फ़्रेम अपनी 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() का सोर्स कोड देखें.

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

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

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

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

अन्य संसाधन

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

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

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

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

अगर आपको इन मेट्रिक के बारे में कोई सुझाव, शिकायत या राय देनी है, तो web-vitals-feedback Google ग्रुप में जाकर ऐसा किया जा सकता है.