अपनी वेबसाइट के सबसे बड़े कंटेंटफुल पेंट को कैसे मापें
ए चलाओ फ्री वेबसाइट स्पीड टेस्ट पता लगाने के लिए। आपकी LCP गति तुरंत प्रदर्शित होगी।
आपके गति परीक्षण के परिणाम आपको बताएंगे कि क्या:
- एलसीपी सीमा पूरी हो गई है।
- आपको किसी अन्य कोर वेब वाइटल को अनुकूलित करने की आवश्यकता है।
सबसे बड़े कंटेंटफुल पेंट की गणना कैसे की जाती है?
Google अनुभवों के 75वें प्रतिशतक को देखता है – इसका मतलब है कि 25% वास्तविक वेबसाइट विज़िटर 3.09 सेकंड या उससे अधिक के LCP लोड समय का अनुभव करते हैं, जबकि 75% उपयोगकर्ताओं के लिए LCP 3.09 सेकंड से कम है।
इस उदाहरण में, वास्तविक-उपयोगकर्ता LCP को 3.09 सेकंड के रूप में दिखाया गया है।
-
DebugBear.com के कोर वेब विटल्स डेटा का स्क्रीनशॉट, नवंबर 2022
मेरे प्रमुख वेब विटाल डेटा पर प्रयोगशाला परीक्षण के परिणाम क्या हैं?
साथ यह विशिष्ट वेब गति परीक्षण, आप लैब मेट्रिक्स भी देखेंगे जो एक नियंत्रित परीक्षण वातावरण में एकत्र किए गए थे। हालांकि ये मेट्रिक्स Google रैंकिंग को सीधे प्रभावित नहीं करते हैं, लेकिन इस डेटा के दो फायदे हैं:
- जैसे ही आप अपनी वेबसाइट में सुधार करते हैं, मेट्रिक्स अपडेट हो जाते हैं, जबकि Google के रीयल-टाइम डेटा को पूरी तरह से अपडेट होने में 28 दिन लगेंगे।
- आपको मेट्रिक्स के अतिरिक्त विस्तृत रिपोर्ट मिलती है, जो आपकी वेबसाइट को अनुकूलित करने में आपकी सहायता कर सकती है।
इसके अतिरिक्त, पेजस्पीड इनसाइट्स लैब डेटा भी प्रदान करता है, लेकिन ध्यान रखें कि इसके द्वारा रिपोर्ट किया गया डेटा कभी-कभी भ्रामक हो सकता है नकली थ्रॉटलिंग यह धीमे नेटवर्क कनेक्शन का अनुकरण करने के लिए उपयोग करता है।
आप अपना सबसे बड़ा सामग्रीपूर्ण पेंट तत्व कैसे ढूंढते हैं?
जब आप एक चलाते हैं पृष्ठ गति परीक्षण डीबगबियर के साथ, एलसीपी तत्व को परीक्षा परिणाम में हाइलाइट किया गया है।
कभी-कभी, LCP तत्व एक बड़ी छवि हो सकता है, और दूसरी बार, यह टेक्स्ट का एक बड़ा हिस्सा हो सकता है।
भले ही आपका एलसीपी तत्व एक छवि है या पाठ का एक टुकड़ा, एलसीपी सामग्री तब तक दिखाई नहीं देगी जब तक कि आपका पृष्ठ प्रस्तुत करना शुरू नहीं करता।
उदाहरण के लिए, नीचे दिए गए पृष्ठ पर, एक पृष्ठभूमि छवि सबसे बड़े रंग के लिए ज़िम्मेदार है।
-
DebugBear.com का स्क्रीनशॉट, नवंबर 2022
इसके विपरीत, इस पृष्ठ का LCP टेक्स्ट का एक पैराग्राफ़ है।
-
DebugBear.com का स्क्रीनशॉट, नवंबर 2022
अपनी वेबसाइट के सबसे बड़े कंटेंटफुल पेंट (LCP) को बेहतर बनाने के लिए आपको यह सुनिश्चित करने की आवश्यकता है कि LCP के लिए जिम्मेदार HTML तत्व जल्दी दिखाई दे।
सबसे बड़े कंटेंटफुल पेंट को कैसे सुधारें
एलसीपी में सुधार करने के लिए आपको चाहिए:
- पता लगाएँ कि LCP तत्व को प्रदर्शित करने के लिए कौन से संसाधन आवश्यक हैं।
- देखें कि आप उन संसाधनों को तेज़ी से कैसे लोड कर सकते हैं (या बिल्कुल नहीं)।
उदाहरण के लिए, यदि LCP तत्व एक तस्वीर है, तो आप छवि का फ़ाइल आकार कम कर सकते हैं।
चलाने के बाद ए डीबगबियर गति परीक्षणइसे कैसे अनुकूलित किया जा सकता है, इस बारे में अधिक जानकारी देखने के लिए आप प्रत्येक प्रदर्शन मीट्रिक पर क्लिक कर सकते हैं।
-
DebugBear.com, नवंबर 2022 में सबसे बड़े कंटेंटफुल पेंट विश्लेषण का स्क्रीनशॉट
एलसीपी को प्रभावित करने वाले सामान्य संसाधन हैं:
- रेंडर-ब्लॉकिंग संसाधन।
- ऐसी छवियां जो अनुकूलित नहीं हैं।
- अप्रचलित छवि प्रारूप।
- फ़ॉन्ट्स जो अनुकूलित नहीं हैं।
रेंडर-ब्लॉकिंग रिसोर्सेज को कैसे कम करें
रेंडर-ब्लॉकिंग संसाधन वे फ़ाइलें हैं जिन्हें ब्राउज़र द्वारा स्क्रीन पर पृष्ठ सामग्री आरेखित करने से पहले डाउनलोड करने की आवश्यकता होती है। CSS स्टाइलशीट आमतौर पर रेंडर-ब्लॉकिंग होती हैं, जैसा कि कई स्क्रिप्ट टैग हैं।
रेंडर-ब्लॉकिंग संसाधनों के प्रदर्शन प्रभाव को कम करने के लिए आप यह कर सकते हैं:
- पहचानें कि कौन से संसाधन रेंडर-ब्लॉकिंग कर रहे हैं।
- यदि संसाधन आवश्यक है तो समीक्षा करें।
- समीक्षा करें कि क्या संसाधन को रेंडरिंग ब्लॉक करने की आवश्यकता है।
- देखें कि संसाधन को अधिक तेज़ी से लोड किया जा सकता है, उदाहरण के लिए संपीड़न का उपयोग करना।
आसान तरीका: डिबगबियर में अनुरोध झरनारेंडर-ब्लॉकिंग संसाधनों के अनुरोध को “ब्लॉकिंग” टैग के साथ चिह्नित किया गया है।
-
DebugBear.com का स्क्रीनशॉट, नवंबर 2022
LCP छवि अनुरोधों को कैसे प्राथमिकता दें और गति दें
इस अनुभाग के लिए, हम छवियों पर नई “लाने की प्राथमिकता” विशेषता का लाभ उठाने जा रहे हैं ताकि आपके विज़िटर के ब्राउज़रों को जल्दी से यह पहचानने में मदद मिल सके कि कौन सी छवि पहले लोड होनी चाहिए।
अपने एलसीपी तत्व पर इस विशेषता का प्रयोग करें।
क्यों?
केवल HTML को देखते समय, ब्राउज़र अक्सर तुरंत यह नहीं बता पाते कि कौन-सी छवियां महत्वपूर्ण हैं. एक छवि एक बड़ी पृष्ठभूमि छवि के रूप में समाप्त हो सकती है, जबकि दूसरी वेबसाइट के पाद लेख का एक छोटा सा हिस्सा हो सकती है।
तदनुसार, सभी छवियों को प्रारंभ में कम प्राथमिकता माना जाता है, जब तक कि पृष्ठ प्रस्तुत नहीं किया जाता है और ब्राउज़र जानता है कि छवि कहां दिखाई देती है।
हालाँकि, इसका मतलब यह हो सकता है कि ब्राउज़र केवल LCP छवि को काफी देर से डाउनलोड करना शुरू करता है।
नई प्राथमिकता संकेत वेब मानक ब्राउज़रों को छवियों और अन्य संसाधनों को प्राथमिकता देने में मदद करने के लिए वेबसाइट स्वामियों को अधिक जानकारी प्रदान करने की अनुमति देता है।
नीचे दिए गए उदाहरण में, हम देख सकते हैं कि ब्राउज़र प्रतीक्षा में बहुत समय व्यतीत करता है, जैसा कि ग्रे बार द्वारा दर्शाया गया है।
-
DebugBear.com पर एक निम्न-प्राथमिकता वाली LCP छवि का स्क्रीनशॉट, नवंबर 2022
हम इस LCP छवि को “fetchpriority” विशेषता जोड़ने के लिए चुनेंगे।
छवियों में “FetchPriority” विशेषता कैसे जोड़ें
HTML img टैग में केवल fetchpriority =”high” विशेषता जोड़ने से ब्राउज़र उस छवि को जल्द से जल्द डाउनलोड करने को प्राथमिकता देगा।
<img src="https://www.searchenginejournal.com/optimize-largest-contentful-paint-debugbear-spcs/471883/photo.jpg" fetchpriority="high" />
आधुनिक छवि प्रारूपों और आकार की छवियों का उचित उपयोग कैसे करें
उच्च-रिज़ॉल्यूशन वाली छवियों में अक्सर एक बड़ा फ़ाइल आकार हो सकता है, जिसका अर्थ है कि उन्हें डाउनलोड करने में लंबा समय लगता है।
नीचे दिए गए गति परीक्षण के परिणाम में आप गहरे नीले छायांकित क्षेत्रों को देखकर देख सकते हैं। प्रत्येक पंक्ति ब्राउज़र में आने वाली छवि का एक हिस्सा इंगित करती है।
-
DebugBear.com पर एक बड़ी LCP इमेज का स्क्रीनशॉट, नवंबर 2022
छवि के आकार को कम करने के दो तरीके हैं:
- सुनिश्चित करें कि छवि रिज़ॉल्यूशन जितना संभव हो उतना कम हो। उपयोगकर्ता के डिवाइस के आकार के आधार पर अलग-अलग रिज़ॉल्युशन वाली इमेज दिखाने पर विचार करें.
- एक आधुनिक प्रयोग करें छवि प्रारूप वेबपी की तरह, जो कम फ़ाइल आकार में समान गुणवत्ता की छवियों को संग्रहीत कर सकता है।
फॉन्ट लोडिंग टाइम्स को कैसे ऑप्टिमाइज़ करें
यदि LCP तत्व एक HTML शीर्षक या पैराग्राफ है, तो पाठ के इस भाग के लिए फॉन्ट को जल्दी से लोड करना महत्वपूर्ण है।
इसे प्राप्त करने का एक तरीका उपयोग करना होगा प्रीलोड टैग जो ब्राउज़र को फ़ॉन्ट जल्दी लोड करने के लिए कह सकता है।
फ़ॉन्ट-प्रदर्शन: स्वैप CSS नियम स्पीड-अप रेंडरिंग भी सुनिश्चित कर सकता है, क्योंकि बाद में वेब फ़ॉन्ट पर स्विच करने से पहले ब्राउज़र टेक्स्ट को डिफ़ॉल्ट फ़ॉन्ट के साथ तुरंत प्रस्तुत करेगा।
-
DebugBear.com, नवंबर 2022 पर LCP में देरी करने वाले वेब फोंट का स्क्रीनशॉट
LCP को तेज़ रखने के लिए अपनी वेबसाइट की निगरानी करें
अपनी वेबसाइट की लगातार निगरानी करने से न केवल आपको यह सत्यापित करने की सुविधा मिलती है कि आपके LCP अनुकूलन काम कर रहे हैं, बल्कि यह भी सुनिश्चित करता है कि यदि आपका LCP खराब हो जाता है तो आपको सतर्क कर दिया जाए।
डीबगबियर समय के साथ कोर वेब विटल्स और अन्य साइट स्पीड मेट्रिक्स की निगरानी कर सकता है। गहन लैब-आधारित परीक्षण चलाने के अलावा, उत्पाद Google से वास्तविक-उपयोगकर्ता मेट्रिक्स का भी ट्रैक रखता है।
डीबगबियर को ए के साथ आजमाएं नि: शुल्क 14-दिवसीय परीक्षण.
-
DebugBear.com पर साइट स्पीड मॉनिटरिंग डेटा का स्क्रीनशॉट, नवंबर 2022
