LCP उस समय को मापता है जब तक मुख्य कंटेंट लोड नहीं हो जाता। मुख्य कंटेंट पेज का सबसे बड़ा टेक्स्ट ब्लॉक या इमेज होता है। ज़्यादातर पेज के लिए LCP सबसे अहम मेट्रिक है, क्योंकि इसी से तय होता है कि पेज यूज़र के काम का कब बनता है।
यूज़र पेज पर पहुँचता है। पेज लोड होना शुरू होता है। ब्राउज़र HTML डाउनलोड करता है। ब्राउज़र CSS डाउनलोड करता है। ब्राउज़र JavaScript डाउनलोड करता है। HTML रेंडर होता है। CSS स्टाइल लगाता है। JavaScript चलता है। मुख्य कंटेंट दिखता है। यही LCP है।
एक सेकंड का LCP बहुत अच्छा है। यूज़र को कंटेंट जल्दी दिखता है। तीन सेकंड का LCP धीमा है। यूज़र इंतज़ार करता है। पाँच सेकंड का LCP बहुत धीमा है। यूज़र चला जाता है।
Largest Contentful Paint में क्या गिना जाता है
फ़ोल्ड के ऊपर पेज का सबसे बड़ा एलिमेंट। आमतौर पर इमेज या हेडलाइन। उदाहरण: हीरो इमेज वाला होमपेज। हीरो इमेज सबसे बड़ा एलिमेंट है। हीरो इमेज के दिखने का समय ही LCP है।
उदाहरण: हेडलाइन वाला ब्लॉग आर्टिकल। हेडलाइन सबसे बड़ा एलिमेंट है। हेडलाइन के दिखने का समय ही LCP है।
उदाहरण: प्रोडक्ट इमेज वाला प्रोडक्ट पेज। प्रोडक्ट इमेज सबसे बड़ा एलिमेंट है। प्रोडक्ट इमेज के दिखने का समय ही LCP है।
LCP तब से मापा जाता है जब यूज़र लिंक पर क्लिक करता है (पेज लोड की शुरुआत), उस समय तक जब सबसे बड़ा एलिमेंट दिखता है। इसमें HTML, CSS, JavaScript डाउनलोड करने, इमेज डाउनलोड करने और पेज रेंडर करने का समय शामिल है।
LCP सुधारना
ऑप्टिमाइज़ेशन का लक्ष्य: LCP 2.5 सेकंड से कम।
रणनीति एक: सर्वर रिस्पॉन्स टाइम (TTFB) सुधारें। तेज़ सर्वर का मतलब है HTML जल्दी पहुँचना। रेंडरिंग के लिए HTML का पहुँचना पहली शर्त है। सर्वर सुधारकर, CDN इस्तेमाल करके और डेटाबेस क्वेरी घटाकर TTFB घटाएँ।
रणनीति दो: CSS फ़ाइल का साइज़ घटाएँ। छोटी CSS जल्दी डाउनलोड होती है। पेज रेंडर होने से पहले CSS डाउनलोड होनी ज़रूरी है। बिना इस्तेमाल की स्टाइल हटाकर, मिनिफ़ाई करके और कम ज़रूरी CSS को बाद में लोड करके CSS घटाएँ।
रणनीति तीन: JavaScript फ़ाइल का साइज़ घटाएँ। बड़ी JavaScript एक्ज़ीक्यूशन और रेंडरिंग में देरी करती है। बिना इस्तेमाल का कोड हटाकर, बड़ी फ़ाइलों को बाँटकर और कम ज़रूरी JavaScript को बाद में लोड करके JavaScript घटाएँ।
रणनीति चार: इमेज ऑप्टिमाइज़ करें। इमेज अक्सर सबसे बड़े एलिमेंट (LCP) होती हैं। कंप्रेस करके, आधुनिक फ़ॉर्मैट (WebP) इस्तेमाल करके और इमेज के डायमेंशन घटाकर इमेज का साइज़ घटाएँ।
रणनीति पाँच: ज़रूरी रिसोर्स प्रीलोड करें। ब्राउज़र को बताएँ कि ज़रूरी इमेज या फ़ॉन्ट पहले डाउनलोड करे। इमेज HTML और CSS के साथ-साथ डाउनलोड होती है। इससे LCP घटता है।
असली उदाहरण: ब्लॉग आर्टिकल का LCP ऑप्टिमाइज़ेशन
शुरुआती LCP: 2.8 सेकंड।
जाँच: आर्टिकल की हीरो इमेज सबसे बड़ा एलिमेंट है। इमेज दो मेगाबाइट की है। डाउनलोड में 1.2 सेकंड लगते हैं। इमेज डाउनलोड ही रुकावट है।
ऑप्टिमाइज़ेशन
इमेज कंप्रेस करें: दो मेगाबाइट से घटाकर 0.5 मेगाबाइट करें। अब डाउनलोड में 0.3 सेकंड लगते हैं।
WebP फ़ॉर्मैट में बदलें: इसे और घटाकर 0.3 मेगाबाइट करें। अब डाउनलोड में 0.1 सेकंड लगते हैं।
इमेज प्रीलोड करें: ब्राउज़र को इमेज पहले डाउनलोड करने को कहें। इमेज HTML के साथ-साथ डाउनलोड होती है। 0.2 सेकंड बचते हैं।
ज़रूरी CSS को फ़ोल्ड के ऊपर रखें: पेज रेंडर होने तक का समय घटाएँ। 0.3 सेकंड बचते हैं।
नया LCP: 1.7 सेकंड।
2.8 घटा 1.2 (इमेज डाउनलोड) जमा 0.1 (कंप्रेस्ड इमेज डाउनलोड) बराबर 1.7 सेकंड। लक्ष्य 2.5 से नीचे।
LCP और अलग-अलग तरह के पेज
होमपेज
हीरो इमेज आमतौर पर LCP होती है। इमेज कंप्रेस करके, CDN इस्तेमाल करके और प्रीलोड करके ऑप्टिमाइज़ करें।
ब्लॉग आर्टिकल
हेडलाइन या पहली इमेज LCP होती है। CSS/JavaScript की देरी घटाकर और फ़ॉन्ट प्रीलोड करके ऑप्टिमाइज़ करें।
प्रोडक्ट पेज
प्रोडक्ट इमेज LCP होती है। इमेज कंप्रेस करके और अलग-अलग डिवाइस के लिए रेस्पॉन्सिव इमेज देकर ऑप्टिमाइज़ करें।
चेकआउट पेज
फ़ॉर्म या बटन LCP होता है। CSS/JavaScript घटाकर और ज़रूरी रिसोर्स प्रीलोड करके ऑप्टिमाइज़ करें।
अलग-अलग तरह के पेज की ऑप्टिमाइज़ेशन रणनीति अलग होती है। जानें कि आपका LCP एलिमेंट कौन-सा है। उसी एलिमेंट को ऑप्टिमाइज़ करें।
LCP: मोबाइल बनाम डेस्कटॉप
मोबाइल का LCP आमतौर पर डेस्कटॉप से धीमा होता है। मोबाइल नेटवर्क धीमा होता है। मोबाइल डिवाइस में प्रोसेसिंग पावर कम होती है।
डेस्कटॉप का शुरुआती LCP: 1.5 सेकंड। मोबाइल का शुरुआती LCP: तीन सेकंड।
मोबाइल दो गुना धीमा है। मोबाइल यूज़र को धीमापन ज़्यादा चुभता है।
पहले मोबाइल ऑप्टिमाइज़ करें। इमेज का साइज़ घटाने पर ध्यान दें (मोबाइल पर बैंडविड्थ सीमित होती है)। JavaScript घटाएँ (मोबाइल डिवाइस उसे धीरे पार्स करते हैं)। मोबाइल के लिए सही फ़ॉर्मैट इस्तेमाल करें।
LCP में सुधार कैसे मापें
शुरुआती LCP
ऑप्टिमाइज़ेशन से पहले मापें।
ऑप्टिमाइज़ेशन लागू करें
नया LCP
ऑप्टिमाइज़ेशन के बाद मापें।
सुधार
शुरुआती LCP में से नया LCP घटाएँ।
उदाहरण
शुरुआती 2.8 सेकंड। ऑप्टिमाइज़ेशन के बाद 1.7 सेकंड। सुधार 1.1 सेकंड का है।
असर का हिसाब लगाएँ
1.1 सेकंड के सुधार से कन्वर्ज़न रेट एक प्रतिशत बढ़ सकता है (शुरुआती स्थिति और इंडस्ट्री पर निर्भर)। महीने के पचास हज़ार विज़िटर पर यह पाँच सौ और कन्वर्ज़न हुए, अगर ऑर्डर की कीमत सौ डॉलर हो। यानी महीने के पचास हज़ार डॉलर। साल के छह लाख डॉलर।
इसकी तुलना ऑप्टिमाइज़ेशन की लागत से करें। अगर लागत पचास हज़ार डॉलर है, तो एक महीने में पैसा वसूल। शानदार ROI।
अक्सर पूछे जाने वाले सवाल
हमें कैसे पता चले कि हमारा LCP एलिमेंट कौन-सा है?
Google Chrome DevTools इस्तेमाल करें। पेज पर राइट-क्लिक करें। Inspect चुनें। Performance टैब खोलें। पेज लोड रिकॉर्ड करें। DevTools LCP एलिमेंट दिखा देता है। या PageSpeed Insights देखें। Lighthouse LCP एलिमेंट बता देता है। Search Console की Core Web Vitals रिपोर्ट भी देखें। वह पेज के LCP एलिमेंट दिखाती है। WEMASY के वेबसाइट बिल्डर से आप यह सब सीधे अपनी वेबसाइट पर सेट कर सकते हैं।
क्या LCP सभी पेज के लिए ऑप्टिमाइज़ करें या सिर्फ़ होमपेज के लिए?
सभी पेज ऑप्टिमाइज़ करें। पर ट्रैफ़िक के हिसाब से प्राथमिकता तय करें। होमपेज ज़रूरी है, पर प्रोडक्ट पेज (ई-कॉमर्स के लिए) या आर्टिकल पेज (पब्लिशिंग के लिए) भी उतने ही ज़रूरी हैं। सभी अहम पेज पर LCP मापें। ट्रैफ़िक वॉल्यूम के हिसाब से ऑप्टिमाइज़ेशन की प्राथमिकता तय करें।
क्या प्रीलोडिंग LCP के लिए हमेशा फ़ायदेमंद है?
हमेशा नहीं। प्रीलोडिंग बैंडविड्थ इस्तेमाल करती है। अगर आप किसी गैर-ज़रूरी रिसोर्स को प्रीलोड करते हैं, तो वह बैंडविड्थ खर्च होती है जिससे ज़रूरी रिसोर्स डाउनलोड हो सकता था। सिर्फ़ ज़रूरी रिसोर्स (हीरो इमेज, ज़रूरी फ़ॉन्ट) प्रीलोड करें। कम ज़रूरी रिसोर्स प्रीलोड न करें।
जब मुख्य कंटेंट डायनैमिक हो (API से लोड होता हो), तब LCP कैसे ऑप्टिमाइज़ करें?
API कॉल की देरी LCP में जुड़ जाती है। डेटाबेस ऑप्टिमाइज़ करके, रिस्पॉन्स कैश करके और CDN इस्तेमाल करके API रिस्पॉन्स टाइम घटाएँ। API लोड होने तक स्केलेटन स्क्रीन या प्लेसहोल्डर कंटेंट भी दिखाएँ। प्लेसहोल्डर तुरंत दिखता है। यूज़र को लगता है पेज लोड हो गया। असली कंटेंट बाद में भर जाता है। महसूस होने वाला LCP असली LCP से तेज़ होता है।
क्या LCP एलिमेंट के लिए लेज़ी लोडिंग इस्तेमाल करनी चाहिए?
नहीं। लेज़ी लोडिंग इमेज को तब तक रोके रखती है जब तक वह व्यूपोर्ट में आने वाली न हो। अगर इमेज फ़ोल्ड के ऊपर है (LCP एलिमेंट), तो लेज़ी लोडिंग उसे बेवजह देर करती है। लेज़ी लोड सिर्फ़ फ़ोल्ड के नीचे की इमेज पर करें। LCP एलिमेंट को तुरंत लोड करें।
LCP, FCP (First Contentful Paint) से कैसे अलग है?
FCP तब होता है जब कोई भी कंटेंट दिखता है (छोटा टेक्स्ट भी हो सकता है)। LCP तब होता है जब मुख्य कंटेंट दिखता है (आमतौर पर बड़ी इमेज या हेडलाइन)। FCP, LCP से तेज़ होता है। यूज़र एक्सपीरियंस के लिए LCP ज़्यादा ज़रूरी है। पहले LCP सुधारें।