वेब प्रदर्शन: कैसे Swish.com 40% तेज़ हो जाता है

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

हमें यह घोषणा करते हुए प्रसन्नता हो रही है कि इससे जुड़े समस्याओं को खोजने और ठीक करने के लिए डिज़ाइन किए गए नए F12 टूल की बदौलत टेस्टिंग साइट का प्रदर्शन आसान हो गया है। इस मामले में, हमने IE11 में नए F12 सेट से आधुनिक.आई स्कैनर और यूआई प्रोफाइलर का उपयोग किया। हमने swish.com टीम के डेवलपर्स को ये उपकरण दिखाए कि यह पता लगाने के लिए कि कोई लोकप्रिय साइट विशिष्ट उपयोग परिदृश्यों के प्रदर्शन को अनुकूलित करने के लिए उनका उपयोग कैसे कर सकती है। परिणाम - साइट लोडिंग 2 सेकंड तेज हो गई है: कोड में कुछ सरल परिवर्तनों के लिए 40% के प्रदर्शन में वृद्धि।



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

ऐसा हमने किया है

Swish.com विश्लेषण

Swish.com सबसे दिलचस्प वस्तुओं को प्री-ऑर्डर के लिए उपलब्ध साइटों किकस्टार्टर, Indiegogo, Amazon, Outgrow.me, ड्रैगन इनोवेशन और क्राउड सप्लाई से इकट्ठा करता है, जिससे आपको एक ही स्थान पर सबसे प्रभावशाली तकनीकी समाचार देखने का मौका मिलता है।
कई समान साइटों की तरह, swish.com डेटाबेस से AJAX अनुरोधों का उपयोग करके स्थिर तत्वों और सामग्री दोनों का उपयोग करता है। परिणाम बड़े उत्पाद चित्रों के साथ एक ग्रिड के रूप में प्रदर्शित किया जाता है।

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

हम टैब "यूजर इंटरफेस रिस्पांस" को देखते हैं

हमने Internet Explorer 11 के F12 टूल में "यूजर इंटरफेस रिस्पांस" टैब से परीक्षण शुरू किया। नीचे का परिणाम यह है कि हमें ऑप्टिमाइज़ेशन से पहले मिला:



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

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

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

गहरा खोदें: नेटवर्क टैब

फ़ाइल अपलोड ऑर्डर बदलने के साथ कई अनुकूलन विकल्प जुड़े हुए हैं। देखें कि पेज लोड होता है और आप किस क्रम में "नेटवर्क" टैब में देख सकते हैं:



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

परिणामी नेटवर्क गतिविधि ग्राफ़ में कार्य भी रंग कोडित होते हैं: लाल - अनुरोध के निर्माण और उसके वास्तविक भेजने के बीच का समय, पीला - उस क्षण से प्रतीक्षा जब तक अनुरोध प्राप्त नहीं होता है जब तक कि परिणाम का पहला बाइट प्राप्त नहीं होता है, और नीले रंग का अर्थ है परिणाम लोड करने का समय।

बड़े सफेद स्थान जो किसी भी गतिविधि पर कब्जा नहीं करते हैं (उदाहरण के लिए, load_templates.js को लोड करने के बाद एक स्थान) का अर्थ है कि जब नेटवर्क वास्तव में उपयोग नहीं किया जाता है। वे उन रिक्त स्थानों से मेल खाते हैं जिन्हें हमने "उपयोगकर्ता इंटरफ़ेस प्रतिसाद" टैब में देखा था। इन क्षेत्रों को स्वीकार करते हुए, हम ठीक से समझ सकते हैं कि अनुकूलन कहाँ संभव है।

पहला परिणाम

IE11 डेवलपर टूल से हमें जो जानकारी मिली है, वह साइट लोडिंग के अनुकूलन के लिए एक योजना तैयार करने के लिए पर्याप्त है। हमने swish.com पर जो देखा वह कई अन्य साइटों पर भी खोजना आसान है, इसलिए नीचे दिए गए सुझावों को व्यापक रूप से अनुकूलन के लिए लागू किया जा सकता है।

पहले सीएसएस डाउनलोड करें, फिर जावास्क्रिप्ट

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



इस स्थिति में, "नेटवर्क" टैब दिखाता है कि पृष्ठ प्रदर्शित करने के लिए स्क्रिप्ट से पहले सीएसएस से पहले swish.com को जावास्क्रिप्ट की आवश्यकता होती है। Jquery.min.js और url.js फ़ाइलों के अनुरोध को समापन टैग में ले जाया जा सकता है। चरम मामलों में, बाहरी स्क्रिप्ट सिर अनुभाग के अंत में हो सकती हैं, लेकिन हमेशा सभी सीएसएस के बाद।

फ़ाइलों को संपीड़ित करने के लिए gzip का उपयोग करें

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

इनलाइन फोंट का उपयोग करने पर विचार करें।

CSS शैलियाँ @ portimport निर्देश का उपयोग करके अन्य बाहरी CSS फाइलों को लोड कर सकती हैं। ये नेस्टेड शैली के निष्कर्ष प्रदर्शन को काफी कम कर सकते हैं, क्योंकि वे सामग्री को प्रीफ़ैच करने के लिए ब्राउज़र की क्षमता का उल्लंघन करते हैं। यदि बाहरी शैली सीधे HTML में निर्दिष्ट की जाती है, तो ब्राउज़र तुरंत इसे डाउनलोड करने के लिए अनुरोध भेज सकता है, जिससे समग्र पृष्ठ लोड समय कम हो जाएगा। यदि बाहरी शैली में एक एम्बेडेड @ externalimport निर्देश है, तो ब्राउज़र इसे तब तक डाउनलोड करना शुरू नहीं कर सकता जब तक यह शैली लोड और संसाधित नहीं हो जाती।

हमारे मामले में, bootstrap.min.css के पास एक संलग्न @ directimport निर्देश है जो कुछ फ़ॉन्ट लोड करता है। नेटवर्क गतिविधि रिकॉर्ड में, हम देखते हैं कि @ onlyimport केवल bootstrap.min.css को लोड करने के बाद शुरू होता है, जो एक महत्वपूर्ण देरी का कारण बनता है।



इस मामले में, विशेष फोंट डाउनलोड करने के लिए @ imimport निर्देश विशेष रूप से आवश्यक थे, इसलिए हमने इसके बजाय अंतर्निहित फोंट का उपयोग करने का निर्णय लिया। सामान्य स्थिति में, सही समाधान यह होगा कि लिंक को सीधे HTML में स्थानांतरित किया जाए या सीधे CSS में सामग्री को शामिल किया जाए।

टेम्प्लेट में स्क्रिप्टिंग से बचें

पाद लेख टेम्पलेट में, हमें स्क्रिप्ट का लिंक मिला। F12 उपकरण नोटिस करना आसान बनाते हैं, क्योंकि वे नेटवर्क गतिविधि रिपोर्ट में सभी अनुरोधों के स्रोत दिखाते हैं। इस jquery-cookie.js अनुरोध का स्रोत XMLHttpRequest है, जो असामान्य है और प्रदर्शन को काफी कम करता है।



हम HTML टेम्प्लेट में स्क्रिप्ट का उपयोग करने की अनुशंसा नहीं करते हैं। जब HTML के अंदर jQuery स्क्रिप्ट की प्रक्रिया करता है, तो HTML एम्बेड स्क्रिप्ट पर नियंत्रण रिटर्न से पहले स्क्रिप्ट को तुरंत निष्पादित किया जाता है। यदि स्क्रिप्ट बाहरी है, तो यह सर्वर से स्क्रिप्ट को प्राप्त करने के लिए प्रतीक्षा करने के कारण एक महत्वपूर्ण देरी की ओर जाता है। ऊपर वर्णित सीएसएस के लिए स्थिति @ isimport के साथ समस्या के समान है, जहां अतिरिक्त स्तर के घोंसले के शिकार को सामग्री प्राप्त करने में देरी होती है।

समस्या का समाधान भी @ imimport के साथ ऊपर वर्णित स्थिति के समान है। लिपियों को सीधे HTML फ़ाइल में डाला जाना चाहिए ताकि ब्राउज़र उन्हें प्रीलोड कर सके। यदि संभव हो, तो आपको उन्हें भी जोड़ना चाहिए और नेटवर्क कनेक्शन संसाधनों को बचाने के लिए संपीड़न का उपयोग करना चाहिए।

थर्ड-पार्टी कोड डाउनलोड करने के लिए अपना समय लें

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

"नेटवर्क" टैब में, आप देख सकते हैं कि स्क्रिप्ट फेसबुक और Google विश्लेषिकी पृष्ठ के शीर्षलेख और पाद लेख की तुलना में पहले से लोड हैं। हमने मूल पृष्ठ तत्वों को लोड करने के बाद कई सेकंड के समय के बाद इन लिपियों को लोड करने की सिफारिश की।

चित्रों को संपीड़ित करें

ग्राफिक्स विशेष रूप से swish.com जैसी नेत्रहीन समृद्ध साइट के लिए डाउनलोड करने योग्य सामग्री का एक बड़ा हिस्सा बना सकते हैं। आधुनिक ऑनलाइन उपलब्ध उपकरण जैसे web.ie या webpagetest.org आपको यह निर्धारित करने में मदद करेगा कि कौन सी छवियां संपीड़ित की जा सकती हैं। आप गुणवत्ता के महत्वपूर्ण नुकसान के बिना, छवियों के वजन को कम करने के लिए kraken.io के समान टूल का उपयोग कर सकते हैं। अनुकूलन से पहले, swish.com को सीधे मूल स्रोत से छवियां मिलीं, और ये छवियां हमेशा से अनुकूलित थीं। अपने स्वयं के सर्वर से अनुकूलित छवियों का उपयोग करते हुए, वे साइट के बहुत तेजी से लोड को प्राप्त करने में सक्षम थे।

अच्छी खबर: इन समस्याओं को हल करना बहुत आसान था - उनमें से लगभग सभी तय हो गए थे। अनुकूलन के बाद नेटवर्क गतिविधि रिकॉर्ड कैसा दिखता है:

पहले और बाद में: हम क्या जीते

पेज लोडिंग गति का मूल्यांकन करने के कई तरीके हैं। आधुनिक साइटों की जटिलता के कारण, खिड़की के लिए समय जैसे सरल माप। लोड अब एक उद्देश्य संकेतक नहीं हो सकता है। प्रदर्शन अनुकूलन गुरु, स्टीव सॉडर्स ने कारणों की व्याख्या की और अपने ब्लॉग पर अधिक प्रासंगिक माप मैट्रिक्स का सुझाव दिया www.stevesouders.com/blog/2013/05/13/moving-beyond-window-onload

Webpagetest.org साइट आपको साइट के वीडियो डाउनलोड के स्टोरीबोर्ड को देखने की अनुमति देती है, जिससे पता चलता है कि उपयोगकर्ता इसे कैसे देखता है। हमने इस उपकरण को अनुकूलन से पहले और बाद में swish.com डाउनलोड गति का मूल्यांकन करने की कोशिश की।

नीचे पृष्ठ लोडिंग का एक स्टोरीबोर्ड है, जो 0.5 सेकंड से टूट गया है। यह देखा जाता है कि पृष्ठ कंकाल की उपस्थिति 3 सेकंड के बाद होती है, और लोड होने के 5.5 सेकंड के बाद ही पूरा पृष्ठ दिखाई देता है।



इंटरनेट एक्सप्लोरर 11 डेवलपर के टूल का उपयोग करके हमारी साइट ऑप्टिमाइज़ेशन कार्य हमें पूरी साइट देखने और 3.5 सेकंड के बाद इसका उपयोग शुरू करने की अनुमति देता है:

सुखद अंत

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