HTML منیفائی کریں

کمنٹس اور خالی جگہ ہٹائیں، اور صفحے کے اندر موجود CSS اور JavaScript کو چھوٹا کریں — اس اسپیسنگ کو چھیڑے بغیر جو واقعی نظر آتی ہے۔ آپ کا سورس کبھی براؤزر سے باہر نہیں جاتا۔

کبھی محفوظ نہیں کی جاتی
نہ قطار، نہ انتظار
نہ سائن اپ، نہ واٹر مارک

کمنٹس ہٹائیں خالی جگہیں کم کریں صرف وہاں جہاں یہ دکھائی نہیں دیتیںinline CSS منیفائی کریں inline JavaScript منیفائی کریں attributes کے quotes ہٹائیں درست ہے، لیکن کچھ ٹیمپلیٹ انجن اس سے خراب ہو جاتے ہیں

آپ کا HTML

منیفائیڈ

منیفائیڈ HTML یہاں نظر آئے گا۔

یہ کیسے کام کرتا ہے

اپنا HTML پیسٹ کریں

یا فائل ڈراپ کریں۔ کچھ بھی محفوظ نہیں کیا جاتا — سورس کوڈ کے لیے یہ بات زیادہ تر چیزوں سے زیادہ اہم ہے۔

طے کریں کہ کتنا کم کرنا ہے

کمنٹس، خالی جگہ، inline CSS اور inline JavaScript — ہر ایک کا الگ سوئچ ہے۔

کاپی یا ڈاؤن لوڈ کریں

آپ کو پہلے اور بعد کا سائز دکھایا جاتا ہے کہ فائل کتنی چھوٹی ہوئی۔

وہ خالی جگہ جو اہم ہے، اور وہ جو اہم نہیں

HTML میں دو inline عناصر کے درمیان اسپیس ایک حقیقی اسپیس ہے، اور یہی بات ایک محتاط منیفائر کو صفحات خراب کرنے والے منیفائر سے الگ کرتی ہے۔ دو لنکس کے درمیان کی نئی لائن سمیٹ دیں تو اسکرین پر الفاظ آپس میں جڑ جاتے ہیں؛ کسی pre بلاک یا textarea کے اندر کی انڈینٹیشن سمیٹ دیں تو خود مواد بدل جاتا ہے، کیونکہ وہاں خالی جگہ ہی مواد ہے۔ اس لیے خالی جگہ صرف وہیں سے ہٹائی جاتی ہے جہاں یقینی طور پر وہ نظر نہیں آتی، اور جہاں نظر آتی ہے وہاں بالکل نہیں چھیڑی جاتی۔ جو منیفائر ہر اسپیس یکساں طور پر ہٹا دے، وہ فائل تو چھوٹی کر دے گا مگر صفحہ واضح طور پر غلط دکھائے گا۔

کمنٹس ہٹا دیے جاتے ہیں، کیونکہ وہ سورس سنبھالنے والے کے لیے ہوتے ہیں، پڑھنے والے کے لیے نہیں — سوائے conditional comments کے، جو نوٹس نہیں بلکہ ہدایات ہیں۔ غیر ضروری attributes ہٹا دیے جاتے ہیں: script عنصر پر type="text/javascript" ایک دہائی سے ڈیفالٹ ہے، اور فارم پر method="get" وہی بتاتا ہے جو فارم ویسے بھی کرتا ہے۔

attributes کے quotes ہٹانا درست HTML ہے اور جان بوجھ کر پہلے سے بند ہے۔ اسپیسیفکیشن بغیر quotes کے attribute ویلیو کی اجازت دیتی ہے بشرطیکہ اس میں اسپیس یا الجھن والے حروف نہ ہوں، اور براؤزرز اسے بالکل ٹھیک سنبھالتے ہیں۔ ٹیمپلیٹ انجن اکثر نہیں سنبھالتے: بغیر quotes والے attribute کے اندر Blade، Twig، Handlebars یا JSX کا expression ٹھیک سے پارس نہیں ہوتا، اور خرابی build کے وقت ایسی فائل میں سامنے آتی ہے جسے کوئی پڑھنا نہیں چاہتا۔ بچت تھوڑی ہے اور خطرہ تھوڑا نہیں، اس لیے یہ صرف آپ کے آن کرنے پر چلتا ہے۔

اس سے ہونے والے فائدے کا دیانت دار پیمانہ کمپریشن کے بعد ہے، پہلے نہیں۔ سرورز HTML کو gzip یا brotli سے کمپریس کر کے بھیجتے ہیں، اور یہ الگورتھم دہرائی گئی خالی جگہ کو بہت اچھی طرح سنبھالتے ہیں — اس لیے جو دستاویز minify ہو کر 100 KB سے 70 KB رہ جائے، وہ نیٹ ورک پر شاید صرف 12 KB سے 11 KB ہو۔ HTML کو minify کرنا فائدہ مند ہے، مگر تینوں میں سب سے کم؛ اصل وزن اسٹائل شیٹ اور اسکرپٹ میں ہوتا ہے۔

جب آپ کو کچھ اور چاہیے

اگر پوری سائٹ کی بات ہو، ایک فائل کی نہیں، تو یہ کام براؤزر ٹیب میں نہیں بلکہ build میں ہونا چاہیے۔ ہر موجودہ فریم ورک اور static site generator build کے وقت HTML کو minify کرتا ہے، اور ہاتھ سے کرنے کا مطلب ہے کہ جس دن کوئی بھول گیا، یہ ہونا بند ہو جائے گا۔ ان کے پیچھے موجود لائبریریاں ایک ایک transform تک کنفیگر ہو سکتی ہیں، جو اس وقت کام آتا ہے جب کوئی ایک خاص اصول مسئلہ پیدا کر رہا ہو۔

مارک اپ کو آپٹیمائز کرنے سے پہلے دیکھیں کہ صفحے کا اصل وزن کتنا ہے۔ تقریباً ہر حقیقی سائٹ میں تصاویر، فونٹس اور JavaScript کے مقابلے میں HTML نہ ہونے کے برابر ہوتا ہے — Lighthouse یا براؤزر کا اپنا network پینل سیکنڈوں میں بتا دے گا، اور جواب عموماً یہی ہوتا ہے کہ ایک غیر آپٹیمائزڈ hero تصویر صفحے کے سارے مارک اپ سے زیادہ بھاری ہے۔

اکثر پوچھے جانے والے سوالات

کیا میرا کوڈ کہیں محفوظ کیا جاتا ہے؟

نہیں، اور سورس کوڈ کے لیے یہی تو اصل بات ہے۔ کچھ بھی محفوظ نہیں کیا جاتا اور کوئی سرور اسے کبھی نہیں دیکھتا۔ اپنا ملکیتی سورس کسی ایسے آن لائن منیفائر میں پیسٹ کرنا جو اسے کہیں بھیج دے، اسے ظاہر کر دینا ہے، سائٹ ڈیٹا رکھنے کے بارے میں جو بھی کہے — اور یہ بالکل وہ کام ہے جو جلدی میں بغیر سوچے کر لیا جاتا ہے۔

کیا minify کرنے سے صفحہ دیکھنے میں خراب ہو جائے گا؟

یہاں جس طرح سیٹ کیا گیا ہے، اس طرح نہیں۔ خالی جگہ صرف وہیں سمیٹی جاتی ہے جہاں وہ نظر نہیں آتی: div اور list items جیسے block عناصر کے درمیان۔ INLINE عناصر کے درمیان کی اسپیس رکھی جاتی ہے، کیونکہ اسے ہٹانے سے دو الفاظ واضح طور پر جڑ جاتے ہیں — "</span> <span>" اسکرین پر ایک حقیقی اسپیس ہے اور "</span><span>" نہیں۔ <pre> اور <textarea> کا مواد بائٹ بہ بائٹ جوں کا توں رہتا ہے۔ اور اختیاری closing tags ہٹانا جان بوجھ کر بند رکھا گیا ہے: یہ درست HTML ہے، مگر بہت سے ٹیمپلیٹ انجن اور ای میل کلائنٹس نتیجے کو غلط پارس کرتے ہیں۔

یہ اصل میں کیا ہٹاتا ہے؟

کمنٹس، وہ خالی جگہ جو کبھی نظر ہی نہیں آئی، اور <style> اور <script> بلاکس کے اندر کی فالتو جگہ۔ آپ کے مارک اپ کا ڈھانچہ، attributes اور ٹیکسٹ نہیں چھیڑے جاتے — ٹول کی جانچ اس طرح کی جاتی ہے کہ صفحے کو پہلے اور بعد میں پارس کر کے تصدیق کی جائے کہ عناصر کی تعداد، list items اور نظر آنے والا ٹیکسٹ بالکل ایک جیسے ہیں۔

کیا مجھے attributes کے quotes ہٹانے چاہییں؟

صرف اس صورت میں جب آؤٹ پٹ سیدھا براؤزر میں جا رہا ہو۔ یہ درست HTML ہے اور تھوڑی بچت کرتا ہے، لیکن بغیر quotes کے attributes سے کچھ ٹیمپلیٹ انجن، کچھ ای میل کلائنٹس اور زیادہ تر سادہ پارسرز خراب ہو جاتے ہیں۔ یہ پہلے سے بند ہے اور جب آپ اسے آن کرتے ہیں تو صفحہ آپ کو خبردار کرتا ہے۔

کیا یہ صفحے کے اندر موجود CSS اور JavaScript کو بھی minify کرتا ہے؟

ہاں، دونوں کو، اسی طرح جیسے ہمارے CSS اور JavaScript منیفائر کرتے ہیں۔ ایک استثنا: اگر آپ کی inline CSS میں native nesting یا جدید media queries ہیں تو اس بار CSS والا مرحلہ بند کر دیا جاتا ہے — CSS منیفائر ان فیچرز سے پرانا ہے اور خاموشی سے rules حذف کر دیتا۔ HTML پھر بھی minify ہوتا ہے، اور صفحہ آپ کو بتا دیتا ہے کہ ایسا ہوا، بجائے اس کے کہ آپ کو ایسا صفحہ واپس دے جس کے اسٹائلز غائب ہوں۔

یہ کتنا چھوٹا ہو جائے گا؟

انڈینٹیشن اور کمنٹس والے ہاتھ سے لکھے HTML کے لیے عموماً 10–30%۔ پھر آپ کے سرور پر gzip باقی کا زیادہ تر کام کر دیتا ہے — پہلے minify کرنا پھر بھی فائدہ دیتا ہے کیونکہ دونوں کا اثر جمع ہوتا ہے، مگر یہ توقع نہ رکھیں کہ صرف minify کرنے سے فائل آدھی ہو جائے گی۔

کیا میں پوری سائٹ ایک ساتھ minify کر سکتا ہوں؟

یہاں ایک وقت میں ایک صفحہ۔ بہت سے صفحات والی سائٹ کے لیے minify کرنا اپنے build یا deploy مرحلے کا حصہ بنائیں تاکہ ہر ریلیز پر ہر صفحہ ایک ہی طرح سے ہو — اور version control میں پڑھنے کے قابل سورس رکھیں، minify شدہ آؤٹ پٹ کبھی نہیں۔

جاننا مفید ہے: خالی جگہ صرف وہیں سمیٹی جاتی ہے جہاں وہ اسکرین پر نظر نہیں آتی، اس لیے pre اور textarea کے اندر کا ٹیکسٹ بالکل نہیں چھیڑا جاتا اور inline عناصر کے درمیان اسپیس برقرار رہتی ہے۔ attributes کے quotes ہٹانا درست HTML ہے لیکن کچھ ٹیمپلیٹ انجن اس سے خراب ہو جاتے ہیں، اسی لیے یہ آپشن پہلے سے بند ہے۔

یہ ٹول اپنی ویب سائٹ پر لگائیں

کسی بھی بلاگ، کلاس پیج یا ہیلپ آرٹیکل کے لیے مفت۔ ایک اسنیپٹ پیسٹ کریں اور آپ کے وزیٹرز اسے سیدھا آپ کے صفحے پر استعمال کر سکیں گے۔