HTML Minifier
प्रोडक्शन के लिए HTML को तुरंत छोटा करें
मूल HTML
विकल्प
Minified HTML
अवलोकन
HTML Minifier टिप्पणियों को हटाता है, टैग के बीच व्हाइटस्पेस को संक्षिप्त करता है, वैकल्पिक संरचनात्मक रैपर टैग हटाता है, और उत्पादन के लिए आपके मार्कअप को छोटा करने के लिए इनलाइन CSS/JS को मिनिफाई करता है — छोटे डाउनलोड, तेज़ पार्सिंग। पठनीय HTML पेस्ट करें और तुरंत कॉम्पैक्ट आउटपुट प्राप्त करें, लाइव पहले/बाद आकार तुलना के साथ।
यह Minifier क्या नियंत्रित करता है
- •व्हाइटस्पेस संक्षेपण: कई स्पेस और लाइन ब्रेक को एक स्पेस में घटाया जाता है, और टैग के बीच व्हाइटस्पेस पूरी तरह हटाया जाता है
- •टिप्पणी हटाना: मार्कअप से HTML टिप्पणियां (<!-- -->) हटाएं
- •संरचनात्मक रैपर टैग हटाना: <html>, <head>, और <body> टैग हटाएं, जिन्हें ब्राउज़र स्वचालित रूप से मान लेते हैं
- •इनलाइन CSS मिनिफिकेशन: <style> ब्लॉक के अंदर टिप्पणियां हटाएं और व्हाइटस्पेस संक्षिप्त करें
- •इनलाइन JS मिनिफिकेशन: <script> ब्लॉक के अंदर // और /* */ टिप्पणियां हटाएं और व्हाइटस्पेस संक्षिप्त करें
- •आकार तुलना: मूल आकार, मिनिफाइड आकार, और प्रतिशत कमी को साथ-साथ देखें
आप HTML को कब Minify करेंगे
- •पेलोड आकार कम करने और लोड समय में सुधार के लिए प्रोडक्शन में डिप्लॉय करने से पहले एक स्टैटिक पेज को छोटा करना
- •एक ईमेल टेम्पलेट या लैंडिंग पेज को मिनिफाई करना जहां HTML का हर बाइट मायने रखता है
- •सर्व करने से पहले स्टैटिक साइट जेनरेटर या सर्वर-रेंडर्ड फ्रेमवर्क के प्रोडक्शन आउटपुट को साफ़ करना
- •JS टेम्पलेट लिटरल या CMS कंटेंट फ़ील्ड में इनलाइन एम्बेड करने के लिए कॉम्पैक्ट HTML तैयार करना
- •प्रदर्शन ऑडिट के लिए किसी पेज की पेलोड बचत जांचने हेतु पहले/बाद बाइट काउंट की तुलना करना
HTML को कैसे Minify करें
- 1.अपना HTML इनपुट एडिटर में पेस्ट करें, या .html/.htm फ़ाइल अपलोड करें
- 2.कौन से मिनिफिकेशन विकल्प लागू करने हैं चुनें: टिप्पणियां, व्हाइटस्पेस संक्षेपण, रैपर टैग, इनलाइन CSS/JS
- 3.मिनिफाइड आउटपुट और आकार-कमी प्रतिशत स्वचालित रूप से दिखाई देते हैं
- 4.आउटपुट कॉपी करें या इसे .html फ़ाइल के रूप में डाउनलोड करें
- 5.डिप्लॉय करने से पहले आकार बचत की पुष्टि के लिए पहले/बाद बाइट काउंट जांचें
जानने योग्य किनारे के मामले
- •<html>, <head>, और <body> टैग हटाना अधिकांश ब्राउज़रों में सुरक्षित है क्योंकि वे स्वचालित रूप से मान लिए जाते हैं, लेकिन इन्हें तभी हटाएं जब आप पूरी डिलीवरी पाइपलाइन को नियंत्रित करते हों — कुछ सख्त पार्सर या सर्वर-साइड प्रोसेसिंग चरण इनकी उपस्थिति की अपेक्षा कर सकते हैं
- •इनलाइन एलिमेंट्स के बीच व्हाइटस्पेस (जैसे दो आसन्न <span> टैग) को संक्षिप्त करने से रेंडर की गई स्पेसिंग बदल सकती है, क्योंकि इनलाइन एलिमेंट्स के बीच स्पेस दृष्टिगत रूप से महत्वपूर्ण होता है — यदि आपका लेआउट उस व्हाइटस्पेस पर निर्भर करता है तो रेंडर किए गए आउटपुट की जांच करें
- •इनलाइन CSS/JS मिनिफिकेशन regex-आधारित टेक्स्ट मिनिफिकेशन है, पूर्ण पार्सर नहीं — यह CSS/JS सिंटैक्स त्रुटियां नहीं पकड़ेगा और वेरिएबल का नाम नहीं बदलेगा या सेलेक्टर छोटे नहीं करेगा
सीमाएँ
- •यह व्हाइटस्पेस/टिप्पणी/रैपर-टैग मिनिफिकेशन है, पूर्ण HTML कम्प्रेशन नहीं — इसमें कोई एट्रिब्यूट-वैल्यू शॉर्टनिंग, रिडंडेंट-एट्रिब्यूट हटाना, या इमेज/एसेट ऑप्टिमाइज़ेशन नहीं है
- •इनलाइन CSS/JS मिनिफिकेशन जानबूझकर रूढ़िवादी है — अधिकतम कम्प्रेशन (सेलेक्टर शॉर्टनिंग, डेड-कोड एलिमिनेशन, मिनिफाइड वेरिएबल नाम) के लिए, अपनी CSS/JS सोर्स फ़ाइलों पर सीधे cssnano या Terser जैसे समर्पित टूल का उपयोग करें
- •बहुत बड़ी HTML फ़ाइलें ब्राउज़र में पूरी तरह मिनिफाई करने में धीमी हो सकती हैं — प्रोडक्शन बिल्ड पाइपलाइनों के लिए, एकबारगी ब्राउज़र टूल के बजाय अपने बिल्ड टूल (जैसे html-minifier-terser) में HTML मिनिफिकेशन को एकीकृत करें
दूसरी दिशा में जाना है?
यदि आपके पास मिनिफाइड या खराब इंडेंटेशन वाला HTML है और डिबगिंग या रिव्यू के लिए इसे पठनीय बनाने की आवश्यकता है, तो इसके बजाय HTML Beautifier का उपयोग करें। यह टैग नेस्टिंग के आधार पर उचित इंडेंटेशन के साथ मार्कअप को पुनः प्रारूपित करता है और आपके टाइप करते समय टैग संरचना को सत्यापित करता है।