🐷 ⛩️ 🧔🏽 पृष्ठ लोड गति बढ़ाने के लिए शीर्ष 10 युक्तियाँ 🌘 🥊 🤡

मुझे लगता है कि यह किसी के लिए कोई रहस्य नहीं है कि पृष्ठ लोड करने की गति बहुत सारे कारकों को प्रभावित करती है। यदि कोई व्यक्ति जानकारी में नहीं है, तो मैं संक्षेप में निम्नलिखित बात कहूंगा: डाउनलोड गति न केवल प्रभावित करती है कि आगंतुक आपकी साइट पर लोड होने तक इंतजार करेगा, बल्कि एसईओ अनुकूलन पर भी। दरअसल, आज कई खोज इंजन, जब रैंकिंग साइटों, ने पृष्ठ लोडिंग की गति को ध्यान में रखना शुरू कर दिया है। इसलिए, जितनी तेज़ी से आपकी साइट लोड होती है, उतने अधिक आगंतुक आप खोज इंजन से प्राप्त कर सकते हैं, और इसलिए, इससे अधिक पैसा कमा सकते हैं।

इसलिए, इस लेख में मैंने शीर्ष 10 युक्तियों को इकट्ठा करने का निर्णय लिया कि आप वेब पेज और साइट की डाउनलोड गति को संपूर्ण रूप से कैसे बढ़ा सकते हैं। लेख जीनियस होने का दावा नहीं करता है और शुरुआती लोगों के लिए बनाया गया है।

तो, चलिए चलते हैं:

1. HTTP अनुरोधों की संख्या कम करें

पेज लोड का 80% पेज घटकों को लोड करने पर केंद्रित है: स्क्रिप्ट, फोटो, सीएसएस फाइलें, फ्लैश। HTTP / 1.1 विनिर्देशन यह सलाह देता है कि ब्राउज़र एक ही होस्ट से 2 से अधिक वेब पेज घटकों को डाउनलोड न करें। इन घटकों की संख्या को कम करके, हम सर्वर के लिए HTTP अनुरोधों की संख्या को कम करते हैं और परिणामस्वरूप हम पृष्ठ लोड करने की गति को बढ़ाते हैं।

लेकिन पेज की उपस्थिति को प्रभावित किए बिना सर्वर अनुरोधों की संख्या कैसे कम करें?

वास्तव में कई तरीके हैं।

सीएसएस स्प्राइट्स का उपयोग करना। सीएसएस स्प्राइट एक संयुक्त छवि है जिसमें कई छोटे चित्र शामिल होते हैं जो गुणों का उपयोग करके वांछित पृष्ठ तत्व के लिए सही समय पर कट जाते हैं: पृष्ठभूमि-छवि और पृष्ठभूमि-स्थिति।
इनलाइन चित्रों का उपयोग करना। इनलाइन छवियां डेटा का उपयोग करती हैं : पृष्ठ में छवि को एम्बेड करने के लिए URL योजना । हालाँकि, यह HTML दस्तावेज़ के आकार में वृद्धि करेगा। अपनी शैलियों में इनलाइन छवियों को एम्बेड करके, आप कम सर्वर अनुरोध प्राप्त करेंगे, और HTML आकार समान रहेगा।
एक में कई फाइलें मर्ज करें। यदि आपके पास अपने पृष्ठ से जुड़ी एक से अधिक सीएसएस या जेएस फाइल है, तो आप उन्हें एक में जोड़ सकते हैं। यह सर्वर के लिए http अनुरोधों की संख्या को कम करने का एक बहुत ही सरल लेकिन प्रभावी तरीका है। मक्खी पर ऐसा करने के लिए, मैंने अपने लेख में यहां लिखा था “अपनी साइट में तेजी लाएं। मक्खी पर सीएसएस और जेएस फ़ाइलों की स्थैतिक संपीड़न »

2. पेज के शीर्ष पर सीएसएस फाइलें रखें

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

यदि आप पृष्ठ के निचले भाग में सीएसएस फाइलें रखते हैं, तो यह कई ब्राउज़रों को पृष्ठ को धीरे-धीरे प्रस्तुत करने से रोकता है। ऐसा इसलिए है क्योंकि ब्राउज़र उन तत्वों को फिर से तैयार करने के लिए "नहीं चाहता" है जो पृष्ठ लोड करने के बाद अपनी शैली बदल सकते हैं। तो हमेशा अपने सभी CSS फाइलों को पेज के शीर्ष पर HEAD सेक्शन में शामिल करें।

3. पेज के नीचे जावास्क्रिप्ट डालें

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

इसके अलावा, बाहरी .js फाइलें समानांतर लोडिंग को रोकती हैं। HTTP / 1.1 विनिर्देश अनुशंसा करता है कि एक साथ एक ही होस्ट से ब्राउज़र 2 से अधिक वेब पेज घटकों को डाउनलोड नहीं करते हैं। इस प्रकार, यदि आपकी साइट के लिए चित्र अलग-अलग होस्ट पर स्थित हैं, तो आपको 2 से अधिक समानांतर डाउनलोड मिलेंगे। और जब स्क्रिप्ट लोड होती है, तो ब्राउज़र अन्य होस्ट से भी कोई अन्य डाउनलोड शुरू नहीं करेगा।

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

फ़ाइल का आकार कम करने और इसकी लोडिंग को गति देने के लिए फ़ाइल से फ़ाइल गैर-आवश्यक वर्णों को कोड से हटा दिया जाता है। न्यूनतम फ़ाइल में, सभी टिप्पणियां और महत्वहीन स्थान, लाइन ब्रेक, टैब हटा दिए जाते हैं। यहां सब कुछ सरल है। फ़ाइल का आकार जितना छोटा होगा, ब्राउज़र को उसे डाउनलोड करने में उतना ही कम समय लगेगा। और CSS कोड को संक्षिप्त और अनुकूलित करने के लिए ये 24 ऑनलाइन सेवाएं आपके कोड को कम से कम करने में मदद करेंगी ।
5. समानांतर डाउनलोड के लिए उप डोमेन का उपयोग करें

जैसा कि मैंने ऊपर कहा, HTTP / 1.1 विनिर्देश के अनुसार, ब्राउज़र एक साथ लोड किए गए साइट घटकों की संख्या पर प्रतिबंध लगाते हैं, अर्थात्, एक होस्ट से 2 से अधिक घटक नहीं। इसलिए, यदि आपकी साइट में बहुत सारे ग्राफिक्स हैं, तो इसे एक अलग उपडोमेन या उपडोमेन पर रखना बेहतर है। आपके लिए, यह एक ही सर्वर होगा, लेकिन ब्राउज़र के लिए - अलग। आप जितने अधिक उप-डोमेन बनाते हैं, उतने ही समय में ब्राउज़र डाउनलोड कर सकते हैं और साइट का पूरा पृष्ठ उतनी ही तेज़ी से लोड होगा। आपको बस चित्रों के पते को एक नए में बदलना होगा। एक बहुत ही सरल लेकिन प्रभावी तरीका।

6. ब्राउज़र कैश का उपयोग करें

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

इसलिए, जहाँ भी संभव हो, कुछ ही दिनों या कुछ महीने पहले ही एक्सपायर HTTP हेडर सेट करें। अपाचे वेब सर्वर के लिए एक्सपायर्स HTTP हेडर प्रदान करने के लिए जो सिफारिशों का अनुपालन करते हैं, आपको साइट के रूट फ़ोल्डर में स्थित .htaccess फ़ाइल में निम्न पंक्तियाँ जोड़ने की आवश्यकता है:

<IfModule mod_expires.c> Header append Cache-Control "public" FileETag MTime Size ExpiresActive On ExpiresDefault "access plus 0 minutes" ExpiresByType image/ico "access plus 1 years" ExpiresByType text/css "access plus 1 years" ExpiresByType text/javascript "access plus 1 years" ExpiresByType image/gif "access plus 1 years" ExpiresByType image/jpg "access plus 1 years" ExpiresByType image/jpeg "access plus 1 years" ExpiresByType image/bmp "access plus 1 years" ExpiresByType image/png "access plus 1 years" </IfModule>

Apache वेब सर्वर कॉन्फ़िगरेशन फ़ाइल का यह खंड mod_expires मॉड्यूल की उपस्थिति के लिए जाँच करता है और, यदि mod_expires मॉड्यूल उपलब्ध है, तो Expires HTTP हेडर की डिलीवरी को सक्षम करता है, जो पहले लोड के क्षणों से एक वर्ष तक ब्राउज़रों और प्रॉक्सी सर्वरों के कैश में उपरोक्त वस्तुओं का शेल्फ जीवन सेट करता है। इस ब्राउज़र कैश जीवनकाल को सेट करने से, फ़ाइलों को अपडेट करना मुश्किल हो सकता है। इसलिए, यदि आप एक सीएसएस या जावास्क्रिप्ट फ़ाइल की सामग्री को बदलते हैं और चाहते हैं कि ये परिवर्तन ब्राउज़र कैश में अपडेट किए जाएं, तो आपको फ़ाइल का नाम ही बदलना होगा। आमतौर पर, फ़ाइल का नाम फ़ाइल के नाम में जोड़ा जाता है, उदाहरण के लिए: style.v1.css

लोकप्रिय जावास्क्रिप्ट पुस्तकालयों को लोड करने के लिए सीडीएन का उपयोग करें

यदि आपकी साइट लोकप्रिय javascript फ्रेमवर्क का उपयोग करती है, उदाहरण के लिए jQuery, तो इसे कनेक्ट करने के लिए CDN का उपयोग करना बेहतर है।

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

ऐसी ही एक CDN Google लाइब्रेरी है। यह लोकप्रिय ओपन-सोर्स जावास्क्रिप्ट लाइब्रेरी के लिए एक सीडीएन है। Google लाइब्रेरी से लोकप्रिय जावास्क्रिप्ट फ़्रेमवर्क डाउनलोड करने से आप पृष्ठ लोडिंग गति बढ़ा सकते हैं और अपने सर्वर पर ट्रैफ़िक कम कर सकते हैं।

मैंने इस लेख में यहाँ Google रिपॉजिटरी से jQuery डाउनलोड करने के बारे में लिखा था "हम Google रिपॉजिटरी से jQuery लोड करके पेज लोडिंग गति बढ़ाते हैं" ।

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

आपको अपनी छवियों के लिए उपयुक्त प्रारूप निर्धारित करना चाहिए। गलत छवि प्रारूप का चयन करने से फ़ाइल का आकार बढ़ सकता है।

जीआईएफ - एक लोगो जैसे कई रंगों वाली छवियों के लिए आदर्श।
जेपीईजी - बहुत सारे रंगों के साथ विस्तृत चित्र के लिए बढ़िया, जैसे कि तस्वीरें।
पीएनजी आपकी पसंद है जब आपको पारदर्शिता के साथ उच्च गुणवत्ता वाली छवि की आवश्यकता होती है।

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

यहाँ कुछ ऑनलाइन छवि अनुकूलन सेवाएं हैं:

9. छवियों को स्केल न करें

टैग की चौड़ाई और ऊंचाई विशेषताओं का उपयोग करके या CSS का उपयोग करके छवि का आकार न बदलें। यह पृष्ठ लोडिंग गति को भी नकारात्मक रूप से प्रभावित करता है। यदि आपके पास 500x500px के आकार के साथ एक छवि है, और आप साइट पर 100x100px के आकार के साथ एक छवि सम्मिलित करना चाहते हैं, तो फ़ोटोशॉप ग्राफिक्स संपादक, या किसी अन्य का उपयोग करके मूल छवि का आकार बदलना बेहतर है। छवि का वजन जितना कम होगा, उसे डाउनलोड करने में उतना ही कम समय लगेगा।

10. गज़िप संपीड़न का उपयोग करें

जैसा कि अध्ययनों से पता चला है, 95-98% मामलों में एक टेक्स्ट फ़ाइल "फ्लाई पर" का गज़िप-संपीड़न उस समय को कम कर सकता है जिससे फ़ाइल को ब्राउज़र में स्थानांतरित करने में समय लगता है। यदि आप सर्वर पर फ़ाइलों की संग्रहीत प्रतियाँ संग्रहीत करते हैं (प्रॉक्सी सर्वर की मेमोरी में या बस डिस्क पर), तो सामान्य रूप से कनेक्शन को 3-4 गुना तेजी से मुक्त किया जा सकता है।

HTTP / 1.1 प्रोटोकॉल संस्करण के साथ शुरू, वेब क्लाइंट संकेत देते हैं कि HTTP अनुरोध में स्वीकार-एन्कोडिंग हेडर सेट करके किस प्रकार के संपीड़न का समर्थन करते हैं।

स्वीकार-एनकोडिंग: गज़िप, अपस्फीति

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

सामग्री-एनकोडिंग: gzip

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

अपनी साइट पर GZIP संपीड़न को सक्षम करने के लिए, आपको .htaccess फ़ाइल में कोड की निम्नलिखित पंक्तियों को लिखना होगा:

 <IfModule mod_deflate.c> AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE text/css <IfModule mod_setenvif.c> BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch \bMSIE !no-gzip !gzip-only-text/html </IfModule> </IfModule>

यदि यह विधि काम करती है, तो ठीक है, यदि नहीं, तो आप इस कोड को इस तरह आज़मा सकते हैं:

 <IfModule mod_deflate.c> AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/javascript text/css application/x-javascript BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4.0[678] no-gzip BrowserMatch bMSIE !no-gzip !gzip-only-text/html <ifmodule mod_gzip.c> mod_gzip_on Yes mod_gzip_item_include file \.js$ mod_gzip_item_include file \.css$ </ifmodule> </IfModule>

लेकिन फिर से, यह कोड सभी सर्वरों पर काम नहीं करता है, इसलिए अपने होस्टिंग प्रदाता की सहायता सेवा से संपर्क करना और इस मुद्दे को स्पष्ट करना बेहतर है।

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

यदि आप कुछ चूक गए हैं या आपके पास कुछ जोड़ने के लिए है - इस पोस्ट के नीचे टिप्पणी में अपनी राय लिखें। आपका ध्यान के लिए धन्यवाद!

पृष्ठ लोड गति बढ़ाने के लिए शीर्ष 10 युक्तियाँ

More articles: