विज्ञापन

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

इस लेख में, हम HTML फ़ाइलों को सिकोड़ने के लिए दो मुख्य तरीकों पर जाएँगे, क्यों HTML फ़ाइलों को सिकोड़ना चाहिए, और इसके साथ कैसे जाना चाहिए।

संपीड़न बनाम minification

जहाँ तक HTML फ़ाइलों के अनुकूलन की बात है, इसके दो मुख्य तरीके हैं: दबाव तथा minification. वे सतह पर समान ध्वनि करते हैं, लेकिन वास्तव में दो अलग-अलग तकनीकें हैं, इसलिए उन्हें भ्रमित न करें।

minification

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

नमूना HTML पृष्ठ:

यह एक हैडर है
मुझे मेल भेजें [email protected].
यह एक नया पैराग्राफ है!
यह बोल्ड और इटैलिक्स में एक नया पैराग्राफ है।

नमूना HTML पृष्ठ, छोटा

यह एक हैडर है
मुझे मेल भेजें [email protected].
यह एक नया पैराग्राफ है!
यह बोल्ड और इटैलिक्स में एक नया पैराग्राफ है।

मूल आकार: 354। न्यूनतम आकार: 272। बचत: 82 (23.16%)।

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

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

दबाव

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

लेकिन क्योंकि HTTP प्रोटोकॉल संपीड़न का समर्थन करता है, आपका वेब सर्वर विज़िटर को भेजने से पहले पृष्ठ को संकुचित कर सकता है (मानकर आपके सर्वर की सेटिंग में कंप्रेशन को सक्षम किया गया है), और फिर विज़िटर का ब्राउज़र पेज को उसकी मूल स्थिति में वापस कर सकता है।

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

एल्गोरिथ्म HTML फ़ाइल में पाठ की पुनरावृत्ति घटनाओं की तलाश करता है, फिर उन पुनरावृत्तियों को पिछली घटना के संदर्भ में बदल देता है। प्रत्येक संदर्भ केवल दो संख्याएँ हैं: संदर्भ कितना पीछे है और हम कितने वर्ण संदर्भित कर रहे हैं।

इस तरह से पाठ की एक स्ट्रिंग पर विचार करें (उदाहरण GZIP वेबसाइट से लिया गया):

ब्ला ब्ला ब्ला ब्ला ब्ला।

एल्गोरिथ्म निम्नलिखित पुनरावृत्ति को पहचानता है:

B {लाह b} {lah b} {lah b} {lah b} lah।

पहली घटना हमारा संदर्भ है, इसलिए इसे छोड़ दें:

ब्लाह बी {लाह बी} {लाह बी} {लाह बी} लाह।

दूसरी घटना पहली घटना पर वापस आती है, जो पाँच वर्ण पीछे और पाँच वर्ण लंबी है:

ब्लाह बी [5,5] {लाह बी} {लाह बी} लाह।

लेकिन इस मामले में, एल्गोरिथ्म पहचानता है कि अगली घटना पात्रों का एक ही अनुक्रम है, इसलिए यह संदर्भ लंबाई को दूसरे द्वारा विस्तारित करता है:

ब्लाह बी [५,१०] {लाह बी} लाह।

और फिर:

ब्लाह बी [५,१५] लाह।

और एल्गोरिथ्म यह समझने के लिए पर्याप्त स्मार्ट है कि अगले तीन वर्ण संदर्भ में पहले तीन वर्ण हैं, इसलिए यह तीन से विस्तारित होता है:

ब्लाह ख [5,18]।

अब एक सामान्य HTML फ़ाइल के बारे में सोचें और कितना दोहराव मौजूद है। लगभग हर टैग, जैसे, के अनुरूप समापन टैग है, जैसे. इसके अलावा, कई टैग पूरे हैं, जैसे कि, , ,, आदि। विशेषताएँ भी अक्सर दोहराई जाती हैं, जिनमें शामिल हैं कक्षा, href, तथा src. यह देखना आसान है कि HTML के साथ GZIP संपीड़न इतना प्रभावी क्यों है।

केवल नकारात्मक पक्ष यह है कि वेब सर्वर को हर बार एक पेज का अनुरोध करने पर संपीड़न को निष्पादित करने के लिए थोड़ा और अधिक सीपीयू की आवश्यकता होती है। लेकिन चूंकि आजकल सीपीयू बहुत ज्यादा चिंता का विषय नहीं है, इसलिए GZIP को सक्षम किए बिना लगभग हमेशा बेहतर है, भले ही आपके पास एंट्री-लेवल वेब होस्टिंग हो सर्वश्रेष्ठ वेब होस्टिंग सेवाएँ: साझा, VPS और समर्पितअपनी आवश्यकताओं के लिए सर्वश्रेष्ठ वेब होस्टिंग सेवा की तलाश है? यहाँ आपके ब्लॉग या वेबसाइट के लिए हमारी सबसे अच्छी सिफारिशें हैं। अधिक पढ़ें .

आपको कम्प्रेशन और मिनिमाइज़ क्यों करना चाहिए

दो मुख्य लाभ हैं, दोनों आज के मोबाइल-भारी वेब परिदृश्य में महत्वपूर्ण हैं।

तेज़ पेज लोड

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

कम बैंडविड्थ का इस्तेमाल किया

मान लें कि आपके पास 10 फाइलें हैं, प्रत्येक में 50 KB से लेकर 45 KB तक की कुल मात्रा 50 KB है। और मान लें कि आपकी वेबसाइट प्रतिदिन औसतन 1,000 आगंतुकों को सेवा प्रदान करती है, जहाँ प्रत्येक यात्रा में औसतन दस पृष्ठ हैं। अकेले HTML मिनिफिकेशन आपके बैंडविड्थ के उपयोग को 50 एमबी प्रति दिन (1.5 जीबी प्रति माह) घटाता है।

संपीड़न + न्यूनतमकरण

जैसा कि आप देख सकते हैं, HTML मिनिफिकेशन अपने आप में उपयोगी है, खासकर जब आपकी साइट बड़ी हो जाती है, फ़ाइलें बड़ी हो जाती हैं, और ट्रैफ़िक बढ़ जाता है। ध्यान दें कि Google के पेजस्पीड दिशानिर्देश HTML को छोटा करने की अनुशंसा करें, इसलिए यदि आपको संदेह है, तो उसे अन्यथा मना लें।

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

औसतन, आप एक HTML फ़ाइल को 70 से 90 प्रतिशत तक कम करने के लिए GZIP संपीड़न की उम्मीद कर सकते हैं। एक रूढ़िवादी संपीड़न अनुमान के साथ ऊपर दिए गए उदाहरण का उपयोग करते हुए, कुलीन HTML फ़ाइलों को 45 KB से 13.5 KB प्रत्येक, 365 KB की कुल संकोचन के लिए जाना जाएगा। अकुशल / असम्बद्ध की तुलना में, अब आपका साइट बैंडविड्थ प्रति दिन 365 एमबी (प्रति माह 11 जीबी) कम हो गया है।

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

HTML को कंप्रेस और मिनिमाइज कैसे करें

सौभाग्य से, इन दिनों न तो बहुत मुश्किल है, और आपको उन्हें स्थापित करने के लिए बहुत तकनीकी जानकारी की आवश्यकता नहीं है।

वर्डप्रेस प्लगइन्स

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

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

अगर तुम केवल हम चाहते हैं, हम अनुशंसा करते हैं HTML को छोटा करें लगाना। यह सरल है, HTML / CSS / JS को सपोर्ट करता है, और आपको मिनिमाइजेशन मेथड को थोड़ा ट्विक करने की अनुमति देता है (उदा। क्या हटाना है एचटीटीपी: तथा https: URL से)।

स्टेटिक HTML Minifiers

यदि आपकी HTML फ़ाइलें स्थिर हैं, (यानी CMS या वेब फ्रेमवर्क द्वारा गतिशील रूप से उत्पन्न नहीं), तो आप HTML फ़ाइलों के दो सेटों को बनाए रख सकते हैं: एक "स्रोत" सेट, जो आसान संपादन के लिए अस्वाभाविक है, और एक "कीमा बनाया हुआ" सेट, जिसे आप किसी भी समय बनाते हैं ताकि आप स्रोत फ़ाइल में बदलाव कर सकें।

छोटा करने के लिए, इनमें से किसी एक उपकरण का उपयोग करें:

• HTMLCompressor
• HTML न्यूनतम
• HTML न्यूनतम (ऊपर वाले से अलग)

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

GZIP संपीड़न सक्षम करें

GZIP संपीड़न को सक्षम करने के चरण अलग-अलग हो सकते हैं जो आपके द्वारा उपयोग किए जा रहे वेब सर्वर सॉफ़्टवेयर पर निर्भर करता है। चूंकि अपाचे सबसे लोकप्रिय विकल्प है, हम इसे .htaccess का उपयोग करने में सक्षम करने के लिए कवर करते हैं।

एफ़टीपी का उपयोग करके अपने वेब सर्वर से कनेक्ट करें, फिर एक फ़ाइल बनाएं .htaccess रूट डायरेक्टरी में। निम्न सेटिंग्स करने के लिए .htaccess फ़ाइल को संपादित करें:

 mod_gzip_on हां mod_gzip_dechunk हां mod_gzip_item_itlude फ़ाइल। (html | txt | css | js | php | pl) $ mod_gzip_item_include हैंडलर ^ cgi-script $ mod_gzip_item_include mime ^ टेक्स्ट /.* mod_gzip_item_include mime ^ एप्लिकेशन / x-javascript। ^ सामग्री-एंकोडिंग:।। * Gzip *
 SetOutputFilter DEFLATE। 

सुनिश्चित नहीं है कि अगर संपीड़न आपकी वेबसाइट पर काम कर रहा है? इस उपकरण से इसका परीक्षण करें.

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