HTML मिनिफायर

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

HTML मिनिफिकेशन क्या करता है?

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

मिनिफिकेशन आम तौर पर प्रोडक्शन बिल्ड के दौरान या स्टैटिक HTML डिप्लॉय करने से ठीक पहले किया जाता है। इससे ट्रांसफ़र होने वाले डेटा की मात्रा कम हो सकती है, हालांकि Brotli या gzip जैसा HTTP कम्प्रेशन आम तौर पर अतिरिक्त और अक्सर इससे भी बड़ी कमी लाता है। दोनों प्रक्रियाएं एक-दूसरे की पूरक हैं, क्योंकि मिनिफिकेशन सोर्स को बदलता है, जबकि कम्प्रेशन उसके ट्रांसमिट होने के तरीके को बदलता है।

पढ़ने योग्य, बिना मिनिफाई किया गया HTML सोर्स वर्ज़न कंट्रोल में सुरक्षित रखो। मिनिफाई किए गए HTML की समीक्षा, तुलना और डीबगिंग कठिन होती है, खासकर तब जब कोई त्रुटि ऐसे दस्तावेज़ की लाइन और कॉलम बताती है जो अब एक लंबी लाइन बन चुका हो।

HTML मिनिफायर का इस्तेमाल कैसे करें?

सोर्स दस्तावेज़ को HTML फ़ील्ड में डालकर टूल चलाओ। संक्षिप्त सोर्स मिनिफाइड HTML में मिलेगा। इसके साथ HTML कैरेक्टर और मिनिफाइड HTML कैरेक्टर भी दिखाए जाएंगे।

1. पूरा HTML दस्तावेज़ या अपने आप में पूर्ण कोई फ़्रैगमेंट इस्तेमाल करो।
2. मिनिफिकेशन चलाओ और मिले हुए मार्कअप की जांच करो।
3. दोनों कैरेक्टर संख्याओं की तुलना करके पक्का करो कि प्रक्रिया से उपयोगी कमी आई है।
4. प्रोडक्शन फ़ाइल बदलने से पहले मिनिफाई किए गए HTML दस्तावेज़ और ब्राउज़र में उसके रेंडर हुए आउटपुट की जांच करो।

प्रोसेसिंग सर्वर पर होती है। तुम्हारा इनपुट HTTPS के ज़रिए सर्वर तक जाता है और स्टोर नहीं किया जाता। अगर तुम्हारे संगठन के नियमों के अनुसार कोड की प्रोसेसिंग पूरी तरह स्थानीय मशीन पर ही होनी चाहिए, तो गोपनीय सोर्स सबमिट न करो।

मिनिफाई किए गए आउटपुट को कैसे समझें

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

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

लौटाए गए फ़ील्ड में कोई वैलिडेशन रिपोर्ट नहीं होती, इसलिए इस टूल को HTML वैलिडेटर न समझो। यह गलत नेस्टिंग, डुप्लिकेट IDs, आवश्यक एंड टैग के गायब होने या स्पेस वाले बिना उद्धरण चिह्न के एट्रिब्यूट मान की ओर ध्यान दिलाए बिना संक्षिप्त आउटपुट दे सकता है। आखिर में लगा कॉमा HTML सिंटैक्स की त्रुटि नहीं है, लेकिन एम्बेड किए गए JSON या JavaScript के भीतर ऐसा कॉमा उस सामग्री को विफल कर सकता है।

उदाहरण और मुश्किल इनपुट

सामान्य ब्लॉक एलिमेंट के आसपास मौजूद इंडेंटेशन मिनिफिकेशन का एक सीधा उदाहरण है।

इनपुट, जहां \n लाइन ब्रेक दर्शाता है <main>\n <p>Ready</p>\n</main>

संक्षिप्त रूप <main><p>Ready</p></main>

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

इनपुट <span>Account</span> <span>settings</span>

असुरक्षित संक्षिप्त रूप <span>Account</span><span>settings</span>

दूसरा रूप "Accountsettings" के तौर पर रेंडर हो सकता है। यह मानने के बजाय कि टैग के बीच की हर जगह हटाई जा सकती है, इनलाइन सामग्री हमेशा जांचो।

• <pre>, <textarea> और इसी तरह की व्हाइटस्पेस-संवेदी सामग्री के भीतर स्पेस और लाइन ब्रेक का अर्थ हो सकता है।
• टेक्स्ट या एट्रिब्यूट मानों में मौजूद संख्याएं और विराम चिह्न दस्तावेज़ की सामग्री हैं, हटाई जाने वाली फ़ॉर्मैटिंग नहीं।
• अगर दस्तावेज़ सही कैरेक्टर एन्कोडिंग इस्तेमाल करता है, तो उच्चारण चिह्न वाले और गैर-लैटिन कैरेक्टर मान्य HTML टेक्स्ट हैं।
• टेम्पलेट एक्सप्रेशन, सर्वर-साइड डायरेक्टिव और कंडीशनल कमेंट के ऐसे नियम हो सकते हैं जिन्हें सामान्य HTML मिनिफायर नहीं समझता।
• खाली HTML इनपुट में घटाने लायक कुछ उपयोगी नहीं होता। बहुत लंबे HTML दस्तावेज़ के लिए मैन्युअल कॉपी करने के बजाय दोहराई जा सकने वाली HTML बिल्ड प्रक्रिया इस्तेमाल करो।

HTML को मिनिफाई करना कब फ़ायदेमंद है?

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

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

अमान्य या गलत संरचना वाले मार्कअप को ठीक करने के लिए HTML मिनिफिकेशन का इस्तेमाल न करो। अगर मार्कअप अलग-अलग ब्राउज़र में अलग व्यवहार करता है, तो पहले पढ़ने योग्य सोर्स को वैलिडेट और टेस्ट करो। जब कोई पेज Markdown से बनाया जाता है, तो अंतिम प्रोडक्शन मिनिफिकेशन से पहले मार्कडाउन से HTML टूल उसका मार्कअप तैयार कर सकता है।

अक्सर पूछे जाने वाले सवाल

क्या इनलाइन CSS या JavaScript वाले HTML को मिनिफाई कर सकता हूं?

इनलाइन CSS और JavaScript के अपने व्याकरण नियम होते हैं, इसलिए यह नहीं मानना चाहिए कि HTML मिनिफिकेशन उनकी सामग्री को भी ऑप्टिमाइज़ कर देगा। जहां उचित हो, उन हिस्सों के लिए CSS मिनिफायर या JS मिनिफायर इस्तेमाल करो। फिर पूरे तैयार दस्तावेज़ को टेस्ट करो, क्योंकि एम्बेड किए गए क्लोज़िंग टैग क्रम HTML पार्सिंग को प्रभावित कर सकते हैं।

क्या मिनिफाई किए गए HTML से सर्च रैंकिंग सुधरेगी?

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

क्या Twig, Blade या दूसरे HTML टेम्पलेट मिनिफाई किए जा सकते हैं?

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

कैरेक्टर की संख्या और फ़ाइल का आकार अलग क्यों हैं?

UTF-8 जैसी Unicode एन्कोडिंग में कैरेक्टर और बाइट अलग-अलग माप हैं। कई ASCII कैरेक्टर एक बाइट लेते हैं, जबकि दूसरे कैरेक्टर कई बाइट ले सकते हैं। फ़ाइलों में बाइट-ऑर्डर मार्क भी हो सकता है या ऐसे लाइन एंडिंग इस्तेमाल हो सकते हैं जो बाइट आकार को प्रभावित करते हैं।

क्या मिनिफिकेशन HTML कमेंट सुरक्षित रूप से हटा देता है?

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

अंतिम जांच

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