LCP क्या है और SEO के लिए इसे कैसे सुधारें

LCP उपयोगकर्ता अनुभव का एक अहम मेट्रिक है और Google का रैंकिंग फ़ैक्टर भी। जब कोई उपयोगकर्ता आपके पेज पर आता है, तो उसे पेज के पूरे लोड होने के समय से मतलब नहीं होता। उसे इस बात से मतलब होता है कि मुख्य सामग्री कब दिखे और वह पढ़ना या इंटरैक्ट करना कब शुरू कर सके। LCP ठीक इसी पल को मापता है: जब सबसे बड़ा सामग्री तत्व दिखने लगता है। LCP सही हो तो पेज तेज़ लगता है। गलत हो तो पेज धीमा लगता है, भले ही बाकी मेट्रिक्स ठीक हों।

LCP को सुधारने के लिए तीन स्तरों पर काम करना पड़ता है: सर्वर का जवाब समय (TTFB) घटाना, रेंडर रोकने वाले संसाधन हटाना, और इमेज अनुकूलित करना। हर तरीका LCP की अलग रुकावट पर काम करता है। तीनों को मिलाकर बड़ा सुधार मिलता है।

LCP क्या है और इसे कैसे मापा जाता है

Largest Contentful Paint (LCP) आपके पेज के सबसे बड़े दिखने वाले सामग्री तत्व के रेंडर होने का समय है। यह एक बड़ी इमेज, वीडियो, हेडलाइन या टेक्स्ट ब्लॉक हो सकता है। LCP उस क्षण से मापा जाता है जब उपयोगकर्ता पेज पर आता है, और तब तक जब तक वह तत्व दिखने लगता है। Google का LCP दस्तावेज़ विस्तृत तकनीकी जानकारी और अनुकूलन रणनीतियाँ देता है।

LCP कोई हाँ या ना वाला मेट्रिक नहीं है। यह एक सतत स्कोर है। Google ने तय किया है कि 2.5 सेकंड से कम LCP "अच्छा" है, 2.5-4 सेकंड के बीच के LCP को सुधार की ज़रूरत है, और 4 सेकंड से ज़्यादा LCP "खराब" है। उपयोगकर्ता 2 सेकंड से कम LCP वाले पेज को बहुत तेज़ मानते हैं। 3-4 सेकंड के LCP वाले पेज साफ़ तौर पर धीमे लगते हैं। 5 सेकंड से ज़्यादा LCP वाले पेज अक्सर छोड़ दिए जाते हैं।

पेज लोड होते समय बड़े सामग्री तत्व आने पर LCP बदलता है। अगर एक बड़ी इमेज 3 सेकंड पर लोड होती है, तो LCP 1 सेकंड से उछलकर 3 सेकंड हो जाता है। यह महत्वपूर्ण है: सिर्फ़ शुरुआती पेंट का समय सुधारना काफ़ी नहीं है। आपको यह भी सुनिश्चित करना होगा कि सभी बड़े सामग्री तत्व तेज़ी से लोड हों।

Time to First Byte (TTFB) को समझना

Time to First Byte (TTFB) वह समय है जो नेविगेशन शुरू होने से लेकर सर्वर के HTML दस्तावेज़ का पहला बाइट लौटाने तक लगता है। TTFB LCP की न्यूनतम सीमा तय करता है। अगर TTFB 2 सेकंड है, तो LCP 2 सेकंड से बेहतर नहीं हो सकता, क्योंकि ब्राउज़र को अभी तक HTML मिला ही नहीं है। LCP घटाने से पहले TTFB घटाना ज़रूरी है।

अच्छा TTFB 600ms से कम है। 600-1800ms के बीच के TTFB को सुधार की ज़रूरत है। 1800ms से ज़्यादा TTFB खराब है। अगर आपका TTFB धीमा है, तो पहले सर्वर अनुकूलन पर ध्यान दें। कोई भी frontend अनुकूलन धीमे सर्वर की भरपाई नहीं कर सकता।

धीमे TTFB के आम कारण: अक्षम बैकएंड कोड, डेटाबेस क्वेरी या सर्वर पर ज़्यादा लोड। धीमी होस्टिंग से भी TTFB ऊँचा रहता है। शेयर्ड होस्टिंग अक्सर बेहद धीमी होती है। बेहतर प्रदर्शन के लिए VPS या क्लाउड होस्टिंग पर जाएँ। CDN का उपयोग करें, ताकि सामग्री आपके उपयोगकर्ताओं के नज़दीकी सर्वरों से दी जाए और TTFB घटे।

PageSpeed Insights आपका TTFB "Server response time" सेक्शन में दिखाता है। अगर TTFB रुकावट है, तो उसे प्राथमिकता के रूप में उभारा जाएगा।

सबसे बड़ा सामग्री तत्व पहचानना

LCP इस पर निर्भर करता है कि आपके पेज का सबसे बड़ा सामग्री तत्व कौन-सा है। ब्लॉग पोस्ट पर सबसे बड़ा तत्व शायद एक बड़ी हीरो इमेज हो। प्रोडक्ट पेज पर यह प्रोडक्ट की फ़ोटो हो सकती है। समाचार साइट पर यह लेख की हेडलाइन हो सकती है। LCP तत्व की पहचान करना उसे सुधारने का पहला कदम है।

LCP तत्व पहचानने के लिए Chrome DevTools इस्तेमाल करें। DevTools खोलें, Performance टैब पर जाएँ, रिकॉर्डिंग शुरू करें और पेज रीलोड करें। Performance रिकॉर्डिंग में "Largest Contentful Paint" मार्क देखें। उस पर होवर करें ताकि पता चले कि किस तत्व ने LCP ट्रिगर किया। तत्व पता चलने के बाद उसे अनुकूलित करें।

LCP तत्व अक्सर एक इमेज होती है। इमेज बड़ी होती हैं और HTML पार्स होने के बाद लोड होती हैं। ज़्यादातर साइटों के लिए इमेज लोडिंग का अनुकूलन LCP पर सबसे बड़ा असर डालता है। स्क्रीन के नीचे वाली इमेज को lazy-load किया जा सकता है, जिससे ऊपर वाली सामग्री का LCP तेज़ होता है।

ज़रूरी संसाधनों को प्रीलोड करना

प्रीलोडिंग ब्राउज़र को किसी संसाधन का डाउनलोड उसकी रेंडरिंग में ज़रूरत पड़ने से पहले ही शुरू करने का निर्देश देती है। अपनी LCP इमेज या अन्य ज़रूरी संसाधनों को HTML के head में `` टैग से प्रीलोड करें। इससे ब्राउज़र को संकेत मिलता है: "इस संसाधन का डाउनलोड अभी शुरू करो।"

उदाहरण: `` ब्राउज़र को बताता है कि हीरो इमेज का डाउनलोड तुरंत शुरू करे, CSS के पार्स होने का इंतज़ार न करे। संसाधन के आकार के अनुसार इससे LCP 100-500ms तक घट सकता है।

प्रीलोड करने में सावधानी रखें। बहुत ज़्यादा संसाधन प्रीलोड करने से बैंडविड्थ बर्बाद होती है। सिर्फ़ सबसे ज़रूरी संसाधन प्रीलोड करें (हीरो इमेज, ज़रूरी फ़ॉन्ट, आवश्यक CSS)। Google की Core Web Vitals अनुकूलन गाइड प्रीलोडिंग की सर्वोत्तम पद्धतियाँ समझाती है।

LCP के लिए इमेज अनुकूलन

अगर आपका LCP तत्व इमेज है, तो इमेज का फ़ाइल आकार और लोडिंग रणनीति अनुकूलित करें। तीन तरीके:

इमेज कम्प्रेस करें। गुणवत्ता खोए बिना कम्प्रेस करने के लिए TinyPNG, ImageOptim या Squoosh जैसे टूल इस्तेमाल करें। JPEG कम्प्रेशन से फ़ाइल का आकार 10-40 गुना तक घट सकता है। 4G नेटवर्क पर इमेज के हर 100KB पर LCP में 100-200ms जुड़ते हैं। कम्प्रेशन का रिटर्न बहुत ऊँचा है।

आधुनिक फ़ॉर्मेट इस्तेमाल करें। WebP, JPEG से 25-35% छोटा होता है। AVIF और भी छोटा है। आधुनिक ब्राउज़रों को WebP और पुराने ब्राउज़रों को JPEG देने के लिए HTML `` एलिमेंट का उपयोग करें, ताकि पुराने ब्राउज़रों के साथ संगतता बनी रहे। सिर्फ़ फ़ॉर्मेट चुनने से LCP 200-400ms तक सुधर सकता है।

इमेज के आयाम (dimensions) तय करें। width और height attributes डालने से लेआउट शिफ़्ट रुकता है और इमेज लोड होने से पहले ब्राउज़र जगह आरक्षित कर सकता है। इससे LCP सीधे नहीं सुधरता, लेकिन यह Cumulative Layout Shift (CLS) को सुधारता है, जो एक और Core Web Vitals मेट्रिक है।

Render-Blocking CSS और JavaScript

रेंडर रोकने वाला CSS ब्राउज़र को तब तक पेज रेंडर नहीं करने देता जब तक CSS डाउनलोड और पार्स न हो जाए। बड़ी CSS फ़ाइलें रेंडरिंग में देरी करती हैं। ज़रूरी CSS को इनलाइन करके और बाकी को स्थगित (defer) करके रेंडर रोकने वाले CSS को कम करें।

Critical CSS वह CSS है जो ऊपर वाली सामग्री (above-the-fold) के लिए ज़रूरी है। इस CSS को इनलाइन करें `