उत्तरदायी डिजाइन विकास में सुधार के 7 तरीके

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

बेशक, इस तथ्य के कारण कि एक अनुकूली परियोजना पर काम करने की प्रक्रिया बहुत ही व्यक्तिगत और पुनरावृत्त है, बल्कि इसका विश्लेषण करना और सभी अवसरों के लिए समाधान देना मुश्किल है। हालांकि, कुछ सामान्य तरीके और तकनीकें लगभग हमेशा लागू की जा सकती हैं।

हम सामग्री संरचना से लेकर स्केलेबल छवियों तक, उत्तरदायी डिज़ाइन को बेहतर बनाने के लिए सात तकनीकों को देखेंगे।

1. सबसे पहले मोबाइल संस्करण

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

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

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

जैसा कि लोकप्रिय सीएसएस फाउंडेशन ढांचे के पीछे ZURB टीम के सदस्यों ने नोट किया है:

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

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

2. सामग्री की रणनीति

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

UXMag ने कहा:

प्रत्येक विशिष्ट मामले में उपयोगकर्ता को सही सामग्री दिखाने के लिए, एक रणनीति की आवश्यकता होती है जो उपयोगकर्ता को उसकी यात्रा के हर चरण में सही सामग्री प्रदान करेगी।

एक सूचना अवसंरचना और सामग्री रणनीति के विकास का मतलब है कि सामग्री को उपयोगकर्ताओं के अध्ययन और उनकी आवश्यकताओं के आधार पर एक ढांचे और संरचना के आधार पर बनाया जाना चाहिए।

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

कंटेंट एवरीवेयर, सारा वाचर-बोएचर के लेखक के रूप में , विख्यात:

यदि हम सामग्री के बारे में बात करते हैं, जो फार्म और सामग्री को निर्धारित करती है, तो यह स्पष्ट हो जाएगा कि सामग्री प्राथमिकता भी नहीं है, बल्कि एक मूलभूत चीज है।

3. स्केच और प्रोटोटाइप

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

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

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

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

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

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

4. ढाँचा

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

एक रूपरेखा चुनते समय, कई बातों पर ध्यान देना महत्वपूर्ण है। आरंभ करने के लिए कितना प्रशिक्षण आवश्यक है? कितना प्रलेखन उपलब्ध है और किन शर्तों के तहत समर्थन प्रदान किया गया है? ढांचे की कार्यक्षमता क्या है?

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

एक अनुकूली सीएसएस फ्रेमवर्क का मात्र उपयोग डिजाइन और विकास की सभी समस्याओं को हल नहीं करेगा, हालांकि, ये उपकरण उनका अध्ययन करने के लिए समय के लायक हैं और आपके भविष्य के अनुकूली परियोजनाओं के लिए आधार के रूप में काम कर सकते हैं।

5. ब्रेकप्वाइंट

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

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

इलियट जे स्टॉक्स के डिजाइनर और लेखक के अनुसार, इस दृष्टिकोण का प्लस यह है:

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

तो ब्रेकप्वाइंट के लिए "सामग्री" दृष्टिकोण का क्या मतलब है?

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

डिजाइनर मार्क बोल्टन कहते हैं।

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

इसके अलावा, इस विधि में ज्यादा समय नहीं लगता है। आकर्षित थॉमस राज्यों:

एक "विशेष" मीडिया क्वेरी को जोड़ने के लिए उतना ही समय लगता है क्योंकि यह एक समाधान खोजने के लिए है जो सामग्री को बिना किसी अतिरिक्त क्वेरी के काम करने की अनुमति देगा।

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

6. स्केलेबल चित्र

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

ऐसा ही एक समाधान है एडेप्टिव इमेजस सॉफ्टवेयर का उपयोग, जो कि फिलामेंट ग्रुप के एक प्रयोग पर आधारित है। अनुकूली छवियाँ आगंतुक की स्क्रीन का आकार निर्धारित करने के लिए एक .htaccess फ़ाइल, एक php फ़ाइल और जावास्क्रिप्ट कोड की एक पंक्ति का उपयोग करती हैं। तब मॉड्यूल स्वचालित रूप से बनाता है, कैश करता है और एक विशेष डिवाइस के लिए उपयुक्त एम्बेडेड एचटीएमएल छवियों का एक छोटा संस्करण प्रदर्शित करता है। यह सोचना महत्वपूर्ण है कि छवियों को कैसे छोटा किया जाएगा क्योंकि वे कम हैं - फोकल प्वाइंट और ReSRC.it जैसे उपकरण छवि को बुद्धिमानी से तैयार करने में मदद करते हैं ताकि छोटे उपकरणों पर देखे जाने पर छवि का मुख्य फोकस खो न जाए।

उच्च-घनत्व रेटिना डिस्प्ले की एक नई पीढ़ी के आगमन के साथ, उचित स्केलिंग के लिए छवि अनुकूलन का महत्व बढ़ गया है। उत्तरदायी रेटिना छवियों को बनाने का एक तरीका सीएसएस स्प्राइट्स का उपयोग करना है। उच्च-रिज़ॉल्यूशन डिस्प्ले के साथ काम करने के लिए, आपको दो छवियों की आवश्यकता होती है - सामान्य (@ 1x) और उच्च (@ 2x) रिज़ॉल्यूशन में, जिसका अर्थ है CSS में फ़ाइलों, चयनकर्ताओं और लिंक को डुप्लिकेट करना। हालांकि, CSS स्प्राइट्स का उपयोग करते समय, "आपको केवल सभी चयनकर्ताओं के लिए @ 1x स्प्राइट फ़ाइल के लिंक को फिर से परिभाषित करने की आवश्यकता है जिसमें उच्च-रिज़ॉल्यूशन विशेषताएँ शामिल हैं," मेकेल लूमंस कहते हैं। यह तकनीक नेटवर्क अनुरोधों की संख्या को कम करती है, स्टाइलशीट के आकार को कम करती है और रेटिना के लिए अधिक कुशल छवि निर्माण प्रक्रिया की अनुमति देती है।

हालाँकि, CSS Sprites केवल आपके CSS में टैग की गई छवियों के साथ काम करता है। वेब पृष्ठों पर छवियों के लिए, Imulus ने अत्यंत उपयोगी रेटिना.जेएस प्लगइन विकसित किया है जो अंत में @ 2x के साथ छवियों के लिए पथों के लिए आपके सर्वर की जांच करता है।

एक अन्य टिप आइकन फ़ॉन्ट्स के साथ अवांछित छवियों को ट्रिम करने के लिए है, जो लाइटर वेबसाइटों को बनाना, संपादित करना और बनाए रखना बहुत आसान है।

एक और मीडिया संसाधन जिसके लिए उचित स्केलिंग की आवश्यकता होती है वह है वीडियो - यह स्क्रीन से स्क्रीन तक लचीला और पैमाना होना चाहिए। छवियों के साथ यहां सब कुछ थोड़ा अधिक जटिल है, लेकिन jQuery प्लगइन्स (जैसे Fitvid.js और Fluidvid.js ) विकास को आसान बनाने में मदद करेंगे।

7. न्यूनतम

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

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

आप बड़ी संख्या में टूल का उपयोग करके CSS और JavaScript फ़ाइलों को कम कर सकते हैं: CSSTidy , Minify , JSMin , YUI कंप्रेसर और स्क्विशी उनमें से कुछ ही हैं। इन उपकरणों की तुलना भी की जा सकती है। अंतत:, एक मिनिफिकेशन टूल का चुनाव आपके कोड और वर्कफ़्लो पर निर्भर करता है।

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

अनुवाद पर पीएस टिप्पणियाँ पीएम में स्वीकार की जाती हैं।

PPS हमने अपने ब्लॉग पर प्रयोज्य और UX की दुनिया में दिलचस्प प्रकाशनों की खुदाई शुरू की। अचानक, कौन परवाह करता है।