درباره این ابزار
کوچکسازی HTML کاراکترهای غیرضروری را از منبع یک صفحه وب حذف میکند - فضای خالی بین برچسبها، نظرات، نقل قولهای اضافی، تگهای بسته اختیاری - برای کاهش اندازه فایل بدون تغییر نحوه ارائه صفحه. صرفه جویی در هر صفحه متوسط است (معمولاً 10 تا 30٪)، اما در بسیاری از درخواست ها، به ویژه برای سایت های استاتیک یا صفحاتی که بدون فشرده سازی پویا ارائه می شوند، ترکیب می شود.
این مینیفایر فضای خالی بین عناصر سطح بلوک را حذف میکند، فضای خالی را در متن غیر مهم جمع میکند، نظرات HTML را حذف میکند (به جز نظرات شرطی IE)، نقلقولهای ویژگی اضافی را در جایی که مشخصات HTML5 مجاز است حذف میکند، و تگهای بسته اختیاری (</p>، </li>) را در جایی که مشخصات مجاز است حذف میکند. نتیجه در هر مرورگر به صورت یکسان با منبع ارائه می شود.
کوچک سازی زمانی که با فشرده سازی gzip یا Brotli در سطح سرور جفت شود بسیار مفید است. فشردهسازی در حال حاضر بسیاری از صرفهجوییهای کوچکسازی را حذف میکند، اما این دو با هم به تنهایی فشردهسازی را شکست میدهند - بهویژه برای سایتهای پرترافیک که هزینههای پهنای باند مهم است.
چرا کوچک کردن HTML
HTML کوچکتر سریعتر بارگیری می شود، به خصوص در اتصالات کندتر و شبکه های تلفن همراه. وزن صفحه مستقیماً روی Core Web Vitals تأثیر میگذارد - بزرگترین رنگ محتوایی و زمان تا اولین بایت هر دو زمانی بهبود مییابند که سرور HTML کمتری را برای تجزیه برگرداند. برای سایت هایی که رتبه بندی سئو به امتیازات Core Web Vitals بستگی دارد، کوچک سازی یک پیشرفت قابل اندازه گیری است.
HTML کوچک همچنین هزینه های پهنای باند را در مقیاس کاهش می دهد. سایتی که روزانه یک میلیون صفحه را با 10 کیلوبایت صرفه جویی در هر صفحه ارائه می دهد، روزانه 10 گیگابایت از خروجی را ذخیره می کند. ترکیبات تاثیر برای سایت های استاتیک از CDN هایی که با انتقال داده صورتحساب می گیرند ارائه می شود.
جزئیات فنی
Minifier توکن به توکن HTML را پردازش می کند. فضای خالی بین عناصر سطح بلوک (<div>، <p>، <ul>) حذف می شود زیرا بر رندر تأثیر نمی گذارد. فضای خالی در زمینه های درون خطی (<span>، <a>، محتوای متن) حفظ می شود زیرا می تواند بر رندر تأثیر بگذارد.
نظرات به طور پیش فرض حذف می شوند اما نظرات شرطی (<!--[if IE]>) حفظ می شوند. نقل قول های مشخصه در جایی که تجزیه کننده HTML5 اجازه می دهد حذف می شوند - مقادیر ویژگی تک کلمه ای بدون فاصله یا کاراکترهای خاص می توانند نقل قول ها را حذف کنند.
برچسبهای بسته اختیاری با توجه به مشخصات HTML5 حذف میشوند: </p>، </li>، </td>، و چند مورد دیگر را میتوان حذف کرد، زمانی که برادر یا برادری که به معنای بسته شدن آنها است، دنبال میشوند. خواندن این غیرعادی است اما HTML5 معتبر است که مرورگرها به طور یکسان آن را تجزیه می کنند.
سوالات متداول
- کوچک سازی HTML چه چیزی را حذف می کند؟
- فضای خالی غیرضروری بین برچسبها، نظرات HTML (<!-- -->)، برچسبهای بسته اختیاری (</li>، </p>، </td>)، مقادیر مشخصه پیشفرض (type="text" در ورودیها) و مقادیر مشخصه بولی (disabled="disabled" → disabled).
- آیا کوچک سازی می تواند صفحه من را بشکند؟
- به ندرت، اما اگر CSS شما به فضای خالی بین عناصر درون خطی متکی باشد یا اگر جاوا اسکریپت از مقایسه های innerHTML استفاده می کند، امکان پذیر است. همیشه خروجی کوچک شده را تست کنید. این ابزار به طور پیش فرض از تنظیمات محافظه کارانه استفاده می کند.
- اگر از چارچوبی مانند Next.js استفاده کنم، باید HTML را کوچک کنم؟
- اکثر چارچوبهای مدرن (Next.js، Nuxt، Angular) HTML را بهطور خودکار در ساختهای تولیدی کوچک میکنند. این ابزار برای فایل های HTML ایستا، قالب های ایمیل و پروژه های بدون سیستم ساخت مفید است.
- آیا این CSS درون خطی و جاوا اسکریپت را نیز کوچک می کند؟
- این ابزار بر ساختار HTML تمرکز دارد. محتوای درون خطی <style> و <script> همانطور که هست حفظ می شوند. برای آنها، از مینیفایرهای اختصاصی CSS و JavaScript برای نتایج بهینه استفاده کنید.
- آیا حذف برچسب های بسته اختیاری بی خطر است؟
- بر اساس مشخصات HTML5 بله، اگرچه خواندن نتیجه دشوارتر است. برخی از تیمها برای وضوح این تغییر را غیرفعال میکنند و جریمهای جزئی را میپذیرند.
- آیا HTML من روی سرور آپلود می شود؟
- خیر. Minifier در مرورگر شما اجرا می شود.
- این چگونه با html-minifier-terser مقایسه می شود؟
- html-minifier-terser مینیفایر معمولی Node.js HTML است و نتایج کمی تهاجمیتر تولید میکند. این ابزار همان تغییرات را برای استفاده در سمت مرورگر بدون تنظیم ساخت پوشش می دهد.
- آیا باید همیشه کوچک کنم یا انتخابی؟
- همیشه برای تولید هرگز برای کد منبع در کنترل نسخه. HTML قابل خواندن در منبع برای نگهداری ضروری است.