यदि आप एक वर्डप्रेस उपयोगकर्ता हैं, तो मैं दृढ़ता से सलाह देता हूं कि वेबसाइट के प्रदर्शन को प्राथमिकता दें। आगंतुकों को तेजी से लोड होने वाले पृष्ठ वितरित करके, आप अपनी खोज इंजन रैंकिंग में सुधार करेंगे, वेबसाइट ट्रैफ़िक बढ़ाएंगे और पाठकों को एक महान उपयोगकर्ता अनुभव प्रदान करेंगे।
एक वेबसाइट को अनुकूलित करने का एक महत्वपूर्ण हिस्सा Google पेजस्पीड इनसाइट्स, जीटीमेट्रिक्स और पीएसडीआई वेबसाइट स्पीड टेस्ट जैसे प्रदर्शन बेंचमार्किंग टूल का उपयोग करके वेब पेजों का विश्लेषण कर रहा है। ये सेवाएं यूआरएल के प्रदर्शन को रेट करेंगी, पेज के आकार की पुष्टि करेंगी और पुष्टि करेंगी कि पेज को लोड होने में कितना समय लगता है।
प्रदर्शन बेंचमार्किंग टूल न केवल आपके वेब पेजों का विश्लेषण करते हैं, वे यह भी दिखाते हैं कि पेज लोडिंग समय को बेहतर बनाने के लिए किन बातों पर ध्यान देने की आवश्यकता है। उदाहरण के लिए, आपको अप्रयुक्त सीएसएस कोड को हटाने या अपनी वेबसाइट पर छवियों के वजन को कम करने की सलाह दी जा सकती है।
एक अनुशंसा जो आप अक्सर देखेंगे वह है WordPress में रेंडर-ब्लॉकिंग संसाधनों को हटा देना . इस लेख में, मैं समझाऊंगा कि वर्डप्रेस में रेंडर-ब्लॉकिंग संसाधन क्या हैं और दिखाएंगे कि आप उन्हें हटाकर अपनी वेबसाइट के पेज लोडिंग समय को कैसे सुधार सकते हैं।
WordPress में Render-blocking Resources क्या हैं?
वेबसाइट ऑप्टिमाइज़ेशन आपके वेबसाइट पेजों को विज़िटर्स तक जल्द से जल्द पहुँचाने के बारे में है। एक सामान्य पृष्ठ में कई अलग-अलग तत्व होते हैं।
| संरचना और डिज़ाइन | HTML और CSS का उपयोग करके निर्मित |
| सामग्री | पाठ और चित्र |
| गतिशील सामग्री | जावास्क्रिप्ट का उपयोग करके गतिशील सामग्री जैसे वीडियो और स्लाइडर प्रदर्शित किए जाते हैं |
जब कोई आपकी वेबसाइट के किसी पृष्ठ पर जाता है, तो उसका ब्राउज़र पृष्ठ के कोड को ऊपर से नीचे तक संसाधित करेगा। इसे आमतौर पर “पेज रेंडरिंग . के रूप में संदर्भित किया जाता है ".
यदि ब्राउज़र बाहरी CSS या Javascript फ़ाइलों को कॉल का सामना करता है, तो उसे संसाधित होने से पहले पृष्ठ को रेंडर करना बंद करना होगा और इन CSS और Javascript फ़ाइलों को डाउनलोड करना होगा। इसलिए इन संसाधनों को "रेंडर-ब्लॉकिंग . माना जाता है ” क्योंकि वे पेज रेंडरिंग प्रक्रिया को रोक रहे हैं।
रेंडर-ब्लॉकिंग संसाधन उपयोगकर्ता को प्राथमिक सामग्री दिखाने के लिए ब्राउज़र में लगने वाले समय को बढ़ाते हैं, जो एक महत्वपूर्ण प्रदर्शन और खोज इंजन रैंकिंग मीट्रिक है जिसे Google फर्स्ट मीनिंगफुल पेंट (FMP) कहता है।
ध्यान रखें कि टेक्स्ट और इमेज रेंडर-ब्लॉकिंग नहीं हैं और सभी CSS और Javascript फाइलें रेंडर-ब्लॉकिंग भी नहीं हैं। यह बड़ी CSS और Javascript फ़ाइलें होती हैं जो पेज रेंडरिंग को धीमा कर देती हैं।
WordPress पर रेंडर-ब्लॉकिंग रिसोर्सेज की पहचान कैसे करें
वर्डप्रेस पर रेंडर-ब्लॉकिंग संसाधनों को प्रदर्शन बेंचमार्किंग टूल का उपयोग करके आसानी से पहचाना जा सकता है। आपको बस उस पृष्ठ का URL दर्ज करना है जिसका आप परीक्षण करना चाहते हैं।
Google PageSpeed Insights उस कुल समय को हाइलाइट करता है जो रेंडर-अवरुद्ध करने वाले संसाधन आपके पृष्ठ के पहले पेंट में जोड़ते हैं। नीचे आपको एक ब्रेकडाउन दिखाई देगा जो प्रत्येक रेंडर-ब्लॉकिंग रिसोर्स का URL और फ़ाइल का आकार दिखाता है। यह यह भी दिखाता है कि अगर रेंडर-ब्लॉकिंग रिसोर्स को हटा दिया जाता है तो आपका पेज कितनी तेजी से लोड हो सकता है।
GTmetrix प्रत्येक रेंडर-ब्लॉकिंग संसाधन, फ़ाइल के आकार और फ़ाइल को डाउनलोड करने में लगने वाले समय को भी सूचीबद्ध करता है।
हालांकि पीएसडीआई वेबसाइट स्पीड टेस्ट में एक विशिष्ट खंड नहीं है जो रेंडर-अवरुद्ध संसाधनों को हाइलाइट करता है, आप देख सकते हैं कि "फ़ाइल अनुरोध" से पृष्ठों को धीमा करने का क्या कारण है। " क्षेत्र।
यह आइकन, फोंट और जावास्क्रिप्ट फाइलों जैसे रेंडर-ब्लॉकिंग संसाधनों को उजागर करेगा। प्रत्येक संसाधन के लिए फ़ाइल URL, फ़ाइल आकार और डाउनलोड समय प्रदर्शित किया जाता है। फ़ाइल अनुरोध क्षेत्र यह देखने के लिए भी उपयोगी है कि कौन सी छवियां पृष्ठ लोडिंग समय बढ़ा रही हैं।
चूंकि वर्डप्रेस आपकी वेबसाइट पर विभिन्न सीएसएस और जावास्क्रिप्ट फाइलों को कॉल करता है, इसलिए कई पृष्ठों के लिए प्रदर्शन परीक्षण चलाना महत्वपूर्ण है ताकि सभी रेंडर-अवरुद्ध संसाधनों का पता लगाया जा सके। उदाहरण के लिए, आप अपनी वेबसाइट के प्रमुख क्षेत्रों जैसे अपने होम पेज, ब्लॉग इंडेक्स, ब्लॉग पोस्ट, पेज और संपर्क पेज के बारे में प्रदर्शन परीक्षण चला सकते हैं।
महत्वपूर्ण संसाधनों की पहचान करना
एक संसाधन को महत्वपूर्ण माना जाता है यदि किसी वेब पेज के पहले पेंट को प्रदर्शित करना आवश्यक हो। अन्य सभी संसाधनों को गैर-महत्वपूर्ण माना जाता है।
महत्वपूर्ण संसाधनों की पहचान करने के सबसे आसान तरीकों में से एक है Chrome DevTools में कवरेज टैब का उपयोग करना। यह इस बात पर प्रकाश डालता है कि प्रारंभिक पृष्ठ लोड को सही ढंग से प्रदर्शित करने के लिए कितने प्रतिशत फाइलें आवश्यक थीं। क्रिटिकल स्टाइलिंग हरे रंग में प्रदर्शित होती है, जबकि गैर-क्रिटिकल स्टाइल लाल रंग में प्रदर्शित होती है।
नीचे दिए गए स्क्रीनशॉट में, आप देख सकते हैं कि WordPress.org पर, सीएसएस और जावास्क्रिप्ट फ़ाइलों को रेंडर-ब्लॉक करने में कोड का एक बड़ा प्रतिशत उपयोग नहीं किया जा रहा है। कई वर्डप्रेस वेबसाइटों पर यह स्थिति बदतर है, कवरेज परीक्षण में कई फाइलों को हाइलाइट किया गया है जहां प्रत्येक फ़ाइल का 100% अप्रयुक्त है।
इनलाइन कॉल का उपयोग करके वर्डप्रेस में रेंडर-ब्लॉकिंग CSS को खत्म करना
Google अनुशंसा करता है कि सभी महत्वपूर्ण कोड को रेंडर-अवरुद्ध करने वाले संसाधनों से आपके HTML पृष्ठ से इनलाइन कॉल में ले जाया जाए। किसी पृष्ठ के पहले रंग के लिए महत्वपूर्ण शैली को शैली . का उपयोग करके परिभाषित किया जा सकता है सिर . के भीतर ब्लॉक करें आपके पृष्ठ का अनुभाग, जबकि महत्वपूर्ण Javascript फ़ंक्शन को स्क्रिप्ट . का उपयोग करके आपके पृष्ठ के भीतर इनलाइन कहा जा सकता है टैग।
वर्डप्रेस जैसे डायनामिक प्लेटफॉर्म पर जहां सीएसएस और जावास्क्रिप्ट कोड को थीम और प्लगइन्स के माध्यम से वेबसाइट में जोड़ा जाता है, महत्वपूर्ण स्टाइल को मैन्युअल रूप से स्थानांतरित करना अव्यावहारिक हो सकता है। जैसे, कई वर्डप्रेस उपयोगकर्ता नाइट्रोपैक और क्रिटिकल सीएसएस जैसी सेवाओं का उपयोग करते हैं ताकि महत्वपूर्ण स्टाइलशीट स्वचालित रूप से निकाले जा सकें और शीर्ष के भीतर इनलाइन प्रदर्शित हो सकें। अनुभाग।
यदि वेबसाइट स्टाइलिंग छोटी सीएसएस फाइलों में स्थित है, तो आप छोटे स्टाइलशीट से स्टाइल को स्वचालित रूप से इनलाइन करने के लिए प्रदर्शन वर्डप्रेस प्लगइन एसेट क्लीनअप का उपयोग कर सकते हैं।
Async और Defer का उपयोग करके WordPress में Render-blocking Javascript को हटा दें
वर्डप्रेस में रेंडर-ब्लॉकिंग जावास्क्रिप्ट संसाधनों को Async और Defer नामक दो तकनीकों का उपयोग करके समाप्त किया जा सकता है। दोनों विधियां ब्राउज़र को पृष्ठ को रेंडर करना जारी रखने की अनुमति देती हैं, जबकि वर्डप्रेस में सीएसएस और जावास्क्रिप्ट फ़ाइलों के ऊपर-द-फोल्ड सामग्री को पृष्ठभूमि में डाउनलोड किया जाता है।
किसी पृष्ठ पर Async या Defer का उपयोग करना बेहतर हो सकता है, इसलिए दोनों का परीक्षण करना और यह देखना महत्वपूर्ण है कि कौन सी तकनीक सर्वोत्तम परिणाम प्रदान करती है। हालांकि, आप जिस भी तरीके का इस्तेमाल करेंगे, आपको पेज लोड होने में लगने वाले समय में कमी दिखाई देगी।
| Async | पृष्ठ के रेंडर होने पर फ़ाइलें डाउनलोड करें और उपलब्ध होते ही फ़ाइलों को निष्पादित करें |
| स्थगित करें | पृष्ठ के रेंडर होने पर फ़ाइलें डाउनलोड करें और पृष्ठ के रेंडर होने के बाद अनुक्रमिक क्रम में फ़ाइलें निष्पादित करें |
Async और Defer को वर्डप्रेस परफॉर्मेंस प्लगइन का उपयोग करके आपकी पूरी वेबसाइट पर लागू किया जा सकता है।
अपने व्यक्तिगत ब्लॉग पर, मैं पृष्ठों पर जावास्क्रिप्ट को स्थगित करने के लिए प्लगइन Async जावास्क्रिप्ट का उपयोग करता हूं। स्वचालित अनुकूलन निर्माता फ्रैंक गोसेंस द्वारा विकसित, एसिंक जावास्क्रिप्ट आपको एसिंक को लागू करने और गैर-महत्वपूर्ण जावास्क्रिप्ट फाइलों को स्थगित करने देता है और आपको jQuery फाइलों में विभिन्न सेटिंग्स को लागू करने का विकल्प देता है।
आपकी वेबसाइट के लिए सर्वोत्तम सेटिंग निर्धारित करने के लिए प्लगइन का सेटअप विज़ार्ड GTmetrix पर कई परीक्षण चलाएगा।
मैंने Async JavaScript को चुना क्योंकि यह स्वचालित रूप से मेरी पूरी वेबसाइट पर Async या Defer लागू होती है। यह निस्संदेह वर्डप्रेस में रेंडर-ब्लॉकिंग संसाधनों को खत्म करने का सबसे सरल तरीका है, लेकिन आप वर्डप्रेस प्लगइन HTTP / 2 पुश प्रीलोड के साथ बेहतर परिणाम देख सकते हैं।
एक बार जब आप क्रोम के कवरेज टूल या GTmetrix या Google पेजस्पीड इनसाइट्स जैसी प्रदर्शन बेंचमार्किंग सेवा का उपयोग करके अपनी वर्डप्रेस वेबसाइट पर रेंडर-ब्लॉकिंग संसाधनों की पहचान कर लेते हैं, तो आप फ़ाइल के आधार पर फ़ाइल पर HTTP / 2 पुश प्रीलोड का उपयोग करके Async और Defer लागू कर सकते हैं।
यदि आप प्रत्येक फ़ाइल के लिए Async और Defer के प्रदर्शन का परीक्षण करने के इच्छुक हैं, तो आप प्रत्येक संसाधन के लिए सर्वोत्तम तकनीक खोजने में सक्षम होंगे। इससे पृष्ठ लोडिंग समय में अधिक कमी आ सकती है।
Async और Defer को लागू करने के लिए आप जिस भी WordPress प्लगइन का उपयोग करते हैं, सुनिश्चित करें कि कुछ भी टूटा नहीं है, यह सुनिश्चित करने के लिए बाद में अपनी वेबसाइट डिज़ाइन की जाँच करें।
इस विषय के अधिक व्यापक अवलोकन के लिए, कृपया मेरा लेख "डेफर और एसिंक्स का उपयोग करके वर्डप्रेस में जावास्क्रिप्ट के पार्सिंग को कैसे टालें" पढ़ें।
अंतिम विचार
वर्डप्रेस में रेंडर-ब्लॉकिंग रिसोर्सेज पेज लोडिंग समय को बहुत बढ़ा देते हैं। वे आपकी वेबसाइट के उपयोगकर्ता अनुभव को भी प्रभावित करते हैं क्योंकि जब तक सभी रेंडर-अवरुद्ध संसाधनों को डाउनलोड और निष्पादित नहीं किया जाता है, तब तक आगंतुकों को एक खाली पृष्ठ दिखाई देगा।
क्रोम के कवरेज टूल और Google पेजस्पीड इनसाइट्स और जीटीमेट्रिक्स जैसी सेवाएं रेंडर-ब्लॉकिंग संसाधनों की पहचान करना आसान बनाती हैं। फिर आप Async JavaScript और HTTP/2 Push Preload जैसे WordPress प्लगइन्स का उपयोग करके रेंडर-ब्लॉकिंग संसाधनों को समाप्त कर सकते हैं।
पढ़ने के लिए धन्यवाद।
केविन