فشرده‌سازی HTML _

نحوه عملکرد فشرده‌سازی HTML

فشرده‌ساز ورودی شما را با یک state machine کوچک پیمایش می‌کند که بین مناطق حفظ-همان‌طور-که-هست (<pre>، <textarea>، <script>، <style>) و مناطق قابل ویرایش که فشرده‌سازی فضاهای خالی و کامنت‌ها در آن‌ها ایمن است تمایز قائل می‌شود.

1. توکن‌سازی بلوک‌های حفاظتی. اسکنر ورودی را کاراکتر به کاراکتر می‌خواند و وقتی به یک تگ باز <pre>، <textarea>، <script> یا <style> برخورد می‌کند به حالت حفاظتی می‌رود. همه چیز داخل آن تگ‌ها بایت به بایت تا بستن تطابق حفظ می‌شود.
2. فشرده‌سازی فضاهای خالی قابل ویرایش. در مناطق قابل ویرایش اسکنر هر دنباله از فاصله‌ها، tabها و خطوط جدید را به یک فاصله واحد فشرده می‌کند، سپس فضای خالی ابتدایی و انتهایی اطراف مرزهای تگ را می‌زداید. متن قابل مشاهده دقیقاً مانند آنچه مرورگر رندر می‌کند بازآرایی می‌شود.
3. حذف کامنت‌ها. بلوک‌های <!-- ... --> هنگامی که گزینه فعال است حذف می‌شوند. کامنت‌های شرطی IE (<!--[if IE]> ... <![endif]-->) هنگامی که گزینه حفظ-شرطی فعال است باقی می‌مانند، زیرا کلاینت‌های ایمیل قدیمی هنوز به آن‌ها وابسته هستند.
4. خلاصه‌سازی attribute های بولی. فرم‌های verbose مثل checked="checked"، disabled="disabled" و required="required" به نام attribute تنها خلاصه می‌شوند. مشخصات HTML5 فرم تنها را از نظر معنایی یکسان می‌داند، بنابراین DOM رندرشده بدون تغییر باقی می‌ماند.
5. گزارش تفاوت بایت. هر دو متن اصلی و فشرده‌شده با new TextEncoder().encode(...).byteLength اندازه‌گیری می‌شوند — همان شمارش بایت UTF-8 که یک CDN یا سرور HTTP روی شبکه می‌بیند. نوار متریک اندازه اصلی، اندازه فشرده‌شده، بایت‌های صرفه‌جویی‌شده و درصد صرفه‌جویی را نشان می‌دهد.

چرا HTML را فشرده کنیم

• بارگذاری سریع‌تر صفحه. HTML کوچک‌تر زودتر به مرورگر می‌رسد و پارسر زودتر تمام می‌کند. در شبکه‌های موبایل صرفه‌جویی در بایت مستقیماً به First Contentful Paint سریع‌تر و نمره عملکرد Lighthouse بهتر ترجمه می‌شود.
• کاهش هزینه‌های egress CDN. CloudFront، Cloudflare و Fastly به ازای هر گیگابایت egress هزینه می‌گیرند. کاهش ۲۰ درصدی HTML در میلیون‌ها بازدید ماهانه قبل از اینکه هر بهینه‌سازی تصویر یا اسکریپت انجام شود به صرفه‌جویی‌های واقعی در فاکتور تبدیل می‌شود.
• diffهای pull-request تمیزتر. HTML استاتیک از پیش‌ساخته‌شده که در یک مخزن commit می‌شود هنگامی که هر تغییر قالب تورفتگی را بازآرایی می‌کند پر سروصدا می‌شود. HTML فشرده‌شده در پوشه dist diffهای PR تنگ‌تری تولید می‌کند که بر تغییرات محتوای واقعی به جای تغییرات فضای خالی تمرکز دارد.
• embedهای کوچک‌تر و قطعه‌های کد. قالب‌های ایمیل، قطعه‌های widget شخص ثالث و HTML ذخیره‌شده در داخل تنظیمات JSON یا YAML همگی از همان کاهش بایت بهره‌مند می‌شوند. embedهای فشرده‌شده ایمیل‌های تراکنشی را زیر محدودیت‌های اندازه ESP نگه می‌دارند و بسته‌های widget را کوچک می‌کنند.

کاربردهای رایج

فشرده‌سازی HTML در انتهای تقریباً هر pipeline ساخت سایت استاتیک یا JAMstack، به‌علاوه چند زمینه runtime که بایت‌ها بیشتر از خوانایی سورس اهمیت دارند ظاهر می‌شود.

• مراحل ساخت سایت استاتیک: Eleventy، Hugo، Astro و build‌های پروداکشن Next.js قبل از نوشتن در پوشه dist، HTML را از طریق فشرده‌ساز عبور می‌دهند تا بسته deploy شده کوچک‌تر از سورس باشد.
• ایمیل‌های تراکنشی: ESPهای (SendGrid، Postmark، Mailgun) اندازه بدنه HTML را محدود می‌کنند و گسترش CSS inline سریعاً این حساب را افزایش می‌دهد. فشرده‌سازی بدنه قبل از ارسال پیام را زیر محدودیت نگه می‌دارد.
• widgetهای جاسازی‌شده: widgetهای شخص ثالث و قطعه‌های کد چت که به‌صورت HTML inline ارسال می‌شوند از هر کاهش بایتی بهره‌مند می‌شوند زیرا صفحه میزبان باید آن‌ها را در هر بازدید دانلود کند.

یک مثال عملی

یک قطعه فرم verbose ۵۰۰ بایتی با تورفتگی دو فاصله، سه شکست خط بین ردیف‌ها، یک بلوک کامنت HTML در بالا و یک <input type="checkbox" checked="checked" /> الصاق کنید. با فعال بودن همه گزینه‌ها، خروجی به حدود ۳۰۰ بایت می‌رسد — تقریباً صرفه‌جویی ۴۰ درصدی — در حالی که DOM tree رندرشده کاملاً یکسان با سورس باقی می‌ماند.

آیا فشرده‌سازی HTML من را خراب می‌کند؟

نه، با گزینه‌های پیش‌فرض. فشرده‌ساز محتوای تگ‌های <pre>، <textarea>، <script> و <style> را عیناً حفظ می‌کند، کامنت‌های شرطی IE را هنگامی که آن گزینه فعال است سالم نگه می‌دارد، و فقط فضای خالی‌ای را فشرده می‌کند که پارسر HTML5 از پیش آن را بی‌اهمیت طبقه‌بندی کرده است. DOM tree رندرشده با سورس یکسان است. گزینه‌های تهاجمی (حذف-attribute-های-خالی) می‌توانند رفتار قطعه‌هایی را که عمداً از value="" یا alt="" استفاده می‌کنند تغییر دهند، پس اگر آن‌ها را فعال کردید خروجی را بررسی کنید.

آیا این CSS و JS inline را فشرده می‌کند؟

نه در این ابزار. بدنه‌های <style> و <script> inline عیناً حفظ می‌شوند تا فشرده‌ساز هرگز یک قانون CSS یا یک دستور JS را با فشرده‌سازی فضای خالی داخل یک رشته متنی یا regex خراب نکند. برای فشرده‌سازی خاص CSS از CSS Minifier استفاده کنید؛ برای JS از JS Minifier. HTML Minifier تمرکز بر خود markup دارد.

چقدر می‌توانم صرفه‌جویی کنم؟

صرفه‌جویی معمول در HTML دست‌نوشته ۱۰ تا ۳۰ درصد است، بسته به اینکه سورس چقدر از تورفتگی، خطوط خالی و فرم‌های verbose attribute استفاده می‌کند. HTML استاتیک از پیش‌ساخته‌شده از فریم‌ورک‌هایی مثل Next.js اغلب ۱۵ تا ۲۵ درصد صرفه‌جویی می‌کند زیرا فریم‌ورک از قبل برخی بهینه‌سازی‌ها را انجام داده اما فضای خالی قابل خواندن توسط انسان را برجا گذاشته است. قالب‌های با کامنت‌های فراوان و HTML به سبک ایمیل با تودرتویی عمیق می‌توانند به ۴۰ درصد یا بیشتر برسند.

آیا محتوای pre حفظ می‌شود؟

بله. فشرده‌ساز صریحاً بلوک‌های <pre>، <textarea>، <script> و <style> را به‌عنوان مناطق حفظ-همان‌طور-که-هست توکن‌سازی می‌کند و محتوای آن‌ها را بایت به بایت به خروجی کپی می‌کند. فضاهای خالی، شکست خط‌ها و تورفتگی داخل آن تگ‌ها دست‌نخورده باقی می‌مانند، بنابراین نمونه‌های کد و ASCII art دقیقاً پس از فشرده‌سازی یکسان رندر می‌شوند.

فشرده‌سازی HTML سمت مرورگر pipeline ساخت شما را ساده و markup شما را کوچک نگه می‌دارد. هر HTML را در بالا الصاق کنید، گزینه‌ها را تنظیم کنید و خروجی فشرده‌شده را کپی یا دانلود کنید — بدون آپلود، بدون حساب کاربری، بدون کتابخانه vendor.