धीमी साइटों पर प्रदर्शन संबंधी समस्याओं को ठीक करने के लिए एक व्यापक मार्गदर्शिका

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

कम गुणवत्ता की मेजबानी सबसे अधिक संभावित अपराधी है

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

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

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

अपनी F12 कुंजी का उपयोग करें

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

आपको ये त्रुटियां अपने स्वयं के कोड और आयातित कोड पुस्तकालयों जैसे jQuery, दोनों में मिलेंगी। सिर्फ इसलिए कि jQuery बड़ा और लोकप्रिय है इसका मतलब यह नहीं है कि यह निर्दोष है। यहाँ उस चीज़ का एक उदाहरण दिया गया है जिसे आप देख रहे हैं:

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

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

Google से कुछ मुफ्त सलाह लें

क्या आप जानते हैं कि Google आपके वेब पेज का मुफ्त में विश्लेषण कर सकता है और आपको सुझाव दे सकता है कि किसी भी मुद्दे को कैसे ठीक किया जाए? आपको केवल Google के पृष्ठ स्पीड इनसाइट्स पृष्ठ पर जाना होगा और उस पृष्ठ का URL दर्ज करना होगा जिसका आप विश्लेषण करना चाहते हैं।

यह वास्तव में कोई आसान नहीं हो सकता है, हालांकि आप जरूरी नहीं कि धार्मिक रूप से उनकी सभी सलाह का पालन करना चाहते हैं। Google की प्रणाली यह पता लगाने में अच्छी है कि आपके पृष्ठ को धीमा करने का क्या तरीका हो सकता है, लेकिन कुछ सुधार उतनी समस्याओं को हल नहीं कर सकते जितना वे बनाते हैं।

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

कुछ उल्लेखनीय उदाहरणों में शामिल हैं:

• http://bbc.com (70m/77d)
• http://cnn.com (47m/65d)
• http://whitehouse.gov (58m/56d)
• http://microsoft.com (49m/71d)
• http://apple.com (61m/72d)
• http://linux.com (33m/44d)
• http://ubuntu.com (69m/81d)
• http://linuxmint.com (59m/67d)
• http://youtube.com (53m/69d)
• http://facebook.com (49m/81d)

इन उदाहरणों में से कोई भी वास्तव में अपनी खुद की साइट को खराब प्रदर्शन करने का बहाना नहीं है, लेकिन वे यह साबित करते हैं कि एक सुस्त साइट आवश्यक रूप से विफलता का पर्याय नहीं है।

छवियों का सही उपयोग करें

अगर किसी को सही छवि पता होगी formats का उपयोग करना है और कब, यह डिज़ाइनर होना चाहिए, है ना? लेकिन आश्चर्यजनक रूप से ऐसा लगता है कि आप में से बहुत से लोग नहीं जानते हैं, या जब आप ऐसा करते हैं, तो आपको लगता है कि इससे कोई फर्क नहीं पड़ता। खैर यहाँ खबर है: यह हर समय मायने रखता है।

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

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

यहाँ उन बुनियादी बातों को ध्यान में रखा जाना चाहिए जिन्हें आप कृति बनाते समय रखते हैं:

• बड़ी छवियों का उपयोग अगर बिल्कुल

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

• PPI / DPI मान को उचित रूप से सेट करें

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

• बड़े चित्र स्लाइस करें

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

अपनी छवि को काटने के बाद, आपके पास इसे अनुकूलित करने का मौका है। मान लीजिए कि मूल छवि पीएनजी में थी format, अब आप किसी भी गैर-पारदर्शी हिस्से को JPG में बदल सकते हैं format, और पीएनजी छवियों के रूप में पारदर्शिता की आवश्यकता वाले हिस्सों को छोड़कर, बहुत सारे बाइट्स को बचाएं।

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

वीडियो को भी अनुकूलित किया जा सकता है

वीडियो संपीड़न की कला दो चीजों पर निर्भर करती है: लक्ष्य format और कोडेक जिसे आप एन्कोडिंग के लिए उपयोग करते हैं। कौन सा format आप का चयन पूरी तरह से आपकी आवश्यकताओं पर निर्भर करता है। सामान्य तौर पर, यदि आपको उच्च गुणवत्ता की आवश्यकता है, तो H.4 एन्कोडिंग वाला MP264 उच्च संपीड़न पर सर्वोत्तम गुणवत्ता प्रदान करेगा, लेकिन जब आपको उस उच्च गुणवत्ता की आवश्यकता नहीं होती है, तो WebM और FLV छोटे फ़ाइल आकार प्रदान करते हैं। आपका वीडियो संपादन सॉफ़्टवेयर अभी भी एक विकल्प के रूप में FLV की पेशकश कर सकता है, लेकिन इसका उपयोग करने की अनुशंसा नहीं की जाती है format.

यदि आपको डीवीडी की गुणवत्ता की आवश्यकता है, तो H.4 एन्कोडिंग के साथ MP264 उत्कृष्ट परिणाम देने जा रहा है, लेकिन एक भारी डाउनलोड होने की कीमत पर आता है। वीडियो स्ट्रीमिंग के लिए, WebM बेहतर संपीड़न देता है। समस्या यह है कि सभी मोबाइल ऑपरेटिंग सिस्टम वेबएम को अभी तक समर्थन नहीं करते हैं (उन्हें चाहिए, लेकिन वे कुछ पागल कारण से प्रतीत होते हैं, संभवतः मोबाइल डेवलपर के सुनहरे नियम का पालन नहीं करते हैं: आप असुविधा को दूर कर सकते हैं और अपने ग्राहक को उतना ही भ्रमित कर सकते हैं जितना आप कर सकते हैं)।

आप MP4 वीडियो के साथ H.264 के बजाय MPEG-4 कोडेक का उपयोग करना चाहिए? आम तौर पर नहीं, क्योंकि इसका परिणाम समान गुणवत्ता स्तर पर बड़े फ़ाइल आकार में होता है। लेकिन अगर आपके वीडियो में छोटे भौतिक आयाम हैं, और आप स्ट्रीमिंग के लिए वीडियो का सही प्रसारण चाहते हैं, तो MPEG-4 एक अच्छा कोडेक है क्योंकि इसमें डेटा अखंडता सुनिश्चित करने के लिए अंतर्निहित त्रुटि सुधार है।

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

WMV फ़ाइलों में एंड्रॉइड, विंडोज या लिनक्स उपयोगकर्ताओं के लिए कोई समस्या नहीं है। लेकिन Apple उपकरणों का उपयोग कर इंटरनेट समुदाय के 12.5% के साथ, आपको यह तय करना होगा कि क्या यह उनके लिए असुविधाजनक है। व्यक्तिगत रूप से मैं यह सलाह नहीं दूंगा कि आप एक तेज़ लोड समय पाने के लिए ऐसा करें।

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