वेब अनुकूलन के लिए अंतिम गाइड (युक्तियाँ और सर्वोत्तम अभ्यास)

वेब अनुकूलन वेब विकास और रखरखाव का एक महत्वपूर्ण हिस्सा है, लेकिन यह भी अक्सर वेबमास्टर्स द्वारा अनदेखी की जाती है। बस उन पैसों के बारे में सोचें जिन्हें आप बचा सकते हैं, और यह संभावित रूप से आपके पाठकों और ट्रैफ़िक को बढ़ाने में मदद कर सकता है जब वे ठीक से काम करते हैं.

यदि आपने अभी तक अपनी वेबसाइट (या ब्लॉग) पर कोई अनुकूलन नहीं किया है या केवल उत्सुक हैं कि यह आपकी साइट को गति देने में कैसे मदद कर सकता है, तो कृपया हमारे द्वारा लगाए गए अनुकूलन सुझावों की इस सूची पर एक नज़र डालें।.

हमने क्रमशः बेहतर पठनीयता के लिए चीजों को 3 अलग-अलग खंडों में विभाजित किया है - क्रमशः सर्वर-साइड अनुकूलन, संपत्ति अनुकूलन (जिसमें CSS, Javascript, छवियाँ आदि जैसे वेब घटक शामिल हैं) और मंच, जहां हम ध्यान केंद्रित करेंगे वर्डप्रेस अनुकूलन. अंतिम खंड में, हम उन कुछ लिंक्स को फेंकते हैं जिन्हें हमने उपयोगी माना है। कूदने के बाद पूरी सूची.

अनुकूलन: सर्वर-साइड

1. एक सभ्य वेब होस्ट चुनें

   आपके वेब होस्टिंग खाते का आपके द्वारा किए जाने वाले अनुकूलन के साथ कोई सीधा संबंध नहीं है, लेकिन हमने सोचा कि आप सही वेब होस्टिंग खाते का चयन कर रहे हैं, इसलिए हमने इसे आपके ध्यान में लाने का फैसला किया। होस्टिंग खाता आपकी वेबसाइट / ब्लॉग की नींव है जहाँ यह सुरक्षा, पहुँच (cPanel, FTP, SSH), सर्वर स्थिरता, मूल्य और ग्राहक सभी महत्वपूर्ण भूमिकाएँ निभाता है। आपको यह सुनिश्चित करने की आवश्यकता है कि आप अच्छे हाथों में हैं.

   अनुशंसित पढ़ने: एक वेब होस्ट कैसे चुनें द्वारा wikiHow एक शानदार लेख है जो आपको किसी भी वेब होस्टिंग खाते को खरीदने से पहले आपको बताए गए कदम और सुझाव देना चाहिए.

2. होस्ट एसेट्स अलग से

   जब हम संपत्ति का उल्लेख करते हैं, तो हमारा मतलब वेब घटकों की तरह होता है इमेजिस तथा स्थिर स्क्रिप्ट सर्वर-साइड प्रसंस्करण की आवश्यकता नहीं है। इनमें कोई भी वेब ग्राफिक्स, चित्र, जावास्क्रिप्ट, कैस्केडिंग स्टाइल शीट्स (सीएसएस) आदि शामिल हैं, अलग-अलग होस्टिंग परिसंपत्तियां एक जरूरी नहीं है, लेकिन हमने इस कार्यान्वयन के साथ सर्वर स्थिरता के संदर्भ में जबरदस्त परिणाम देखा है जब ब्लॉग एक ट्रैफ़िक स्पाइक था.

   अनुशंसित पाठ: कारपूल लेन में समानांतर डाउनलोड को अधिकतम करें.

3. GZip के साथ संपीड़न

   संक्षेप में, जब भी HTTP अनुरोध किया जाता है तब सामग्री सर्वर साइड से क्लाइंट साइड (vicet versa) तक जाती है। प्रत्येक अनुरोध को संसाधित करने के लिए आवश्यक समय को बहुत कम करने के लिए सामग्री को संपीड़ित करना.

   GZip ऐसा करने के सर्वोत्तम तरीकों में से एक है और यह आपके द्वारा उपयोग किए जा रहे सर्वर के प्रकार के अनुसार विभिन्न है। उदाहरण के लिए, अपाचे 1.3 mod_zip का उपयोग करता है, अपाचे 2.x mod_deflate का उपयोग करता है और यहां बताया गया है कि आप इसे कैसे करते हैं nginx. सर्वर साइड कंप्रेशन्स से परिचित होने के लिए यहां कुछ बहुत अच्छे लेख दिए गए हैं:

   • अपाचे फ़ाइल संपीड़न को सक्षम करके एक वेब साइट को गति दें
   • Mod_gzip और Apache का उपयोग करके वेब आउटपुट को संपीड़ित करें
   • GZIP संपीड़न के साथ अपनी साइट का अनुकूलन कैसे करें
   • एएसपी के लिए सर्वर-साइड संपीड़न

4. रीडायरेक्ट कम करें

   वेबमास्टर्स हर समय (चाहे वह जावास्क्रिप्ट या मेटा रीडायरेक्ट हो) URL रीडायरेक्ट करते हैं। कभी-कभी इसका उद्देश्य उपयोगकर्ताओं को एक पुराने पृष्ठ से नए में इंगित करना है, या केवल उपयोगकर्ताओं को सही पृष्ठ पर निर्देशित करना है। प्रत्येक रीडायरेक्ट एक अतिरिक्त HTTP अनुरोध और RTT (राउंड-ट्रिप-टाइम) बनाते हैं। आपके पास जितना अधिक पुनर्निर्देशन होगा, धीमा उपयोगकर्ता गंतव्य पृष्ठ पर पहुंच जाएगा.

   अनुशंसित पाठ: रीडायरेक्ट से बचें Google कोड द्वारा आप इस मामले पर एक अच्छा अवलोकन देता है। सेवारत गति बढ़ाने के लिए पुनर्निर्देशन को कम करने के लिए लेख कुछ व्यावहारिक तरीकों की भी सिफारिश करता है.

5. DNS लुकअप कम करें

   इसके अनुसार याहू! डेवलपर नेटवर्क ब्लॉग, डीएनएस (डोमेन नेम सिस्टम) के लिए किसी दिए गए होस्टनाम या डोमेन नाम के लिए आईपी एड्रेस को हल करने में लगभग 20-120 मिलीसेकंड लगते हैं और प्रक्रिया ठीक से पूरा होने तक ब्राउज़र कुछ नहीं कर सकता है।.

   लेखक स्टीव सौडर्स सुझाव दिया कि इन घटकों को कम से कम दो के बीच विभाजित करें लेकिन चार से अधिक होस्टनाम DNS लुकअप को कम नहीं करते हैं और उच्च डिग्री समानांतर डाउनलोड की अनुमति देते हैं. और पढो लेख पर.

अनुकूलन: संपत्ति (सीएसएस, जावास्क्रिप्ट, चित्र)

1. एक में एकाधिक जावास्क्रिप्ट का विलय करें

   पर फोल्क्स rakaz.nl साझा करें कि आप कई जावास्क्रिप्ट को कैसे संयोजित कर सकते हैं जैसे:

    http://www.creatype.nl/javascript/prototype.js http://www.creatype.nl/javascript/builder.js http://www.creatype.nl/javascript/effects.js http: // www .creatype.nl / javascript / dragdrop.js http://www.creatype.nl/javascript/slider.js 

   URL में परिवर्तित करके एकल फ़ाइल में:

    http://www.creatype.nl/javascript/prototype.js,builder.js,effects.js,dragdrop.js,slider.js 

   .htaccess में हेरफेर करके और PHP का उपयोग करके. यहां क्लिक करे अधिक पढ़ने के लिए.

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

   छोटा करना एक PHP5 ऐप है जो कई सीएसएस और जावास्क्रिप्ट फ़ाइलों को संयोजित कर सकता है, उनकी सामग्री को संकुचित कर सकता है (यानी अनावश्यक व्हाट्सएप / टिप्पणियों को हटाने), और HTTP एन्कोडिंग (गज़िप / डीफ़्लैट) और हेडर के साथ परिणामों की सेवा करता है जो क्लाइंट-साइड कैशिंग की अनुमति देता है.

   

   उन्हें ऑनलाइन संपीड़ित करें!कुछ वेब सेवाएं भी हैं जो आपको मैन्युअल रूप से अपने जावास्क्रिप्ट और सीएसएस फ़ाइलों को ऑनलाइन संपीड़ित करने की अनुमति देती हैं। यहाँ कुछ हम जानते हैं:

   • compressor.ebiene (जावास्क्रिप्ट, सीएसएस)
   • javascriptcompressor.com (जावास्क्रिप्ट)
   • jscompress.com (जावास्क्रिप्ट)
   • CleanCSS (सीएसएस)
   • सीएसएस ऑप्टिमाइज़र (सीएसएस)

3. कस्टमाइज़ हैडर एक्सपायरी / कैशिंग

   क्रेडिट: httpwatch

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

   अनुशंसित रीडिंग:

   • याहू! डेवलपर नेटवर्क ब्लॉग - एक एक्सपायर हैडर जोड़ें
   • कैसे अपाचे 1.3 में छवियों के लिए अच्छा समय सीमा शीर्ष लेख जोड़ने के लिए
   • HTTP कैशिंग
   • वेब लेखकों और वेबमास्टर्स के लिए कैशिंग ट्यूटोरियल

4. ऑफ-लोड एसेट्स

   ऑफ-लोडिंग से हमारा मतलब है कि मुख्य सर्वर से जावास्क्रिप्ट, इमेज, सीएसएस और स्टैटिक फाइल्स को अलग करना जहाँ वेबसाइट को होस्ट किया जाता है और उन्हें दूसरे सर्वर पर रखा जाता है या अन्य वेब सेवाओं पर भरोसा किया जाता है। हमने यहां महत्वपूर्ण सुधार देखा है Hongkiat उपलब्ध अन्य वेब सेवाओं के लिए ऑफ-लोडिंग एसेट्स द्वारा, सर्वर को मुख्य रूप से PHP प्रसंस्करण करने के लिए छोड़ दिया जाता है। ऑफ-लोडिंग के लिए ऑनलाइन सेवाओं के कुछ सुझाव यहां दिए गए हैं:

   • इमेजिस: फ़्लिकर, स्मगमुग, पेड होस्टिंग्स *
   • javascripts: गूगल अजाक्स लाइब्रेरी, गूगल ऐप इंजन, पेड होस्टिंग *
   • वेब फार्मs: वूफ़ू, फॉर्मस्टैक
   • आरएसएस: Google फीडबर्नर
   • सर्वेक्षण और मतदान: सर्वेमोनकी, पोलडेडी

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

5. वेब छवियां संभालना

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

   • PNG Images को ऑप्टिमाइज़ करेंमुंहतोड़ पत्रिका के दोस्तों ने कुछ चतुर तकनीकों का वर्णन किया है जो आपकी पीएनजी-छवियों को अनुकूलित करने में आपकी सहायता कर सकते हैं.
   • वेब के लिए अनुकूलन - जिन चीजों को आपको जानना है (प्रारूप), उन्हें जेपीईजी, जीआईएफ, पीएनजी और वेब के लिए अपनी छवियों को कैसे सहेजना चाहिए, इसके बारे में और जानें.
   • स्केल छवियाँ मत करोहमेशा डालने का अभ्यास करें चौड़ाई तथा ऊंचाई प्रत्येक छवियों के लिए। इसके अलावा, केवल एक छवि को स्केल न करें क्योंकि आपको वेब पर एक छोटे संस्करण की आवश्यकता है. उदाहरण के लिए: अपनी वेबसाइट के लिए 200 × 200 px की छवि को 50 × 50 px में फेरबदल करके पैमाने को बल न दें चौड़ाई तथा ऊंचाई. इसके बजाय 50 × 50 पीएक्स प्राप्त करें.

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

   • Smush.itशायद छवियों को अनुकूलित करने के लिए सबसे कुशल ऑनलाइन उपकरण में से एक। यहां तक ​​कि इसके लिए एक वर्डप्रेस प्लगइन भी है!
   • JPEG और PNG स्ट्रिपरJPG / JPEG / JFIF और PNG फ़ाइलों से अनावश्यक मेटाडेटा (रद्दी) को हटाने / साफ करने / हटाने के लिए एक विंडोज टूल.
   • ऑनलाइन छवि अनुकूलकआप आसानी से अपने gifs, एनिमेटेड gifs, jpgs, और pngs को ऑप्टिमाइज़ करते हैं, इसलिए वे डायनामिक ड्राइव द्वारा आपकी साइट पर यथासंभव तेज़ लोड करते हैं
   • SuperGIFअनायास अपने सभी GIF छवियों और एनिमेशन को छोटा कर दें.
   • यहाँ और है.

6. सीएसएस को संभालना

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

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

     आप उन्हें एक एकल सीएसएस में जोड़ सकते हैं:

   अनुशंसित रीडिंग:

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

वर्डप्रेस के लिए अनुकूलन

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

1. कैश आपका ब्लॉग

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

2. अप्रयुक्त प्लगइन्स को निष्क्रिय और हटाएं

   जब आप ध्यान दें कि आपका ब्लॉग वास्तविक धीमी गति से लोड हो रहा है, तो देखें कि क्या आपके पास बहुत सारे प्लग इन स्थापित हैं। वे अपराधी हो सकते हैं.

3. अनावश्यक PHP टैग निकालें

   यदि आप अपने विषय के स्रोत कोड पर एक नज़र डालते हैं, तो आपको इन जैसे बहुत सारे टैग मिलेंगे:

   वे बहुत अधिक पाठ सामग्री से बदले जा सकते हैं जो सर्वर पर लोड का कारण नहीं बनते हैं। चेक आउट माइकल मार्टिनकी 13 टैग आपके वर्डप्रेस ब्लो से डिलीट करने के लिएजी

अनुशंसित रीडिंग:

• वर्डप्रेस को स्पीड करने के 3 सबसे आसान तरीकेजॉन पॉज़ैज़िड्स ने साझा किया कि कैसे एक डिग ट्रैफ़िक स्पाइक के माध्यम से उनका ब्लॉग सुचारू रूप से मेल खाता है.
• मैक्स प्रदर्शन के लिए 13 महान वर्डप्रेस स्पीड टिप्स और ट्रिक्स यहां कुछ चीजें आजमाई जाती हैं यदि आप पाते हैं कि आपकी वर्डप्रेस साइट उतना अच्छा प्रदर्शन नहीं कर रही है तो यह उच्च यातायात या छिपे हुए मुद्दों के कारण हो सकता है जिनके बारे में आप जानते हैं.
• 40 वर्डप्रेस ऑप्टिमाइज़ेशन टिप्सस्लाइड्स में अनुकूलन युक्तियाँ। 40 मिनट में 40 टिप्स.

अंतिम पर कम नहीं…

यहाँ कुछ उपयोगी वेब सेवाएँ और उपकरण हैं जो आपको वेब अनुकूलन में मदद करने के लिए एक व्यापक परिप्रेक्ष्य और बेहतर विश्लेषण प्रदान करते हैं.

• याहू! YSlow

  YSlow वेब पृष्ठों का विश्लेषण करता है और उच्च प्रदर्शन वेब पृष्ठों के लिए नियमों के एक सेट के आधार पर उनके प्रदर्शन को बेहतर बनाने के तरीके सुझाता है। यह आपको एक अच्छा विचार देता है कि वेबसाइट को तेजी से लोड करने के लिए क्या करने की आवश्यकता है.

  (फायरबग आवश्यक)

  

• PageSpeed

  के समान याहू! YSlow, गूगल पृष्ठ गति वेबसाइट के प्रदर्शन का मूल्यांकन करने और उन्हें बेहतर बनाने के लिए एक ओपन-सोर्स फायरबग एड-ऑन है। (फायरबग आवश्यक)

  

• पीएसडीआई उपकरण

  पीएसडीआई उपकरण अपनी वेबसाइट का पूरा लोड लें जिसमें सभी ऑब्जेक्ट्स (चित्र, CSS, JavaScripts, RSS, Flash और फ्रेम / iframes) शामिल हैं और आपको लोड किए गए पृष्ठ के बारे में सामान्य आंकड़े दिखाते हैं जैसे कि वस्तुओं की कुल संख्या, कुल लोड समय और आकार सहित वस्तुओं.

  

अनुशंसित रीडिंग:यहां अधिक युक्तियां और उपकरण हैं जो जांचने लायक हैं.

• Google वेब ऑप्टिमाइज़र
• तेज़ वेब पेज विकसित करने में आपकी सहायता के लिए 15 उपकरण
• 15+ टिप्स अपनी वेबसाइट को गति देने के लिए, और अपना कोड ऑप्टिमाइज़ करें!