अपनी साइट की गति को अनुकूलित करने के लिए 10 सुझाव

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

1. जब संभव हो तब सामग्री को डाउनलोड करने में देरी करें।

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



हम एक उदाहरण के रूप में छवि गैलरी का उपयोग कर सकते हैं। छवि फ़ाइलें बड़ी और भारी हैं; वे वेब पृष्ठों की लोडिंग गति को धीमा कर सकते हैं। जब उपयोगकर्ता पहली बार वेब पेज पर जाता है तो सभी छवियों को लोड करने के बजाय, हम केवल थंबनेल दिखा सकते हैं

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



Ajax / वेब डेवलपमेंट लाइब्रेरी जैसे jQuery, प्रोटोटाइप, और MooTools विलंबित सामग्री को लोड करने में बहुत आसान बना सकते हैं।

2. अलग JS और CSS फाइलों का उपयोग करें

जब कोई उपयोगकर्ता पहली बार आपके वेब पेज को लोड करता है, तो ब्राउज़र जावास्क्रिप्ट और सीएसएस फ़ाइलों जैसे बाहरी संसाधनों को कैश करता है। इस प्रकार, ऐसी फ़ाइलों को पृष्ठों के बाहर रखना बेहतर होता है।



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



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

3. कैशिंग सिस्टम का उपयोग करें

यदि आपको लगता है कि आपकी साइट डेटाबेस से कनेक्ट हो रही है, तो प्रत्येक बार समान सामग्री बनाने के लिए - यह कैशिंग सिस्टम का उपयोग शुरू करने का समय है। यदि आपके पास कैशिंग सिस्टम है, तो आपकी साइट को हर बार बनाने के बजाय केवल एक बार सामग्री बनानी होगी,

जब पृष्ठ उपयोगकर्ताओं द्वारा दौरा किया जाता है। चिंता न करें, कैशिंग सिस्टम समय-समय पर अपने कैश को अपडेट करते हैं कि आप उन्हें कैसे कॉन्फ़िगर करते हैं, इस पर निर्भर करता है - इस तरह से लगातार बदलते वेब पेज (जैसे टिप्पणियों के साथ एक ब्लॉग पोस्ट) को कैश किया जा सकता है।



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



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

4. HTML में छवियों को आकार देने से बचें

यदि छवि मूल रूप से 1280x900 px है, लेकिन आपके पास 400x280 px होना चाहिए, तो आपको HTML में चौड़ाई और ऊँचाई विशेषताओं का उपयोग करने के बजाय फ़ोटोशॉप जैसे छवि संपादक का उपयोग करके छवि को आकार देना और सहेजना चाहिए

(वह है, <img चौड़ाई = "400" ऊंचाई = "280" src = "myimage.jpg" />)।

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

5. पाठ प्रदर्शित करने के लिए छवियों का उपयोग न करें

यह न केवल ऑन-स्क्रीन पाठकों के लिए अप्राप्य छवि में पाठ को बनाता है और एसईओ के लिए पूरी तरह से बेकार है, बल्कि आपके पेज के लोडिंग समय को भी बढ़ाता है, क्योंकि पेज पर जितनी अधिक छवियां हैं, यह उतना ही भारी है।



यदि आपको किसी वेबसाइट पर अपने बहुत सारे फोंट का उपयोग करने की आवश्यकता है, तो कस्टम फ़ॉन्ट टेक्स्ट को अधिक कुशलता से प्रदर्शित करने के लिए CSS @ font-face के बारे में जानें। जाहिर है, फॉन्ट प्रोसेसिंग इमेज इमेज प्रोसेसिंग की तुलना में अधिक इष्टतम है।

6. सही फ़ाइल प्रारूप का उपयोग करके छवि आकारों का अनुकूलन करें

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



JPG, PNG और GIF के बीच चयन करने के बारे में अधिक जानने के लिए, निम्नलिखित मार्गदर्शिकाएँ पढ़ें:

• वेब के लिए छवियों को सहेजने के लिए व्यापक गाइड
• पीएनजी छवि प्रारूप के लिए वेब डिज़ाइनर गाइड
• JPEG 101: JPEG पर क्रैश कोर्स गाइड

इसके अलावा, कई उपकरण हैं जिनका उपयोग आप अपनी छवियों के फ़ाइल भार को कम करने के लिए कर सकते हैं। अपनी छवियों के अनुकूलन के लिए उपकरणों की इस सूची को देखें ।

7. अपनी कोडिंग विधि का अनुकूलन करें

अपने स्रोत कोड का निरीक्षण करें। क्या आपको वास्तव में आपके द्वारा उपयोग किए जाने वाले सभी टैग की आवश्यकता है, या आप सीएसएस को प्रदर्शित करने के लिए उपयोग कर सकते हैं? उदाहरण के लिए, <h1> <em> आपका शीर्षक </ em> </ h1> का उपयोग करने के बजाय, आप फ़ॉन्ट-शैली संपत्ति का उपयोग करके शीर्षक को इटैलिक बनाने के लिए आसानी से सीएसएस का उपयोग कर सकते हैं। प्रभावी कोड लिखना न केवल आपके HTML और CSS दस्तावेजों के आकार को कम करता है, बल्कि उन्हें बनाए रखना भी आसान बनाता है।

8. दस्तावेज़ के अंत में जावास्क्रिप्ट लोड करें

यह बेहतर होगा यदि आपकी स्क्रिप्ट पृष्ठ के अंत में लोड की जाती हैं, और शुरुआत में नहीं। यह जावास्क्रिप्ट लोड करने से पहले ब्राउज़र को सब कुछ प्रस्तुत करने की अनुमति देता है। इसके लिए धन्यवाद, आपके पृष्ठ अधिक उत्तरदायी होंगे, क्योंकि जिस तरह से जावास्क्रिप्ट काम करता है वह ऐसा है कि यह सब कुछ ब्लॉक करता है जब तक कि यह लोडिंग को पूरा नहीं करता है। यदि संभव हो, तो अपने HTML डॉक्यूमेंट के बंद होने के </ body> टैग के बाद जावास्क्रिप्ट को लिंक करें।



अधिक जानने के लिए, जावास्क्रिप्ट के विलंबित लोडिंग के बारे में पढ़ें।

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

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

10. वेब कैशिंग का अनुकूलन करें

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



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

ब्राउज़र कैशिंग बढ़ाना ।



अपाचे में एक्सपायर हेडर को कॉन्फ़िगर करने के लिए , हेडर जोड़ने के लिए निर्देश पढ़ें जो भविष्य में समाप्त हो जाएगा।