क्या आप अपने वर्डप्रेस साइट को गति देना चाहते हैं? वर्डप्रेस अनुकूलन युक्तियां जानना चाहते हैं जो आपकी साइट लोड अवधि कम करने में आपकी सहायता कर सकते हैं? इस आलेख में, हम आपको दिखाएंगे कि कैसे वर्डप्रेस को गति देने के लिए कैसे हम प्रदर्शन को बढ़ावा देने के लिए हमारी सूची 25 साइट को अनुकूलित कर सकते हैं।
आपने शायद सुना है कि एसईओ के लिए वर्डप्रेस स्पीड महत्वपूर्ण है। एक तेज साइट में बेहतर उपयोगकर्ता सगाई, अधिक पृष्ठदृश्य और बेहतर बिक्री शामिल है। स्ट्रैंगेलोप मामले के अध्ययन में, उन्होंने पाया कि एक-दूसरे की देरी से आप बिक्री का 7%, 11% कम पृष्ठदृश्य और ग्राहक संतुष्टि में 16% कम खर्च कर सकते हैं।
तो आप वास्तव में वर्डप्रेस कैसे गति कर सकते हैं?
ठीक है, बस गति सुझावों की एक सूची साझा करने के बजाय, हमने एक पूर्ण केस स्टडी करने का निर्णय लिया है कि आप हमारे List25 साइट से परिणाम दिखाते हैं कि हमने यह सब कैसे पूरा किया है।
अवलोकन
सूची 25 हमारे संस्थापक सैयद बचखी द्वारा शुरू किया गया एक मनोरंजन ब्लॉग है साइट 1.5 लाख से अधिक ग्राहक हैं, और यूट्यूब चैनल का तिमाही खत्म हो गया है अरब देखा गया।
साइट पर सामग्री ज्यादातर छवियों और वीडियो है जो बैंडविड्थ के टेराबाइट को लेती है, इसलिए लागतों को कम रखने, पृष्ठ परित्याग को कम करने और साइट पर समय को बेहतर बनाने के लिए समग्र गति अनुकूलन महत्वपूर्ण था।
अनुकूलन शुरू करने से पहले, हमारे होमपेज ने पिंगदोम के अनुसार लोड करने के लिए 2.21 सेकंड ले लिए थे। हमारे द्वारा किए जाने के बाद, हमारे पृष्ठ लोड का समय 1.21 सेकंड तक गिरा (~ 45% तेज) ।
इस ऑप्टिमाइज़ेशन के दौरान, हम अपने सर्वर की प्रतिक्रिया समय में तेजी लाने में सक्षम थे, हमारे पृष्ठ गति प्रदर्शन स्कोर में सुधार, कुल अनुरोध की संख्या कम करते हैं, और समग्र लोड समय में सुधार करते हैं।
चलो ऑप्टिमाइज़ेशन तकनीकों पर नजर डालें जो हमारी वर्डप्रेस साइट को गति देने में मदद करते हैं।
वर्डप्रेस होस्टिंग
एक अच्छा वेब होस्ट करने से आपकी वेबसाइट की गति के लिए महत्वपूर्ण है चूंकि हमारी साइट अधिक लोकप्रिय हो गई है, हम केवल हमारी पिछली होस्टिंग कंपनी (होस्टगेटर) को बाहर कर चुके हैं।
उनके सर्वर बस इस आकार के साइट को नहीं संभाल सकते क्योंकि लिस्ट 25 लाखों पृष्ठदृश्यों के दसियों प्राप्त करता है। HostGator छोटी साइटों के लिए महान है, लेकिन इस परिमाण के कुछ के लिए नहीं
हमने विभिन्न प्रबंधित वर्डप्रेस होस्टिंग विकल्पों को देखा, और अंत में साइटग्राइड का उपयोग करके सूची 25 की मेजबानी के लिए समाप्त हो गया क्योंकि उन्होंने इस साइट के लिए सर्वश्रेष्ठ समग्र मूल्य की पेशकश की है।
आप तुरंत हमारे सर्वर प्रतिक्रिया समय में सुधार देख सकते हैं। हम अधिकतम 442 से 172 मिसे प्रतिक्रिया समय तक गए। यह एक 256% सुधार है
साइटग्राउंड ने वर्डप्रेस, जूमला, और मैगेटो जैसे विशिष्ट प्लेटफार्मों के लिए प्रदर्शन बूस्टर का निर्माण किया है। आपकी साइट के मंच के आधार पर, वे विशेष रूप से अपने सर्वर का अनुकूलन करते हैं, जो परिणामस्वरूप बेहतर प्रदर्शन करते हैं।
हमने एक लेख लिखा था, जब आप अपने वेब होस्टिंग को स्विच करना चाहिए जो 7 प्रमुख संकेतकों के बारे में बात करता है
साइट
कैशिंग प्लगइन
जब वर्डप्रेस को तेज करने की बात आती है, कैशिंग आपके वेब होस्टिंग के बाद दूसरा सबसे महत्वपूर्ण कारक है।
आम तौर पर जब कोई विज़िटर आपके वर्डप्रेस साइट पर आ जाता है, तो आपका सर्वर PHP अनुरोध को MySQL डाटाबेस से पास करता है, जो उस पेज को पाता है जिसे अनुरोध किया जा रहा है, इसे उड़ने पर तैयार करता है, और इसे विज़िटर पर दिखाता है। यह कई संसाधनों को लेता है जब आप कैशिंग करेंगे, यह समय और संसाधनों को बचाता है
नीचे दिया गया चित्र प्रक्रिया को हाइलाइट करता है। सामान्य शब्दों में, कैशिंग को एक डेस्कटॉप शॉर्टकट बनाने के रूप में सोचें, जो आपको फ़ाइल को तेज़ी से प्राप्त करने में मदद करता है।
List25 साइट के लिए, हम SiteGround SuperCacher, एक प्लगइन का उपयोग कर रहे हैं जो वे विशेष रूप से अपने ग्राहकों के लिए बनाए गए हैं। उस पर, वे वार्निश (उनके प्रदर्शन बूस्टर का हिस्सा) का उपयोग करके उन्नत गतिशील कैशिंग विकल्प जोड़ते हैं।
यदि आप साइटग्राम पर नहीं हैं, तो चिंता न करें। आप W3 कुल कैशे या WP सुपर कैश जैसे कई उपलब्ध समाधानों में से एक का उपयोग करके अपने WordPress साइट पर कैश सेटअप कर सकते हैं।
हम W3 कुल कैश का उपयोग कर रहे हैं जो कई कैशिंग विकल्प, डेटाबेस कैशिंग और ऑब्जेक्ट कैशिंग प्रदान करता है।
जैसे अधिक होस्टिंग कंपनियां वर्डप्रेस के लिए विशेषज्ञ हैं, हम अधिक कस्टम कैशिंग समाधान तैयार करेंगे। Pagely और WPEngine भी अपने स्वयं के अंतर्निहित कैशिंग सिस्टम की पेशकश करते हैं।
CDN
सामग्री वितरण नेटवर्क (सीडीएन) आपकी वेबसाइट की गति को बढ़ाने में आपकी मदद कर सकता है। हम List25 की शुरुआत के बाद से MaxCDN का उपयोग कर रहे हैं, इसलिए यह भाग नहीं बदला।
हमने एक सीडीएन पर एक पूरा लेख लिखा है और एक इन्फोग्राफिक के साथ आपको इसकी आवश्यकता क्यों है
सीडीएन हमें सामग्री डिलिवरी नेटवर्क से सभी सीएसएस, जावास्क्रिप्ट और छवियां प्रदान करने की अनुमति देता है। यह साइट विज़िटर के स्थान का निर्धारण करने और आगंतुक के नजदीक किसी सर्वर से सामग्री की सेवा करने से यह काम करता है।
यदि आप प्रीमियम सीडीएन समाधान के लिए बाजार में नहीं हैं, तो आप Cloudflare का उपयोग कर सकते हैं।
HTTP अनुरोधों को कम करने के लिए फ़ाइलें मेल करना
जब आप अधिक प्लगइन्स जोड़ते हैं, तो अक्सर वे अपनी जावास्क्रिप्ट और सीएसएस फ़ाइलों को जोड़ते हैं। प्रत्येक अतिरिक्त फ़ाइल एक नया HTTP अनुरोध है
हम इन जावास्क्रिप्ट और सीएसएस फ़ाइलों को एक फ़ाइल में अनुरोधित कम करते हैं और लोड समय की गति बढ़ाते हैं। आप इसके बारे में और अधिक जानकारी देख सकते हैं कि कैसे वर्डप्रेस प्लग इन लोड टाइम को प्रभावित करते हैं।
हालांकि अब हम कुछ छोटी कार्यक्षमता को लोड कर रहे हैं, जिस पर हमें साइट के किसी विशेष खंड की आवश्यकता नहीं है, यह कोड सीडीएन पर कैश किया गया है और परिणाम दिखाते हैं कि फाइल के लिए कम अनुरोध कई छोटे जेएस फाइलों को लोड करने से बेहतर प्रदर्शन प्रदान करता है।
यह आपको नियमित आधार पर करना है क्योंकि प्लगइन्स आप ओवरटाइम का उपयोग करते हैं।
छवि स्प्राइट्स
हमने एक छवि प्रेत का उपयोग किया है, जो एक एकल छवि में कई सामाजिक और साइट आइकन को जोड़ता है:
जब भी हमें एक विशेष आइकन प्रदर्शित करने की आवश्यकता होती है, हम सीएसएस का उपयोग इस पर करते हैं:
- पृष्ठभूमि को छवि के रूप में लोड करें
- तत्व की चौड़ाई और ऊंचाई को परिभाषित करें जिसके लिए हम आइकन की आवश्यकता है
- आवश्यक आइकन लोड करने के लिए हमारी छवि के लिए पृष्ठभूमि की स्थिति सेट करें
उदाहरण के लिए, साइडबार के सामाजिक मीडिया आइकन को लोड करने के लिए, हम इसका उपयोग करते हैं:
li.widget_social_icons ul li {फ्लोट: बायां; चौड़ाई: 36px; ऊंचाई: 36 पीएक्स; मार्जिन: 0 10px 10px 0; पैडिंग: 0; पृष्ठभूमि: यूआरएल (../ छवियाँ / प्रेत पेज) नो-दोहराना; }
li.widget_social_icons ul li.twitter {पृष्ठभूमि-स्थिति: 0 -50px; }
li.widget_social_icons ul li.facebook {पृष्ठभूमि-स्थिति: -36 पीएक्स -50 पीएक्स; }
li.widget_social_icons ul li.pinterest {पृष्ठभूमि-स्थिति: -72 पीएक्स -50 पीएक्स; }
li.widget_social_icons ul li.google {पृष्ठभूमि-स्थिति: -108px -50px; }
li.widget_social_icons ul li.rss {पृष्ठभूमि-स्थिति: -144 पीएक्स -50 पीएक्स; }
li.widget_social_icons ul li.youtube {पृष्ठभूमि-स्थिति: -180px-50px; }
पृष्ठभूमि स्थिति , चौड़ाई तथा ऊंचाई सीएसएस गुण हमें छवि के विशिष्ट खंड को लक्षित करने में मदद करता है जिसे हम आउटपुट करना चाहते हैं:
नतीजतन, इस छवि फ़ाइल के लिए केवल पहला अनुरोध बैंडविड्थ का उपयोग कर रहा है। छवि के लिए सीडीएन के बाद के अनुरोधों को कैश्ड (आमतौर पर स्थानीय) संस्करण लोड किया जायेगा, साथ ही साथ केवल एक छवि बनाम 6 अलग-अलग सामाजिक आइकनों के लिए अनुरोध करने की आवश्यकता होगी।
जावास्क्रिप्ट, सीएसएस और छवियों को एक साथ मिलाकर, हमने अनुरोधों की संख्या काफी कम कर दी है
कोड मिनिफिकेशन
कोड मिनिफिकेशन में फ़ाइल का आकार कम करने के लिए व्हाइटस्पेस और लाइन ब्रेक को निकालना शामिल होता है, जब यह अनुरोध किया जाता है तो इसे लोड करने में तेज़ी होती है।
लिस्ट 25 के लिए, हम एससीएसएस, एक वाक्यविन्यास-आधारित स्टाइलशीट (एसस के लिए परिचय) का उपयोग करते हैं। यह हमें लेआउट पढ़ने के लिए आसानी से विकास के कई क्षेत्रों में हमारी सीएसएस फाइलों को संरचित करने की अनुमति देता है:
हम कोडकिट का इस्तेमाल करते हैं ताकि एक सीएसएस फ़ाइल में एससीएसएस फाइलें संकलित करें। यह सुनिश्चित करने के लिए कि फ़ाइल जितना छोटा हो, कोडकिट सफेद स्थान और रेखा विराम को भी हटा देती है:
नतीजतन, हम अपने सीएसएस फ़ाइल आकार को 28% तक कम करने में सक्षम थे।
छवि अनुकूलन
हमने दो क्षेत्रों में हमारी छवियों को अनुकूलित किया है: हमारे वर्डप्रेस थीम और अपलोड की गई सामग्री
हमारे वर्डप्रेस थीम के लिए, हमने यह सुनिश्चित करने के लिए codekit का उपयोग किया है कि सभी छवियों को दोषरहित संकुचित किया गया। यह सुनिश्चित करता है कि गुणवत्ता का कोई नुकसान नहीं होने के साथ फ़ाइल आकार जितना छोटा हो सके।
हमने वेब के लिए अनुकूलित छवियों को बचाने के महत्व के बारे में हमारे सभी लेखकों को भी शिक्षित किया है।
जावास्क्रिप्ट मुक्त सामाजिक साझाकरण
सूची 25 के लिए सामाजिक साझा करना किसी भी अन्य वेबसाइट की तरह वास्तव में महत्वपूर्ण है। हालांकि सामाजिक साझाकरण प्लगइन्स आपकी साइट को धीमा कर सकते हैं।
इन चार सामाजिक नेटवर्क की स्क्रिप्ट को एकीकृत करते समय हमारे परीक्षणों में पृष्ठ लोड समय को प्रभावित नहीं किया गया था, लेकिन यह मोबाइल डिवाइस पर देखने के दौरान वेब साइट धीमा था। स्क्रिप्ट को असिंक्रोनस लोड करने के बावजूद सामाजिक साझा करने वाले बटन को कुछ सेकेंड लगेंगे, जिसके परिणामस्वरूप पोस्ट की गई सामग्री दृश्य में लोड किए गए बटन के रूप में घूमती रहती है।
इस समस्या से निपटने के लिए, हम एक (लगभग) जावास्क्रिप्ट मुक्त समाधान में चले गए। प्रत्येक सामाजिक नेटवर्क के साझाकरण बटन हमारे कस्टम वर्डप्रेस प्लगइन द्वारा प्रदान किए जाते हैं, और थीम की जावास्क्रिप्ट का उपयोग केवल वेब ब्राउज़र विंडो को खोलने के लिए किया जाता है जब उपयोगकर्ता एक बटन पर क्लिक करता है
हालांकि, हम अभी भी सभी सामाजिक नेटवर्कों पर पोस्ट की कुल संख्या को प्रदर्शित करना चाहते थे। ऐसा करने के लिए, हम एक छोटे से कस्टम वर्डप्रेस प्लगइन का निर्माण करते हैं जो कि प्रत्येक सोशल नेटवर्क से सोशल शेयर की गिनती को पुनः प्राप्त करने और पोस्ट मेटा टेबल में कैश करता है। ये गिनती हर 24 घंटों में अपडेट हो जाती हैं, समय लेने वाली प्रश्नों को सुनिश्चित करना लगातार चल नहीं रहे हैं
आप या तो एक एपीआई का उपयोग कर सकते हैं जैसे शारिए या अनुकूलन के लिए फ़्लोटिंग सोशल बार काटना।
पिंगडोम के आरयूएम (रियल यूज़र मॉनिटरिंग) का उपयोग करते हुए, इस नए शेयर प्लगइन ने ‘सच्चे’ पृष्ठ लोड समय को 6 सेकंड से 2 सेकंड तक कम किया। यह भी सुनिश्चित करता है कि हमने तृतीय पक्ष स्क्रिप्ट के लिए किए गए अनुरोधों की संख्या कम कर दी है।
परिणाम
हमने हमारी साइट की गति में काफी सुधार किया है लोड समय 2.2 सेकंड से 1.22 सेकंड तक चला गया।
हम अपने सर्वर प्रतिक्रिया समय को काफी कम करने में सक्षम थे
इससे Google बॉट द्वारा एक पृष्ठ डाउनलोड करने के लिए बिताए गए समय को कम करने में मदद मिली, जिसने हमारी क्रॉल दर की सहायता की।
हमारी कुल बाउंस दर 7% कम हो गई है क्योंकि साइट तेजी से लोड हो रही थी, और मेजबानों को स्विच करके हम सर्वर त्रुटियों को कम करने में सक्षम थे।
जैसा कि आप कम बाउंस दर के साथ कल्पना कर सकते हैं, साइट पर व्यतीत किया गया समय 30 सेकंड तक बढ़ गया।
निष्कर्ष
जैसा कि आप देख सकते हैं कि एक तेज लोड हो रही वेब साइट आगंतुक सगाई को बेहतर बना सकती है। हमने जिन तकनीकों पर चर्चा की है, वे कई बुनियादी और मध्यवर्ती सुधारों को कवर करते हैं, जो कि आप अपने वर्डप्रेस साइट को अनुकूलित करने के लिए लागू कर सकते हैं।
हमें उम्मीद है कि इस आलेख ने आपकी वर्डप्रेस साइट को गति देने में आपकी सहायता की है। आप यह भी देखना चाह सकते हैं कि 20 के बारे में हमारा लेख 2015 के लिए वर्डप्रेस प्लगइन्स होना चाहिए।