यदि आप एक WordPress उपयोगकर्ता हैं, तो मैं दृढ़ता से अनुशंसा करता हूं कि वेबसाइट प्रदर्शन को प्राथमिकता दें। विज़िटर्स को तेज़ी से लोड होने वाले पेज देकर, आप अपने सर्च इंजन रैंकिंग में सुधार करेंगे, वेबसाइट ट्रैफिक बढ़ाएंगे और पाठकों को एक शानदार उपयोगकर्ता अनुभव देंगे।
वेबसाइट को अनुकूलित करने का एक महत्वपूर्ण हिस्सा Google PageSpeed Insights, GTmetrix और Pingdom Website Speed Test जैसे प्रदर्शन बेंचमार्किंग टूल का उपयोग करके वेब पेजों का विश्लेषण करना है। ये सेवाएं URL के प्रदर्शन को रेट करती हैं, पेज के आकार की पुष्टि करती हैं और पुष्टि करती हैं कि पेज को लोड होने में कितना समय लगता है।
प्रदर्शन बेंचमार्किंग टूल न केवल आपके वेब पेजों का विश्लेषण करते हैं, बल्कि यह भी दिखाते हैं कि पेज लोडिंग समय में सुधार के लिए क्या संबोधित करने की आवश्यकता है। उदाहरण के लिए, आपको अपनी वेबसाइट पर अनुपयोगी CSS कोड हटाने या छवियों का वजन कम करने की सलाह दी जा सकती है।
एक सिफारिश जो आप अक्सर देखेंगे वह है WordPress में रेंडर-ब्लॉकिंग संसाधनों को समाप्त करना। इस लेख में, मैं बताऊंगा कि WordPress में रेंडर-ब्लॉकिंग संसाधन क्या हैं और उन्हें हटाकर आप अपनी वेबसाइट के पेज लोडिंग समय को कैसे सुधार सकते हैं।
WordPress में रेंडर-ब्लॉकिंग संसाधन क्या हैं?
वेबसाइट अनुकूलन आपके वेबसाइट पेजों को विज़िटर्स तक जल्द से जल्द पहुंचाने के बारे में है। एक सामान्य पेज में कई अलग-अलग तत्व होते हैं।
| संरचना और डिज़ाइन | HTML और CSS का उपयोग करके निर्मित |
| सामग्री | टेक्स्ट और छवियां |
| डायनामिक सामग्री | वीडियो और स्लाइडर जैसी डायनामिक सामग्री JavaScript का उपयोग करके प्रदर्शित की जाती है |
जब कोई आपकी वेबसाइट पर एक पेज पर जाता है, तो उनका ब्राउज़र पेज के कोड को ऊपर से नीचे तक प्रोसेस करेगा। इसे आमतौर पर "पेज रेंडरिंग" कहा जाता है।
यदि ब्राउज़र को बाहरी CSS या JavaScript फाइलों के कॉल मिलते हैं, तो उसे पेज रेंडर करना बंद करना होगा और इन CSS और JavaScript फाइलों को डाउनलोड करना होगा इससे पहले कि उन्हें प्रोसेस किया जा सके। इसलिए इन संसाधनों को "रेंडर-ब्लॉकिंग" माना जाता है क्योंकि वे पेज रेंडरिंग प्रक्रिया को रोक रहे हैं।
रेंडर-ब्लॉकिंग संसाधन ब्राउज़र को उपयोगकर्ता को प्राथमिक सामग्री दिखाने में लगने वाले समय को बढ़ाते हैं, जो एक महत्वपूर्ण प्रदर्शन और सर्च इंजन रैंकिंग मीट्रिक है जिसे Google फर्स्ट मीनिंगफुल पेंट (FMP) कहता है।
ध्यान रखें कि टेक्स्ट और छवियां रेंडर-ब्लॉकिंग नहीं हैं और सभी CSS और JavaScript फाइलें रेंडर-ब्लॉकिंग नहीं हैं। यह बड़े CSS और JavaScript फाइलें होती हैं जो पेज रेंडरिंग को धीमा करती हैं।
WordPress पर रेंडर-ब्लॉकिंग संसाधनों की पहचान कैसे करें
WordPress पर रेंडर-ब्लॉकिंग संसाधनों की पहचान प्रदर्शन बेंचमार्किंग टूल का उपयोग करके आसानी से की जा सकती है। आपको बस उस पेज का URL दर्ज करना है जिसे आप टेस्ट करना चाहते हैं।
Google PageSpeed Insights आपके पेज के पहले पेंट में रेंडर-ब्लॉकिंग संसाधनों द्वारा जोड़े गए कुल समय को हाइलाइट करता है। नीचे आपको एक ब्रेकडाउन दिखाई देगा जो प्रत्येक रेंडर-ब्लॉकिंग संसाधन का URL और फाइल का आकार दिखाता है। यह यह भी दिखाता है कि यदि रेंडर-ब्लॉकिंग संसाधन को समाप्त कर दिया जाए तो आपका पेज कितनी तेजी से लोड हो सकता है।
GTmetrix भी प्रत्येक रेंडर-ब्लॉकिंग संसाधन, फाइल का आकार और फाइल डाउनलोड करने में लगने वाले समय को सूचीबद्ध करता है।
हालांकि Pingdom Website Speed Test में रेंडर-ब्लॉकिंग संसाधनों को हाइलाइट करने वाला कोई विशिष्ट खंड नहीं है, आप "फाइल अनुरोध" क्षेत्र से देख सकते हैं कि पेज को क्या धीमा कर रहा है।
यह आइकन, फॉन्ट और JavaScript फाइलों जैसे रेंडर-ब्लॉकिंग संसाधनों को हाइलाइट करेगा। प्रत्येक संसाधन के लिए फाइल URL, फाइल आकार और डाउनलोड समय प्रदर्शित होता है। फाइल अनुरोध क्षेत्र यह देखने के लिए भी उपयोगी है कि कौन सी छवियां पेज लोडिंग समय बढ़ा रही हैं।
चूंकि WordPress आपकी वेबसाइट पर अलग-अलग CSS और JavaScript फाइलों को कॉल करता है, इसलिए सभी रेंडर-ब्लॉकिंग संसाधनों का पता लगाने के लिए कई पेजों के लिए प्रदर्शन टेस्ट चलाना महत्वपूर्ण है। उदाहरण के लिए, आप अपनी वेबसाइट के प्रमुख क्षेत्रों जैसे होम पेज, ब्लॉग इंडेक्स, ब्लॉग पोस्ट, हमारे बारे में पेज और संपर्क पेज के लिए प्रदर्शन टेस्ट चला सकते हैं।
महत्वपूर्ण संसाधनों की पहचान
एक संसाधन को महत्वपूर्ण माना जाता है यदि यह वेब पेज के पहले पेंट को प्रदर्शित करने के लिए आवश्यक है। अन्य सभी संसाधनों को गैर-महत्वपूर्ण माना जाता है।
महत्वपूर्ण संसाधनों की पहचान करने के सबसे आसान तरीकों में से एक Chrome DevTools में कवरेज टैब का उपयोग करना है। यह सटीक रूप से हाइलाइट करता है कि प्रारंभिक पेज लोड को सही ढंग से प्रदर्शित करने के लिए फाइलों का कितना प्रतिशत आवश्यक था। महत्वपूर्ण स्टाइलिंग हरे रंग में प्रदर्शित होती है, जबकि गैर-महत्वपूर्ण स्टाइलिंग लाल रंग में प्रदर्शित होती है।
नीचे दिए गए स्क्रीनशॉट में, आप देख सकते हैं कि WordPress.org पर, रेंडर-ब्लॉकिंग CSS और JavaScript फाइलों में कोड का एक बड़ा प्रतिशत उपयोग नहीं किया जा रहा है। कई WordPress वेबसाइटों पर यह स्थिति बदतर है, जहां कवरेज टेस्ट कई फाइलों को हाइलाइट करता है जहां प्रत्येक फाइल का 100% अप्रयुक्त है।
इनलाइन कॉल का उपयोग करके WordPress में रेंडर-ब्लॉकिंग CSS को समाप्त करना
Google आपके HTML पेज से एक इनलाइन कॉल में रेंडर-ब्लॉकिंग संसाधनों से सभी महत्वपूर्ण कोड को स्थानांतरित करने की सिफारिश करता है। पेज के पहले पेंट के लिए महत्वपूर्ण स्टाइलिंग को आपके पेज के head सेक्शन में एक style ब्लॉक का उपयोग करके परिभाषित किया जा सकता है, जबकि महत्वपूर्ण JavaScript फंक्शन को Script टैग का उपयोग करके आपके पेज में इनलाइन कॉल किया जा सकता है।
WordPress जैसे डायनामिक प्लेटफॉर्म पर जहां CSS और JavaScript कोड थीम और प्लगइन्स के माध्यम से वेबसाइट में जोड़ा जाता है, महत्वपूर्ण स्टाइलिंग को मैन्युअल रूप से स्थानांतरित करना अव्यावहारिक हो सकता है। जैसे, कई WordPress उपयोगकर्ता NitroPack और Critical CSS जैसी सेवाओं का उपयोग करते हैं ताकि महत्वपूर्ण स्टाइलशीट स्वचालित रूप से निकाली जाएं और head सेक्शन के भीतर इनलाइन प्रदर्शित हों।
यदि वेबसाइट स्टाइलिंग छोटी CSS फाइलों में स्थित है, तो आप प्रदर्शन WordPress प्लगइन Asset Cleanup का उपयोग करके छोटी स्टाइलशीट से स्टाइलिंग को स्वचालित रूप से इनलाइन कर सकते हैं।
Async और Defer का उपयोग करके WordPress में रेंडर-ब्लॉकिंग JavaScript हटाएं
WordPress में रेंडर-ब्लॉकिंग JavaScript संसाधनों को Async और Defer नामक दो तकनीकों का उपयोग करके समाप्त किया जा सकता है। दोनों विधियां ब्राउज़र को पेज रेंडर करना जारी रखने की अनुमति देती हैं जबकि ऊपर-द-फोल्ड सामग्री में WordPress में रेंडर-ब्लॉकिंग CSS और JavaScript फाइलें बैकग्राउंड में डाउनलोड होती हैं।
किसी पेज पर Async या Defer का उपयोग करना बेहतर हो सकता है, इसलिए दोनों का परीक्षण करना महत्वपूर्ण है और देखें कि कौन सी तकनीक सर्वोत्तम परिणाम प्रदान करती है। आप जिस भी विधि का उपयोग करेंगे, पेज लोडिंग समय में कमी देखेंगे।
| Async | पेज रेंडर होने के साथ-साथ फाइलें डाउनलोड करें और फाइलों को निष्पादित करें जैसे ही वे उपलब्ध हों |
| Defer | पेज रेंडर होने के साथ-साथ फाइलें डाउनलोड करें और पेज रेंडर होने के बाद क्रमिक क्रम में फाइलों को निष्पादित करें |
Async और Defer को WordPress प्रदर्शन प्लगइन का उपयोग करके आपकी पूरी वेबसाइट पर लागू किया जा सकता है।
मेरे व्यक्तिगत ब्लॉग पर, मैं पेजों पर JavaScript को डिफर करने के लिए Async JavaScript प्लगइन का उपयोग करता हूं। Autoptimize निर्माता Frank Goossens द्वारा विकसित, Async Javascript आपको गैर-महत्वपूर्ण JavaScript फाइलों पर Async और Defer लागू करने देता है और आपको JQuery फाइलों पर अलग-अलग सेटिंग्स लागू करने का विकल्प देता है।
प्लगइन का सेटअप विज़ार्ड आपकी वेबसाइट के लिए सर्वोत्तम सेटिंग्स निर्धारित करने के लिए GTmetrix पर कई टेस्ट चलाएगा।
मैंने Async JavaScript को चुना क्योंकि यह स्वचालित रूप से मेरी पूरी वेबसाइट पर Async या Defer लागू करता है। यह निस्संदेह WordPress में रेंडर-ब्लॉकिंग संसाधनों को समाप्त करने का सबसे सरल दृष्टिकोण है, लेकिन आप WordPress प्लगइन HTTP/2 Push Preload के साथ बेहतर परिणाम देख सकते हैं।
एक बार जब आप Chrome के कवरेज टूल या GTmetrix या Google PageSpeed Insights जैसी प्रदर्शन बेंचमार्किंग सेवा का उपयोग करके अपनी WordPress वेबसाइट पर रेंडर-ब्लॉकिंग संसाधनों की पहचान कर लेते हैं, तो आप HTTP/2 Push Preload का उपयोग करके फाइल-दर-फाइल आधार पर Async और Defer लागू कर सकते हैं।
यदि आप प्रत्येक फाइल के लिए Async और Defer के प्रदर्शन का परीक्षण करने के इच्छुक हैं, तो आप प्रत्येक संसाधन के लिए सर्वोत्तम तकनीक ढूंढ पाएंगे। इससे पेज लोडिंग समय में अधिक कमी आ सकती है।
आप जिस भी WordPress प्लगइन का उपयोग Async और Defer लागू करने के लिए करते हैं, बाद में अपनी वेबसाइट डिज़ाइन की जांच करना सुनिश्चित करें ताकि यह सुनिश्चित हो सके कि कुछ भी टूटा नहीं है।
इस विषय पर अधिक व्यापक अवलोकन के लिए, कृपया मेरा लेख "WordPress में Defer और Async का उपयोग करके JavaScript पार्सिंग को कैसे डिफर करें" पढ़ें।
अंतिम विचार
WordPress में रेंडर-ब्लॉकिंग संसाधन पेज लोडिंग समय को काफी बढ़ाते हैं। वे आपकी वेबसाइट के उपयोगकर्ता अनुभव को भी प्रभावित करते हैं क्योंकि विज़िटर्स को एक खाली पेज दिखाई देगा जब तक कि सभी रेंडर-ब्लॉकिंग संसाधन डाउनलोड और निष्पादित नहीं हो जाते।
Chrome का कवरेज टूल और Google PageSpeed Insights और GTmetrix जैसी सेवाएं रेंडर-ब्लॉकिंग संसाधनों की पहचान करना आसान बनाती हैं। आप Async JavaScript और HTTP/2 Push Preload जैसे WordPress प्लगइन्स का उपयोग करके रेंडर-ब्लॉकिंग संसाधनों को समाप्त कर सकते हैं।
पढ़ने के लिए धन्यवाद।
Kevin
