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 है, जो उपयोगकर्ता को नहीं दिखते
• ऐसे एलिमेंट जो पूरे व्यूपोर्ट को कवर करते हैं, जिन्हें कॉन्टेंट के बजाय बैकग्राउंड माना जाता है
• प्लेसहोल्डर इमेज या कम एंट्रॉपी वाली दूसरी इमेज, जो पेज का सही कॉन्टेंट नहीं दिखाती हैं

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

विश्लेषण के लिए, आपको आंकड़ों की सेवा देने वाली कंपनी को सिर्फ़ हाल ही में भेजे गए 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 में एलसीपी को मापने के लिए, सबसे बड़े Contentful Paint API का इस्तेमाल करें. नीचे दिए गए उदाहरण में, एक ऐसा 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 के बीच अंतर के तौर पर दिखेगा. एलसीपी को सही तरीके से मापने के लिए, आपको इन पर ध्यान देना चाहिए. सब-फ़्रेम अपनी 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() का सोर्स कोड देखें.

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

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

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

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

अन्य संसाधन

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

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

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

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

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