वर्डप्रेस पर पेज साइज कैसे कम करें: एक बेस्ट प्रैक्टिस गाइड

वर्डप्रेस पर पेज साइज कैसे कम करें: एक बेस्ट प्रैक्टिस गाइड

अपडेट: मार्च 2021

जब वेब पेज के वजन की बात आती है, तो आकार मायने रखता है। आखिरकार, किसी वेब पेज का फ़ाइल आकार जितना छोटा होगा, वह उतनी ही तेज़ी से लोड होगा। यह कोई ब्रेनर नहीं है।

पेज वेट – उर्फ ​​​​पेज साइज या पेज ब्लोट – एक विशेष वेब पेज के समग्र आकार को संदर्भित करता है, जिसमें पेज बनाने के लिए उपयोग की जाने वाली सभी फाइलें शामिल हैं: HTML दस्तावेज़, स्टाइल शीट, चित्र, स्क्रिप्ट और अन्य मीडिया।

पेज स्पीड, अपटाइम, पहली बाइट का समय, HTTP रिक्वेस्ट आदि के अलावा ट्रैक करने के लिए यह एक और वेबसाइट मीट्रिक है।

लेकिन क्या वाकई इससे फर्क पड़ता है? क्या यह एक सार्थक मीट्रिक है? और आपको पृष्ठ का आकार कैसे कम करना चाहिए और अपनी वर्डप्रेस साइट की गति कैसे बढ़ानी चाहिए?

चलो एक नज़र डालते हैं।

2021 में औसत डेस्कटॉप वेबसाइट 2038.4 kb है

1990 के दशक में, वेबसाइटें काफी बुनियादी थीं और इसमें साधारण HTML फाइलें और छोटी छवियां (और निर्माणाधीन GIFs!) शामिल थीं। आजकल, वे विभिन्न HTML, CSS और जावास्क्रिप्ट फ़ाइलों, छवियों, वीडियो, फोंट और अन्य फ़ाइल प्रकारों को शामिल करने के लिए विकसित हुए हैं।

HTTP आर्काइव द्वारा एकत्र किए गए आंकड़ों के अनुसार, 2010 में औसत वेब पेज का आकार 2021 में 2038.4 केबी की तुलना में 467.7 केबी था।

समय के साथ पृष्ठ का आकार

अविश्वसनीय रूप से, 2010 के बाद से मोबाइल वेब पेजों का आकार 336% बढ़ गया है, हालांकि मुझे यह बताना चाहिए कि HTTP आर्काइव ने पहली बार मई 2011 में मोबाइल वेब पेज वेट डेटा एकत्र करना शुरू किया था – उस समय मोबाइल वेब पेजों का औसत आकार 144.8kb था।

जैसे-जैसे वेबसाइटें वर्षों में विकसित हुई हैं, एक वेब पेज का औसत आकार तेजी से बढ़ा है। हालांकि आगे बढ़ने से पहले कुछ चेतावनियां ध्यान देने योग्य हैं:

  • वहाँ वेब पेजों का औसत आकार, जैसा कि HTTP आर्काइव द्वारा प्रकाशित किया गया है, एक बड़े डेटासेट से लिया गया औसत है। क्या यह एक “विशिष्ट” वेबसाइट का प्रतिनिधित्व करता है? शायद नहीं। मेरा मतलब है, एक विशिष्ट वेबसाइट भी क्या है?
  • HTTP संग्रह से इन नंबरों का उपयोग अपनी स्वयं की वेबसाइट के बेंचमार्क के रूप में नहीं करना सबसे अच्छा है। वे ऐतिहासिक रुझान हैं।
  • कुछ वेबसाइट वास्तव में समय के साथ सिकुड़ गई हैं। जबकि कुछ वेबसाइटों ने वीडियो, पूर्णस्क्रीन इमेजरी, कस्टम फोंट और अन्य डिज़ाइन तत्वों के साथ अपने दृष्टिकोण में पूर्ण मीडिया का उपयोग किया है, अन्य ने अधिक न्यूनतम दृष्टिकोण अपनाया है।

वीडियो औसत पृष्ठ भार का 65.9% बनाता है

लंबे समय से, डेवलपर्स छवियों के आकार के बारे में चिंतित रहे हैं, और वे कुल पृष्ठ आकार के लिए कितना खाते हैं। लेकिन वाह… देखें कैसे वीडियो पूरी तरह से छवियों से आगे निकल गए हैं:

वर्डप्रेस पर पेज साइज कैसे कम करें: एक बेस्ट प्रैक्टिस गाइड

नवीनतम HTTP संग्रह डेटा दिखाता है कि अब वीडियो औसत वेब पेज के कुल आकार का दो-तिहाई है।

इसे परिप्रेक्ष्य में रखने के लिए, मई 2016 में डेस्कटॉप के लिए वीडियो का औसत वजन सिर्फ 286.3kb था। दिलचस्प बात यह है कि 2021 में वीडियो का औसत आकार डेस्कटॉप की तुलना में मोबाइल पर बड़ा है।

वर्डप्रेस पर पेज साइज कैसे कम करें: एक बेस्ट प्रैक्टिस गाइड

हाल के वर्षों में वीडियो के उपयोग में विस्फोट हुआ है। अधिक से अधिक वेबसाइटें वीडियो हेडर और अन्य मीडिया तत्वों का उपयोग कर रही हैं। वर्डस्ट्रीम के अनुसार, 87% ऑनलाइन विपणक वीडियो सामग्री का उपयोग करते हैं, एक-तिहाई ऑनलाइन गतिविधि वीडियो देखने में व्यतीत होती है, और आधे से अधिक वीडियो सामग्री मोबाइल पर देखी जाती है।

कस्टम फ़ॉन्ट कहीं नहीं जा रहे हैं

पृष्ठ आकार में वेबफ़ॉन्ट का एक और योगदान है, लेकिन जैसा कि आंकड़े बताते हैं, लोकप्रियता में उनकी वृद्धि वास्तव में चिंता की कोई बात नहीं है। जनवरी 2021 में 132.1kb की तुलना में नवंबर 2010 में, फोंट का कुल पृष्ठ आकार 59.2kb था।

वर्डप्रेस पर पेज साइज कैसे कम करें: एक बेस्ट प्रैक्टिस गाइड

इससे भी अधिक दिलचस्प बात यह है कि 2015 में फोंट के लिए HTTP अनुरोधों की औसत संख्या चार से बढ़कर 2016 में तीन हो गई और 2017 के बाद से चार पर स्थिर बनी हुई है – केवल डेस्कटॉप पांच तक चला गया। यह संभवतः एक संकेत हो सकता है कि डिजाइनरों और डेवलपर्स ने इष्टतम संख्या में वेब फोंट पर समझौता किया है।

वर्डप्रेस पर पेज साइज कैसे कम करें: एक बेस्ट प्रैक्टिस गाइड

आइए स्क्रिप्ट और स्टाइलशीट को न भूलें

JavaScript फ़ाइलों का औसत भार बढ़ना जारी है, 2010 के अंत से 316.4% बढ़ रहा है। JavaScript के लिए HTTP अनुरोधों की औसत संख्या में भी वृद्धि हुई है।

वर्डप्रेस पर पेज साइज कैसे कम करें: एक बेस्ट प्रैक्टिस गाइड

CSS बाइट में भी लगातार वृद्धि हुई है – 2021 में डेस्कटॉप से ​​औसत 73.3kb और मोबाइल से 68.7kb है।

वर्डप्रेस पर पेज साइज कैसे कम करें: एक बेस्ट प्रैक्टिस गाइड

क्या पृष्ठ का आकार वास्तव में मायने रखता है? क्या इंटरनेट तेज़ नहीं हो रहा है?

जिस तरह एक साइकिल चालक त्वचा से तंग कपड़े पहनते हैं जो वायुगतिकीय होते हैं, ढीले कपड़ों से परहेज करते हैं जो हवा में उड़ते हैं, डेवलपर्स को अपनी साइटों को जितना संभव हो उतना पतला रखना चाहिए ताकि वे इष्टतम गति से भी प्रदर्शन कर सकें।

जबकि पेज वेट कई वेबसाइट मेट्रिक्स में से एक है और, बिल्कुल स्पष्ट रूप से, आपकी नंबर एक प्राथमिकता नहीं होनी चाहिए, फिर भी यह विचार करने के लिए एक महत्वपूर्ण कारक है क्योंकि यह सीधे पेज स्पीड में योगदान देता है।

हां, इंटरनेट तेज हो रहा है। ब्राउजर, कैशिंग, तेज नेटवर्क, सीडीएन और अन्य तकनीक वेब को उपयोगकर्ताओं के लिए तेज बना रहे हैं। लेकिन यह कोई कारण नहीं है कि आपकी वेबसाइट पर अतिरिक्त चर्बी हो, इसलिए बोलने के लिए।

रेडवेयर 2011 से शीर्ष 100 ईकामर्स साइटों के लोड समय पर नज़र रख रहा है और पाया है कि लोड समय और समय-से-बातचीत दोनों में काफी कमी आई है। कारण? पृष्ठ का आकार और जटिलता। जैसे-जैसे पृष्ठ अधिक फूले हुए और जटिल होते जाते हैं, यह आम तौर पर धीमे लोड समय की प्रवृत्ति को जारी रखता है।

आदर्श वेब पेज का आकार कितना बड़ा है?

वेब प्रदर्शन विशेषज्ञ टैमी एवर्ट्स ने तेजी से लोड होने वाले वेब पेजों के लिए आदर्श आकार के रूप में 1MB की सिफारिश की है। वह आगे लिखती हैं कि कई कंपनियां अपने प्रदर्शन बजट के हिस्से के रूप में अपने पृष्ठों के लिए 1 एमबी का लक्ष्य रख रही हैं।

प्रदर्शन बजट के बारे में अधिक जानने के लिए, ब्रायन जैक्सन द्वारा इस महान पठन को देखें।

आपके मोबाइल उपयोगकर्ताओं के बारे में क्या?

मैंने पहले इस ब्लॉग पर कथित प्रदर्शन को कवर किया है, इसलिए आप सभी जानते हैं कि उपयोगकर्ता अनुभव लाभ प्राप्त करने के लिए वेबसाइटों को अभी भी वास्तव में तेज़ महसूस कराना कैसे संभव है। लेकिन कथित प्रदर्शन में सुधार करना हमेशा समाधान नहीं होता, खासकर जब मोबाइल की बात आती है।

मोबाइल उपयोगकर्ता जो बैंडविड्थ बाधाओं और/या डेटा सीमाओं से निपट रहे हैं, उनके पास फूली हुई वेबसाइटों को डाउनलोड करने के लिए समय या डेटा भत्ता नहीं है, इसलिए इन उपयोगकर्ताओं के लिए आपकी वेबसाइट को यथासंभव सुव्यवस्थित करने की आवश्यकता है। क्योंकि यदि आपकी साइट उनके लिए पर्याप्त तेजी से लोड नहीं होती है, तो वे आपकी साइट को आसानी से छोड़ देंगे।

आपके उपयोगकर्ताओं की बैंडविड्थ और डेटा सीमाएँ अलग-अलग देशों में अलग-अलग होंगी, लेकिन एक बेहतरीन ऑनलाइन कैलकुलेटर है, मेरी साइट की लागत क्या है, जो आपको दुनिया भर के स्थानों में आपके पृष्ठों की लागत डॉलर में बता सकती है। यह आपकी आंखें खोल देगा कि पहली दुनिया बनाम तीसरी दुनिया के देशों में मोबाइल उपयोगकर्ता आपके पृष्ठों को कैसे देखते हैं।

वर्डप्रेस पर पेज वेट कम करने के 6 टिप्स

1. छवियों का अनुकूलन करें

जब पृष्ठ वजन में सुधार की बात आती है तो छवियां कम लटकती हैं। अक्सर, वे ऐसी फाइलें होती हैं जो किसी वेब पेज पर लोड होने में सबसे अधिक समय लेती हैं लेकिन अनुकूलन के लिए अपेक्षाकृत आसान होती हैं।

अपनी छवियों की समीक्षा करने के लिए समय निकालकर प्रारंभ करें और ऐसी किसी भी चीज़ को हटा दें जिसकी आपको आवश्यकता नहीं है। फिर, उन्हें इमेज ऑप्टिमाइज़ेशन टूल जैसे इमेजिफ़ाई के साथ संपीड़ित करें। यह अनावश्यक फ़ाइल जानकारी को हटा देगा और आपकी छवि को तेज़ी से लोड करने में सहायता करेगा।

CSS स्प्राइट बनाने से पेज का वज़न कम करने में और मदद मिल सकती है। यह तकनीक आपको एक छवि में एकाधिक छवियों को कम करने देती है। फिर CSS का उपयोग करके, आप स्प्राइट में हेरफेर कर सकते हैं और पृष्ठ पर इसका केवल एक विशिष्ट भाग प्रदर्शित कर सकते हैं। कुछ बेहतरीन उपकरण हैं जो CSS स्प्राइट्स बनाने में मदद कर सकते हैं, जैसे कि स्प्राइटमे।

आलसी लोडिंग छवियां पृष्ठ लोड समय में भी सुधार कर सकती हैं, विशेष रूप से मोबाइल उपयोगकर्ताओं के लिए – और यह एक ऐसी सुविधा है जिसे आप WP रॉकेट में सक्षम कर सकते हैं।

अभी WP रॉकेट प्राप्त करें, और सुधार का तुरंत परीक्षण करें!

2. सीएसएस और जावास्क्रिप्ट संपत्तियों को छोटा और संयोजित करें

अपनी साइट की स्टाइलशीट और स्क्रिप्ट को छोटा और संयोजित करना आपके संसाधनों को और कारगर बना सकता है और आपकी साइट से अनावश्यक कोड को कम कर सकता है। यह न केवल पेज का वजन कम करने में मदद करता है, बल्कि यह आपकी साइट को लोड करने के लिए आवश्यक HTTP अनुरोधों की संख्या को भी कम कर सकता है।

WP रॉकेट कुछ ही क्लिक में CSS और JS फ़ाइलों को छोटा और संक्षिप्त करने का सबसे आसान तरीका है। वास्तव में, आप “स्टेटिक फाइल्स” टैब के तहत अपनी फाइलों को छोटा और संयोजित कर सकते हैं। उन फ़ाइलों की जाँच करें जिन्हें आप छोटा करना और संयोजित करना चाहते हैं। जब आपका काम हो जाए तो “परिवर्तन सहेजें” पर क्लिक करें।

CSS और JS minification WP रॉकेट

3. सामग्री वितरण नेटवर्क का उपयोग करें

सीडीएन का उपयोग करने से आपके पृष्ठ उन स्थानों पर उपयोगकर्ताओं के लिए कितनी जल्दी लोड हो सकते हैं जो आपके सर्वर से बहुत दूर हैं, यानी अंतर्राष्ट्रीय ट्रैफ़िक। सीडीएन कैसे काम करता है, और आपके लिए सबसे अच्छा खोजने के लिए, WP रॉकेट की मार्गदर्शिका, वर्डप्रेस के लिए सर्वश्रेष्ठ सामग्री वितरण नेटवर्क देखें।

CloudFlare, एक लोकप्रिय CDN को WP रॉकेट के साथ आसानी से एकीकृत किया जा सकता है। ऐसा करने के लिए, CloudFlare को सक्षम करने के लिए WP रॉकेट में “CDN” टैब पर जाएं और फिर अपना खाता जोड़ें। अधिक जानकारी के लिए, WP रॉकेट देखें WP रॉकेट के साथ CloudFlare का उपयोग करने के तरीके पर दस्तावेज़ीकरण।

4. लीवरेज ब्राउज़र कैशिंग

यदि उपयोगकर्ता का ब्राउज़र स्थैतिक फ़ाइलों को कैश कर सकता है, तो अगली बार जब वे आपकी साइट पर आएंगे तो उन्हें उन्हें फिर से डाउनलोड करने की आवश्यकता नहीं होगी। इसलिए WP रॉकेट में अपनी साइट के लिए ब्राउज़र कैशिंग सक्षम करना सुनिश्चित करें। अपाचे सर्वर के लिए ब्राउज़र कैशिंग स्वचालित रूप से लागू होती है, इसलिए उपयोगकर्ताओं को कोई अतिरिक्त कदम उठाने की आवश्यकता नहीं होती है। लेकिन NGINX सर्वर वाले रॉकेट-Nginx का उपयोग कर सकते हैं, एक NGINX कॉन्फ़िगरेशन जो वर्डप्रेस या PHP को लोड किए बिना सीधे स्थिर पृष्ठों की सेवा करके WP-रॉकेट को और भी तेज़ बनाता है।

5. अनावश्यक वेबफोन्स कम करें

क्या आपको वास्तव में अपनी वेबसाइट पर आठ फोंट की आवश्यकता है? या दो करेंगे (एक शीर्षकों के लिए और एक अनुच्छेद पाठ के लिए) काम?

टाइपोग्राफी अच्छे, आधुनिक वेब डिज़ाइन के लिए मौलिक है – यह पठनीयता, सुगमता, पहुंच में सुधार करती है और ब्रांडिंग में योगदान करती है। लेकिन यह एक प्रदर्शन लागत पर भी आता है क्योंकि आपके द्वारा उपयोग किया जाने वाला प्रत्येक फ़ॉन्ट एक अतिरिक्त संसाधन है जिसे आगंतुकों को आपकी साइट पर आने पर डाउनलोड करना होगा।

जूरी ने वास्तव में कितने फोंट बहुत अधिक हैं, हालांकि अंगूठे का सामान्य नियम यह है कि तीन की भीड़ है और दो के साथ रहना सबसे अच्छा है।

6. अपनी साइट को लीन रखें

थोड़ा ही काफी है। अगर अब आप अपनी साइट पर प्लगइन, थीम, वेबफॉन्ट, स्क्रिप्ट या अन्य संसाधनों का उपयोग नहीं कर रहे हैं, तो इसे हटा दें। अगर आपको लगता है कि आपको बाद में इसकी आवश्यकता हो सकती है, तो भी आपको इसे हटा देना चाहिए – आप इसे बाद में कभी भी वापस जोड़ सकते हैं।

अपनी वेबसाइट पर संसाधनों की नियमित रूप से निगरानी और समीक्षा करना सुनिश्चित करें ताकि आप केवल वही उपयोग कर रहे हैं जिसकी आपको बिल्कुल आवश्यकता है और कुछ नहीं। यह न केवल बेहतर साइट प्रदर्शन के लिए बल्कि वेबसाइट सुरक्षा के लिए भी अच्छा अभ्यास है।

अप्रयुक्त सीएसएस नियम आपकी साइट को बंद कर सकते हैं, इस स्थिति में आप अप्रयुक्त सीएसएस जैसे उपकरणों का उपयोग कर सकते हैं या एक क्लिक में अप्रयुक्त सीएसएस को हटाने के लिए नए WP रॉकेट का लाभ उठा सकते हैं।

निष्कर्ष

पृष्ठ भार एक महत्वपूर्ण कारक है जो सीधे पृष्ठ गति को प्रभावित करता है। लेकिन यह निगरानी के लायक सिर्फ एक महत्वपूर्ण वेबसाइट प्रदर्शन मीट्रिक भी है। इसलिए ऊपर दी गई किसी भी युक्ति को शुरू करने से पहले पृष्ठ आकार की समग्र तस्वीर प्राप्त करने के लिए अपने वर्डप्रेस साइट के प्रदर्शन का परीक्षण करें।

ध्यान रखें कि बताए गए टिप्स आपके प्रदर्शन स्कोर और कोर वेब विटल्स ग्रेड को बेहतर बनाने में भी आपकी मदद करेंगे!



वर्डप्रेस पर पेज साइज कैसे कम करें: एक बेस्ट प्रैक्टिस गाइड वर्डप्रेस पर पेज साइज कैसे कम करें: एक बेस्ट प्रैक्टिस गाइड

प्रातिक्रिया दे

आपका ईमेल पता प्रकाशित नहीं किया जाएगा. आवश्यक फ़ील्ड चिह्नित हैं *