कैसे सामने के अंत वेबसाइट प्रदर्शन को मापने के लिए

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

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

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

HTTP अनुरोध

हर बार जब आपकी वेबसाइट लोड होती है, तो वह दूरस्थ सर्वर से HTTP अनुरोध भेजती है। इस प्रकार के डेटा ट्रांसफर को a कहा जाता है नेटवर्क प्रोटोकॉल विशेष रूप से वितरण और सादे फ़ाइलों को संग्रहीत करने के लिए उपयोग किया जाता है। इनमें अक्सर आपके मूल सीमांत कोड जैसे HTML, CSS और JavaScript शामिल होते हैं.

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

क्या विचार किया जाना है कि प्रत्येक फ़ाइल के लिए अनुरोध का समय कितना है और यदि यह प्रवृत्ति लगातार बनी रहती है। एक महीने में 100k या 1 मिलियन आगंतुकों से ऊपर आने पर विचार करें। यह प्रत्येक पृष्ठ तत्व को एक साथ जोड़ने और मेमोरी में बाहरी फ़ाइलों को लोड करने के लिए ब्राउज़र का काम है.

अक्सर वेबसाइट की अनुकूलित स्पीड रेफरेंस क्लंकी जावास्क्रिप्ट को रखने वाले कारक शामिल होते हैं या बड़ी छवि फाइलें। Verizon FiOS के लोकप्रिय होने के साथ ही इंटरनेट स्पीड 600kbps की मार और चढ़ाई जारी रखना आम बात है! दुर्भाग्य से यह आदर्श नहीं है और यहां तक ​​कि उच्च गति कनेक्शन के साथ अनुकूलन दोष का अनुभव करना संभव है.

साइट प्रदर्शन के लिए उपाय

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

Google ने पृष्ठ गति नामक एक परियोजना जारी की है जो डेवलपर्स को अपनी वेबसाइटों को अनुकूलित करने और प्रदर्शन के सर्वोत्तम स्तरों की जांच करने में मदद करने के लिए बनाया गया था। मूल रूप से यह परियोजना एक ओपन-सोर्स फायरबग एड-ऑन के रूप में शुरू हुई और अब इसे वेबसाइट परीक्षण के लिए 3 पार्टी संदर्भ के रूप में स्वीकार किया गया है.

फायरबग यूजर्स के लिए एक और विकल्प याहू का YSlow ऐड-ऑन है। स्क्रिप्ट प्रत्येक वेब पेज अनुरोध का विश्लेषण करती है और प्रदर्शन को सुधारने के सबसे सामान्य तरीके सुझाती है। ये सुझाव याहू पर आधारित हैं! वेब डिज़ाइन में सर्वोत्तम अनुकूलन प्रथाओं के लिए डेवलपर्स संसाधन.

इस कार्यक्रम में पहले से ही थोड़ा बहुत जानकारी हो सकती है क्योंकि इसमें बहुत सारी जानकारी है। बस मूल बातें करने के लिए छड़ी और सरल प्रलेखन का पालन करके प्रक्रिया केक का एक टुकड़ा होना चाहिए.

डेवलपर्स हमेशा कोड तोड़ने के लिए एक परियोजना पर कूदने में रुचि रखते हैं, इसलिए यह कोई ब्रेनर नहीं होना चाहिए। थोड़ी सी मदद के लिए आप YSlow सहायता मार्गदर्शिका देख सकते हैं.

स्पीड तकनीक

प्रदर्शन को तेज करने के लिए कुछ सरल तरकीबें हैं जिन्हें आप अपनी वेबसाइट पर तुरंत लागू कर सकते हैं। सबसे पहला और आसान तरीका है कि आप अपनी CSS और JavaScript फ़ाइलों को अलग कर लें.

CSS कोड आपके दस्तावेज़ के हेडर में आता है। यह उपयोगी है क्योंकि DOM के लोड होने के दौरान CSS संपत्तियों को पार्स किया जाना आवश्यक है। एक बार जब कोई वेब ब्राउजर आपकी सीएसएस शैलियों को पहचानता है तो हेडिंग में यह पूरी तरह से वेब पेज प्रदर्शित होने तक प्रतीक्षा करेगा जब तक कि सभी शैलियों को लोड नहीं किया जाता। इसके अलावा आइकन या पृष्ठभूमि डिजाइन के लिए उपयोग की जाने वाली कोई भी छवि लोड होने में समय लेगी और पहले ऐसा करना चाहिए.

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

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

संपूर्ण DOM पूरा होने तक डायनामिक कंटेंट लोड नहीं हो पाता है, लेकिन कभी-कभी यह एरर लौटा देगा। CSS / JS का परीक्षण करें, यह देखने के लिए कि क्या आप कोई अनुकूलन लाभ वापस कर सकते हैं.

फ़ाइल का आकार संपीड़न

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

इस कार्य में मदद करने के लिए वेब पर बहुत सारी अन्य मुफ्त सेवाएँ हैं. CSS को छोटा करें प्रक्रिया को सरल बनाने के लिए संपूर्ण CSS संपीड़न इंटरफ़ेस है। उसी वेबसाइट में एक कस्टम जावास्क्रिप्ट कंप्रेसर भी है जो समान कार्य करता है लेकिन स्क्रिप्टिंग को व्यवस्थित रखता है.

आप अपने वेब पृष्ठों में सबसे बड़ी छवियों को संपीड़ित करने पर भी विचार कर सकते हैं। यह किसी फोटो एडिटिंग सॉफ्टवेयर जैसे एडोब फोटोशॉप या जीआईएमपी के साथ किया जा सकता है। PNG इमेज jpg या TIFF फॉर्मेट की तुलना में औसतन बहुत कम निर्यात करेगी। संपीड़न प्रक्रिया में सहायता के लिए बहुत सारे ऑनलाइन टूल भी हैं जैसे कि छवि ऑप्टिमाइज़र.

स्रोत जाँच और मेट्रिक्स

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

सबसे लोकप्रिय उपकरण मोज़िला फायरबग फ़ायरफ़ॉक्स ब्राउज़र के लिए एक प्लग-इन है। यह ऐप प्रत्येक वेबसाइट के लिए प्रतिक्रिया समय, हेडर जानकारी, पेज एलिमेंट्स और स्क्रिप्ट की जांच करने के लिए आपके ब्राउज़र के निचले भाग में एक छोटा टूलबार स्थापित करता है। Google Chrome के विस्तार के रूप में स्क्रिप्ट को फायरबग लाइट में भी चित्रित किया गया है.

Mod_pagespeed के साथ अपाचे

सभी सेटअप अपाचे वेब सर्वर नहीं चलाएंगे, इसलिए यह विकल्प हमेशा उपलब्ध नहीं होता है। यह मॉड्यूल सीधे संबंधित है Google का पृष्ठ गति मॉनिटर पहले उल्लेख किया जा चुका है। वास्तव में, mod_pagespeed के लिए कोड मूल रूप से Google कोड के डेटाबेस से कई पुस्तकालयों पर आधारित था.

अपाचे सर्वर प्रशासकों को अपने सर्वर के प्रदर्शन को बढ़ाने के लिए मॉड्यूल नामक छोटे पैकेज स्थापित करने की अनुमति देता है. mod_pagespeed इन मॉड्यूलों में से एक है जो रनटाइम के दौरान अनुकूलन तकनीकों को स्वचालित रूप से निष्पादित करता है। सूची देने के लिए बहुत सारी प्रक्रियाएँ हैं, हालाँकि कुछ मुख्य अनुप्रयोगों में शामिल हैं- HTML / CSS / JS कम्प्रेशन और इमेज कोचिंग.

वर्तमान में यह प्रोजेक्ट Google में रखा गया है और यह डेवलपर्स के लिए खुला है। Apache HTTP सर्वर चलाने वाले सभी होस्टिंग खातों में mod_pagespeed को लागू करने के लिए Google GoDaddy के साथ काम कर रहा है.

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

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