فشرده‌ساز HTML
HTML را جای‌گذاری کنید تا کامنت‌ها و فاصلههای اضافی حذف و CSS و JavaScript درونخطی فشرده شوند. محتوای داخل <pre> و <textarea> دقیقاً همان‌طور که نوشته شده باقی میماند.
اجرا در مرورگر شمابدون ثبت‌نامبدون آپلود
نحوهٔ استفاده از فشرده‌ساز HTML
- یک سند یا قطعهٔ HTML را جای‌گذاری کنید یا یک فایل
.htmlباز کنید. - انتخاب کنید چه چیزی حذف شود: کامنت‌ها، فاصله‌ها، و اینکه بلوک‌های درونخطی
<style>و<script>هم فشرده شوند یا نه. - خط هشدارها را بررسی کنید: یک اسکریپت درونخطی با خطای نحوی بدون تغییر باقی میماند تا صفحهٔ شما خراب نشود.
- HTML فشرده‌شده را کپی یا دانلود کنید.
چه چیزهایی حذف میشوند؟
- کامنت‌ها:
<!-- … -->حذف میشود، به‌جز کامنت‌های شرطی Internet Explorer و کامنت‌هایی که با<!--!شروع میشوند. - فاصله بین عناصر بلوکی: خط‌های جدید و تورفتگی بین تگ‌هایی مانند
<div>،<li>یا<head>هرگز رندر نمی‌شوند، بنابراین کاملاً حذف میشوند. - فاصلههای پشت‌سرهم در متن: به یک فاصله تبدیل میشوند، دقیقاً همان‌طور که مرورگر در هر حال آن‌ها را رندر میکند.
- فاصله داخل تگ‌ها:
<p class = "a">به<p class="a">تبدیل میشود.
چه چیزهایی حفظ میشوند؟
فاصله در برخی جاها معنادار است و فشرده‌ساز به آن احترام می‌گذارد. محتوای <pre> و <textarea> بایت به بایت حفظ میشود. یک فاصلهٔ تکی بین عناصر درونخطی، مانند <b>bold</b> text، حفظ میشود چون حذف آن کلمات را به هم می‌چسباند. مقادیر attributeها و نقل‌قول‌ها هرگز تغییر نمی‌کنند.
CSS و JavaScript درونخطی
بلوک‌های درونخطی <style> با CSSO و بلوک‌های درونخطی <script> با Terser بهینه میشوند؛ همان موتورهایی که در صفحه‌های فشرده‌ساز CSS و فشرده‌ساز JavaScript استفاده میشوند. بلوک‌های JSON-LD و سایر اسکریپت‌های JSON فشرده میشوند و اسکریپت‌هایی با نوع ناشناخته (مثلاً قالب‌ها) دستنخورده می‌مانند.
آیا فشردهسازی HTML ارزشش را دارد؟
برای صفحه‌های رندرشده در سرور و سایت‌های ایستا، سند HTML اولین چیزی است که مرورگر دانلود میکند، بنابراین هر بایت صرفه‌جویی‌شده زمان اولین رندر را کوتاه‌تر میکند. صرفه‌جویی 10 تا 25٪ پیش از فشردهسازی رایج است و برای قالب‌های با تورفتگی زیاد و صفحه‌هایی با اسکریپت‌های درونخطی بزرگ بیشتر هم میشود.
پرسش‌های متداول
آیا فشردهسازی HTML ظاهر صفحهٔ من را تغییر میدهد؟
<pre>/<textarea> دستنخورده میماند. اگر در CSS عناصر را با white-space: pre استایل میدهید، حذف فاصلههای اضافی را خاموش کنید.