आपके ब्लॉग का परफॉरमेंस कितना बढ़िया है, यह LCP यानी Largest Contentful Paint पर डिपेंड करता है। अगर ब्लॉग या वेबसाइट का LCP सही है, तो इससे ब्लॉग की रैंकिंग और Users Experience बढ़ने में मदद मिलती है।
गूगल का कहना है, कि साल 2024 में LCP एक Ranking Factor बनेगा और यह Core Web Vitals का एक जरूरी हिस्सा होगा। ब्लॉग और उसके पेज की Loading Speed Increase करने के लिए आपको LCP पर ध्यान देना होगा, उसको ऑप्टिमाइज करना होगा।
मैने आपको अपने पिछले एक लेख में Core Web Vitals 2024 के बारे में विस्तार से बताया है। उसमें मैने आपको बताया कि यह Core Web Vitals क्या हैं, तथा LCP, FCP, FID, CLS, TTFB, TBT, Speed Index क्या होते हैं, इनके बारे में पूरी जानकारी दी है। लेकिन आज का पूरा लेख Largest Contentful Paint यानि LCP के बारे में है, जिसमें मैं आपको LCP को सुधारने के तरीके बताऊंगा। चलिए लेख को शुरु करते हैं-
LCP Metric क्या है
Largest Contentful Paint Meaning – LCP गूगल के Core Web Vitals मैट्रिक्स का पहला और एक महत्वपूर्ण हिस्सा है। क्योंकि LCP आपके वेबसाइट पर मौजूद सबसे बड़े एलिमेंट के लोड होने के समय को मापता है। यह एलिमेंट्स कुछ इस प्रकार हैं –
- टेक्स्ट ब्लॉक
- इमेज
- पोस्टर इमेज
- एनिमेटेड इमेज
- विडियो
इसलिए हम कह सकते हैं, कि यह आपकी वेबसाइट के Loading Time को मापता है। इसलिए अपने यूजर्स को एक अच्छा वेब एक्सपीरियंस देने के लिए LCP स्कोर का अच्छा बहुत जरूरी है।
गूगल इन एलिमेंट्स का साइज़ कैसे मापता हैं
LCP के सभी एलिमेंट्स का साइज़ मापने के लिए Viewport का इस्तेमाल होता हैं आपकी वेबसाइट के Viewport में यूजर को जो एलिमेंट दिखाई देता है उस से इनका साइज़ मापा जाता हैं।
Viewport क्या है
वेबसाइट पर वेबपेज का वह हिस्सा होता है जो यूजर को दिखाई देता हैं उसे Viewport कहा जाता है इसका साइज़ सभी Device में अलग होता है जैसे – मोबाइल और लैपटॉप की स्क्रीन साइज़ अलग होता है इसीलिए Viewport भी अलग होता है।
एक अच्छा LCP स्कोर क्या होना चाहिए
गूगल के अनुसार, अगर आप वेबसाइट पर एक अच्छा User Experience बनाए रखना चाहते हैं, तो आपका LCP स्कोर 2.5 सेकंड या इससे कम होना जरूरी हैं। इसके अलावा वेबसाइट के लोड टाइम को मोबाइल और डेस्कटॉप दोनों पर ऑप्टिमाइज़ करके रखना जरूरी है। यह भी ध्यान देना है, कि वेबसाइट पर आने वाले 75% यूजर के लिए वेबसाइट लोड होने में कितना समय ले रही है। यह टाइम 2.5 Sec के LCP स्कोर के कितना पास और दूर है। इसे हमेशा देखकर Optimize करके रखना है, इससे एक अच्छा User Experience बना रहेगा।
Largest Contentful Paint issue – इसके 10 उपाए
अपनी वेबसाइट के लोडिंग समय को बेहतर बनाने के लिए Largest Contentful Paint (LCP) को ठीक करना बहुत जरूरी है। लेकिन LCP को ऑप्टिमाइज करना आसान काम नहीं है, लेकिन इतना मुश्किल भी नहीं है। इसके लिए आपको कुछ जरूरी फैक्टर्स का ध्यान रखना होगा। इसको बेहतर बनाने के लिए कुछ सरल उपाय ये हैं।
- Images Optimize करें
- Unused Plugins को रिमूव करें
- Render-Blocking Resources को रिमूव करें
- Server Response Time कम करें
- (CDN) Content Delivery Network को यूज करें
- Reliable Web Hosting Provider को चुनें
- Caching Implement करें
- Lazy Loading Issues Fix करें
- JS, CSS, aur HTML Files को छोटा करें
- Third-Party Scripts पर ध्यान दें
1. इमेज Optimize करें
वेबपेज कंटेंट की सभी इमेज को ब्लॉग या वेबसाइट पर Optimize करके लगाना जरूरी होता है, ऐसा नहीं करने से पेज का साइज़ बढ़ता है और होस्टिंग स्टोरेज भी ज्यादा इस्तेमाल होती है।
इसे ठीक करने के लिए आपको ब्लॉग में कम साइज़ की इमेज का इस्तेमाल करना चाहिए। आप Jpg और Png फॉरमेट की इमेज की जगह कंटेंट में Webp के फॉर्मेट में इमेज का इस्तेमाल करें। जिससे इमेज मोबाइल और डेस्कटॉप दोनों स्क्रीन पर जल्दी से लोड हो सके।
जरूरी बिन्दुं :-
- हमेशा वेबसाइट के मोबाइल Version में इमेज साइज़ Medium size पर सेट रखें।
- वेबसाइट के डेस्कटॉप Version में इमेज साइज़ को Large Size पर सेट रखे।
- आप अपने थंबनेल का साइज़ 150 पिक्ससेल वर्ग रखें।
- इमेज का Medium साइज़ 300 पिक्ससेल वर्ग और Large साइज़ 1024 पिक्ससेल वर्ग होना चाहिए।
इससे आप अपने ब्लॉग के Users Experience को Improve कर सकते हैं। Page की Loading Speed को सुधार सकते हैं, Seo Ranking Improve कर सकते हैं। Conversion Rate Improve कर सकते हैं।
2. Unused Plugins को रिमूव करें
वेबसाइट की लोडिंग स्पीड इसलिए भी कम हो सकती है। क्युकी आप ऐसी Plugins को डैशबोर्ड में इनस्टॉल करके रखते हैं, जिनका आप इस्तेमाल भी नहीं करते हैं। इसलिए आपको Unused Plugins को हटा देना चाहिए।
3. Render-Blocking Resources को रिमूव करें
Render-Blocking Resources Kya Hai – वेबसाइट पर मौजूद कुछ ऐसी स्थिर फाइल होती हैं, जिनसे वेब पेज का पहला कंटेंट खुलने में देरी होती है। इन फाइलों को सीएसएस और जावास्क्रिप्ट कहते हैं। इन फाइल्स के कारण वेब पेज के एलिमेंट्स को एक साथ दिखने में समय लगता है। इससे वेबसाइट की स्पीड कम होती है।
अपनी वेबसाइट के Render-Blocking Resources को देखने के लिए आप गूगल के इन टूल्स का भी इस्तेमाल कर सकते हैं। जैसे –
- Page-Insight
- Chrome Dev Tool
- Lighthouse
Render-Blocking Resources को Remove करने के लिए उन फाइलों को Non Render केटेगरी में रखें जो वेब पेज पर पहला कंटेंट लोड होने के लिए जरूरी नहीं है।
CSS और JS को पेज के आखिर में लगाना चाहिए-
आपको वेबसाइट की CSS और JavaScript को Defer या Async करना होगा। इसके लिए आप वेबपेज के एंड में इन CSS Files को लगा सकते हैं।
इससे वेब ब्राउज़र पर पहले HTML और बाद में CSS फाइल लोड होती है। इसके कारण वेबसाइट की लोडिंग स्पीड बड़ने की संभावना बन जाती है।
नोट:- Core Web Vitals Report और Website Speed में अच्छा स्पीड स्कोर बढ़ाना चाहते हैं, तो अपने ब्लॉग से Render Blocking Css और Javascript Files को रिमूव करना ज़रूरी है।
आप WordPress की कुछ प्लगिंस का इस्तेमाल करके Render Blocking Resources को रिमूव कर सकते हैं। जैसे आप WP Rocket, Speed Booster Pack, Total Cache, Light Speed Cache जैसी plugins इस्तेमाल कर सकते हैं।
4. Server Response Time (SRT) कम करें
सर्वर रिस्पांस टाइम जैसा कि इसके नाम से ही पता लग रहा है, यह वो टाइम होता है जो किसी वेब सर्वर को यूजर के वेब पेज लोड करने की Request प्राप्त करने से लेकर उसका उत्तर देने में लग रहा है। उसे सर्वर रिस्पांस टाइम कहा जाता है। इसे कभी- कभी Time to First Byte यानी TTFB भी कहते हैं।
Search Engine Optimization के लिए Server Response Time एक जरूरी हिस्सा है। अगर आपकी वेबसाइट का Server Response Time ज्यादा है, तो यूजर्स को वेबसाइट खुलने का इंतजार करना पड़ सकता है। इसका प्रभाव यह होता है कि यूजर वेबसाइट पर ज्यादा देर नहीं रुकता है। इसे गूगल खराब यूजर एक्सपीरियंस में आंकता है।
नोट:- इसमें उस टाइम को नहीं जोड़ा जाता है जो यूजर डिवाइस में डाटा को Rendor करने में लगा है
5. CDN का इस्तेमाल करना चाहिए
LCP को ठीक करने में CDN एक अहम भूमिका निभाता है। CDN जिसे Content Delivery Network कहा जाता है। इसका इस्तेमाल करके आप अपनी वेबसाइट की Speed Increase कर सकते हैं। क्योंकि CDN वेबसाइट के स्थिर एलिमेंट्स की कॉपी को अलग अलग सर्वर पर बना देता है।
CDN इस्तेमाल करने का फायदा ये होता है, कि यूजर डिवाइस में आपकी वेबसाइट, उसके यानी यूजर के नजदीकी सर्वर से लोड हो जाती है। इस प्रकार आपके वेब होस्टिंग सर्वर पर लोड कम हो जाता है और LCP स्कोर भी अच्छा हो जाता है। यूजर को वेबसाइट पर सबसे बड़ा कंटेंटफुल पेंट जल्दी दिखने लगता है, जिससे वेबसाइट ज्यादा तेज़ स्पीड में काम करती है।
आप Cloudflare CDN का इस्तेमाल कर सकते हैं, मैं भी काफी समय से इसका इस्तेमाल कर रहा हूँ। यह अपनी मुफ्त और प्रीमियम दोनों तरह की सेवाएं प्रदान करता है।
6. भरोसेमंद वेब होस्टिंग प्रोवाइडर चुनें
ऐसा माना जाता है, कि वेबसाइट की परफॉरमेंस हमेशा वेब होस्टिंग फीचर पर निर्भर होती है। इसीलिए हमेशा Core Web Vitals को ध्यान में रखकर ही वेब होस्टिंग को सिलेक्ट करना चाहिए। क्योकि एक अच्छी वेब होस्टिंग हमेशा बहुत सारे फीचर के साथ अच्छा परफॉरमेंस प्रदान करती है। ऐसी वेब होस्टिंग को सिलेक्ट करना सही रहता है, जो स्पीड, सिक्योरिटी, स्टेबल वेब होस्टिंग की सर्विस प्रोवाइड करे। इसलिए होस्टिंग लेने से पहले उसकी रेटिंग, रिव्यु और Specification की जांच पड़ताल कर लें।
7. Caching चालू करें
कैशिंग ऑन करके आप वेबसाइट की लोडिंग स्पीड को बेहतर कर सकते हैं। कैशिंग ऑन करते ही वेबसाइट के कुछ Static (स्थिर) Element, Temporary Memory में स्टोर हो जाते हैं, जैसे वेबसाइट का Logo, इमेज या विडियो आदि।
इससे फायदा यह होता है, कि जब भी यूजर दोबारा वेबसाइट पर आता है, तो यह फिक्स्ड एलिमेंट्स दोबारा डाउनलोड होने की जगह टेंपररी मेमोरी से लोड हो जाते हैं। इसीलिए वेबसाइट जल्दी लोड होने लगती है।
ये Caching दो तरह के होते हैं।
- Browser Caching
- Server-Side Caching
1. Browser Caching
वेब-ब्राउज़र में भी कैशिंग को ऑन रखना चाहिए क्यूंकि ऐसा करने से ब्राउज़र वेबसाइट के Static (स्थिर) Elements को याद रखता हैं।
आप किसी भी वेब-ब्राउज़र में Caching को आसानी से ऑन कर सकते हैं वैसे तो कैशिंग पहले से ऑन रहती है, फिर भी आप Manually चेक कर लें। जब हम ब्राउज़र की History Clear करने जाते हैं, तो हमें Cache Memory में कितना डाटा स्टोर है। देखने को मिल जाता है, जैसा कि आप नीचे देख रहे हैं –
2. Server-Side Caching
सर्वर – यह एक कंप्यूटर सिस्टम है, जो नेटवर्किंग के द्वारा दुसरे कंप्यूटर को अपनी सेवा देता हैं। सर्वर पर डाटा स्टोर करने से लेकर मोबाइल एप्लीकेशन और वेबसाइट होस्टिंग तक सभी काम आसानी से हो जाते हैं। इसीलिए हम कह सकते हैं, कि जहाँ पर किसी वेबसाइट का डाटा स्टोर होता हैं, उसे सर्वर कहा जाता हैं।
इसी प्रकार सर्वर-साइड कैशिंग का अर्थ है, कि वेबसाइट का एक पेज या कुछ डाटा सर्वर पर स्टोर हो जाना इसीलिए जब यूजर आपकी वेबसाइट पर आता है तो सर्वर इस स्टोर किए गए डाटा को दिखा देता है जिससे वेबसाइट लोडिंग टाइम कम होता हैं।
8. Lazy Loading Issues Fix करें
क्या आप जानते हैं कि Lazy Loading क्या है, यह वेबपेज की शुरूआती Rendororing के दौरान Unnecessary CSS और बाकि सभी फालतू की फाइलों को शुरुआत में लोड होने से रोक सकते हैं।
इससे जब यूजर किसी वेब पेज को ओपन करता है, तब उसके सामने सिर्फ वही चीज़े लोड होकर दिखाई देती हैं। जो यूजर के लिए जरूरी होती हैं। वेबसाइट की डिज़ाइन पर ध्यान देना जरूरी है, क्योंकि वेब पेज जल्दी लोड होने से इंटरनेट का इस्तेमाल कम होता है।
अगर आपका वेब पेज ज्यादा लंबा है, और यूजर पेज को लंबे समय तक नीचे स्क्रॉल करता है। इसके लिए आपको Paginated Loading का सपोर्ट लेना चाहिए। यह वेब पेज को ज्यादा पार्ट में बांट देता है। जब यूजर वेबसाइट पर पहुंचता है, ये पार्ट तभी लोड होते हैं। Lazy Loading Issues Fix करने से वेबसाइट तेज और स्मूथली काम करती है।
9. JS, CSS और HTML Files को छोटा (Minify) करें
Core Web Vitals में वेबसाइट की लोडिंग स्पीड सुधारने के लिए वेबसाइट की Javascript, HTML, CSS की फाइलों के कोड से Unnecessary Space, कमेंट और बाकि सभी बिना जरूरत की चीजों को हटाकर छोटा करना है। इससे वेबसाइट की स्पीड में सुधार देखने को मिलेगा।
10. Third-Party Scripts पर ध्यान दें
Third Party Script Code वह कोड होते हैं, जो दूसरे सोर्स जेसे Google Analytics, Customer Support Widgets से लोड होते हैं। ये कोड वेबसाइट पर अलग अलग तरीकों से असर डालते हैं, जिनके रिज़ल्ट कुछ गलत भी हो सकते हैं।
- वेबसाइट की लोडिंग स्पीड को कम कर सकते हैं, जिससे Largest Contentful Paint Issue Create हो सकते हैं।
- वेबसाइट की Interactivity को कम कर सकते हैं, जिससे First Input Delay Issue को बड़ा सकते हैं।
- वेबसाइट के लेआउट को अनचाहे तरीके से चेंज कर सकते हैं, जिससे Cumulative Layout Shift Issue को क्रिएट हो सकता है।
- वेब पेज पर जरूरी Third Party Script Code को रखें, अन्यथा इसको हटा सकते हैं।
निष्कर्ष- LCP को Optimize करने का आसान फार्मूला
LCP Render-Blocking Resources में हुए सुधार को को देखने के लिए Core Web Vitals, First Contentful Paint, Largest Contentful Paint, Time to Interactive, Total Blocking Time, Cumulative Layout Shift, आदि का स्कोर चेक करें। इनके बारे में Detail जानकारी प्राप्त करने के लिए इस लेख को पढ़ें –
- Largest Contentful Paint Meaning
- Core Web Vitals Inp Issues
- Google Core Web Vitals Inp
- Largest Contentful Paint WordPress
Core web Vitals क्या है – 2024 Tutorial
आज मैने आपको इस लेख में How to fix Largest Contentful Paint WordPress के बारे में जानकारी दी है। आशा है कि आपको आज का लेख पसंद आया होगा, जिसमें ये सभी पॉइंट्स को डिस्कस किया है।
अंत तक पढ़ने के लिए आपका धन्यवाद, राधे राधे।