فشرده‌سازی HTML چیست؟

فشرده‌سازی HTML فرآیندی است که طی آن حجم یک سند HTML کاهش می‌یابد بدون آنکه نحوه رندر آن در مرورگر تغییر کند. یک فشرده‌ساز HTML کاراکترهایی را که تنها برای خوانایی توسعه‌دهنده وجود دارند حذف می‌کند: فضای خالی بین تگ‌ها، کامنت‌ها، تگ‌های بسته شدن اختیاری و مقادیر تکراری attribute. خروجی از نظر عملکردی با سورس یکسان است اما حجم کمتری دارد، یعنی دانلود سریع‌تر و زمان رندر اولیه کمتر برای کاربر.

مرورگرها HTML را به یک درخت DOM تجزیه می‌کنند و بیشتر فضاهای خالی را در این فرآیند نادیده می‌گیرند. یک دنباله از فاصله و خط جدید بین دو تگ div هیچ تأثیر بصری روی صفحه رندرشده ندارد. کامنت‌ها نیز توسط parser نادیده گرفته می‌شوند. فشرده‌سازی از این قوانین بهره می‌برد تا آنچه را که parser در هر صورت دور می‌انداخت حذف کند، به‌گونه‌ای که این داده‌ها اصلاً نیازی به انتقال از طریق شبکه نداشته باشند.

میزان صرفه‌جویی از فشرده‌سازی HTML بسته به سند متفاوت است. قالب‌های با کامنت فراوان، صفحات server-rendered با تورفتگی عمیق و خروجی CMS با استایل‌های inline معمولاً با فشرده‌سازی بین ۱۵ تا ۳۰ درصد کاهش حجم دارند. برای اسناد کوچک، صرفه‌جویی مطلق ناچیز است، اما در سایت‌های پر‌ترافیک حتی چند کیلوبایت در هر بارگذاری صفحه در میلیون‌ها درخواست به صرفه‌جویی واقعی پهنای باند منجر می‌شود.

چرا از این فشرده‌ساز HTML استفاده کنیم؟

HTML خود را paste کنید و فوری خروجی فشرده‌شده دریافت کنید. بدون نیاز به نصب ابزار، فایل پیکربندی یا ثبت‌نام.

⚡

نتایج فوری

خروجی همزمان با تایپ نمایش داده می‌شود. یک صفحه کامل یا یک قطعه کوچک paste کنید و نتیجه فشرده‌شده را بدون انتظار برای اجرای دستور CLI یا مرحله build ببینید.

🔒

پردازش محلی و خصوصی

تمام فشرده‌سازی در مرورگر شما با JavaScript اجرا می‌شود. HTML شما هرگز دستگاهتان را ترک نمی‌کند. استفاده از آن با HTML‌هایی که حاوی URL داخلی، توکن یا داده‌های مشتری هستند کاملاً امن است.

📊

گزارش حجم

حجم فایل اصلی و فشرده‌شده را بر حسب بایت در کنار هم مشاهده کنید. دقیقاً بدانید چند بایت صرفه‌جویی کردید قبل از تصمیم برای استفاده از نسخه فشرده.

📋

کپی با یک کلیک

خروجی فشرده‌شده را با یک کلیک در clipboard کپی کنید. آن را در pipeline استقرارتان paste کنید، inline در قالب ایمیل قرار دهید یا مستقیماً commit کنید.

موارد استفاده فشرده‌ساز HTML

توسعه Frontend

قالب‌های HTML را قبل از استقرار در محیط production فشرده کنید. payload صفحات server-rendered، خروجی static site generator یا shell اپلیکیشن‌های تک‌صفحه‌ای را کاهش دهید.

مهندسی Backend

کامنت‌ها و فضاهای خالی را از پاسخ‌های HTML تولیدشده توسط فریم‌ورک‌های سمت سرور مانند Django، Rails یا Laravel قبل از ارسال به کلاینت‌ها حذف کنید.

DevOps و Pipeline‌های CI

یک مرحله فشرده‌سازی HTML به pipeline build خود اضافه کنید. تأیید کنید که خروجی بعد از فشرده‌سازی به درستی رندر می‌شود قبل از push به محیط staging یا production.

تضمین کیفیت و تست

خروجی فشرده‌شده دو build را برای بررسی تغییرات ساختاری غیرمنتظره مقایسه کنید. فشرده‌سازی فضاهای خالی را نرمال می‌کند و diff‌های ساختاری را تمیزتر می‌سازد.

بهینه‌سازی قالب ایمیل

کلاینت‌های ایمیل محدودیت حجمی روی ایمیل‌های HTML اعمال می‌کنند (Gmail پیام‌های بالای ۱۰۲ کیلوبایت را clip می‌کند). قالب‌های ایمیل را فشرده کنید تا زیر این محدودیت بمانید در حالی که همه محتوا حفظ می‌شود.

یادگیری عملکرد وب

دانشجویان می‌توانند HTML paste کنند و ببینند کدام قسمت‌ها توسط فشرده‌سازی حذف می‌شوند. این نشان می‌دهد کدام کاراکترها از نظر معنایی برای مرورگرها مهم هستند و کدام‌ها صرفاً تزئینی‌اند.

فشرده‌سازی HTML چه چیزهایی را حذف می‌کند

یک فشرده‌ساز HTML کامل چندین تبدیل فراتر از حذف فضای خالی اعمال می‌کند. جدول زیر رایج‌ترین تکنیک‌ها را از امن‌ترین (همیشه بدون اتلاف) تا تهاجمی‌ترین (ممکن است در موارد خاص مشکل ایجاد کند) فهرست می‌کند.

تکنیک	قبل	بعد
Whitespace between tags	<div> <p> text </p> </div>	<div><p>text</p></div>
HTML comments	<!-- TODO: fix later -->	(removed entirely)
Redundant attribute quotes	class="main"	class=main
Boolean attribute values	disabled="disabled"	disabled
Empty attribute values	id=""	(attribute removed)
Optional closing tags	</li>, </td>, </p>	(removed when safe)
Type on script/style	type="text/javascript"	(removed — default)
Protocol in URLs	https://cdn.example.com	//cdn.example.com

فشرده‌سازی در مقابل Gzip

توسعه‌دهندگان گاهی می‌پرسند آیا فشرده‌سازی HTML هنگامی که سرور از قبل Gzip یا Brotli اعمال می‌کند هنوز ضروری است. پاسخ کوتاه: بله، و این دو بهترین عملکرد را با هم دارند.

فشرده‌سازی HTML

در سطح متن عمل می‌کند. کاراکترهایی را که parser نادیده می‌گیرد حذف می‌کند: کامنت‌ها، فضای خالی، attribute‌های اضافی. حجم فایل خام را قبل از اعمال هر نوع فشرده‌سازی کاهش می‌دهد. یک‌بار در زمان build انجام می‌شود.

فشرده‌سازی Gzip / Brotli

در سطح بایت عمل می‌کند. الگوهای تکراری بایت را پیدا می‌کند و آن‌ها را با ارجاعات کوتاه‌تر کدگذاری می‌کند. در هر پاسخ HTTP توسط وب‌سرور اعمال می‌شود. توسط مرورگر در هنگام دریافت از حالت فشرده خارج می‌شود.

فشرده‌سازی HTML ورودی پردازشی Gzip را کاهش می‌دهد، بنابراین خروجی فشرده‌شده نیز کوچک‌تر است. دستورالعمل‌های PageSpeed گوگل توصیه می‌کنند هر دو اعمال شوند. در یک صفحه معمولی، فشرده‌سازی HTML ۱۵ تا ۲۵ درصد از حجم خام را ذخیره می‌کند و Gzip نتیجه را ۶۰ تا ۸۰ درصد دیگر کاهش می‌دهد. در مجموع، حجم انتقال می‌تواند به ۱۰ تا ۲۰ درصد سند اصلی فشرده‌نشده کاهش یابد.

مثال‌های کد

در زیر مثال‌های عملی فشرده‌سازی HTML در چهار محیط آورده شده است. هر مثال کامنت‌ها را حذف کرده و فضاهای خالی را کاهش می‌دهد.

JavaScript (html-minifier-terser)

import { minify } from 'html-minifier-terser'

const html = `
  <div class="card">
    <!-- user profile -->
    <p>  Hello, world!  </p>
  </div>
`

const result = await minify(html, {
  collapseWhitespace: true,
  removeComments: true,
  removeRedundantAttributes: true,
  removeEmptyAttributes: true,
})
// → '<div class="card"><p>Hello, world!</p></div>'

Python (htmlmin)

import htmlmin

html = """
<div class="card">
  <!-- user profile -->
  <p>  Hello, world!  </p>
</div>
"""

result = htmlmin.minify(html, remove_comments=True, remove_empty_space=True)
# → '<div class="card"><p>Hello, world!</p></div>'

Go (tdewolff/minify)

package main

import (
    "fmt"
    "github.com/tdewolff/minify/v2"
    "github.com/tdewolff/minify/v2/html"
)

func main() {
    m := minify.New()
    m.AddFunc("text/html", html.Minify)

    input := `<div class="card">
  <!-- user profile -->
  <p>  Hello, world!  </p>
</div>`

    result, _ := m.String("text/html", input)
    fmt.Println(result)
    // → <div class=card><p>Hello, world!</div>
}

CLI (html-minifier-terser)

# Install globally
npm install -g html-minifier-terser

# Minify a file
html-minifier-terser --collapse-whitespace --remove-comments input.html -o output.html

# Pipe from stdin
cat index.html | html-minifier-terser --collapse-whitespace --remove-comments

# With all common optimizations
html-minifier-terser \
  --collapse-whitespace \
  --remove-comments \
  --remove-redundant-attributes \
  --remove-empty-attributes \
  --minify-css true \
  --minify-js true \
  input.html -o output.min.html

سؤالات متداول

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

فشرده‌سازی امن (حذف کامنت‌ها و کاهش فضاهای خالی) رندر مرورگر را تغییر نمی‌دهد. گزینه‌های تهاجمی‌تر مانند حذف تگ‌های بسته شدن اختیاری یا کاهش attribute‌های boolean بخشی از استاندارد HTML هستند و در همه مرورگرهای مدرن کار می‌کنند. تنها نکته‌ای که باید مراقب آن بود محتوای pre و textarea است که در آن‌ها فضای خالی معنادار است. فشرده‌سازهای خوب فضاهای خالی درون این عناصر را حفظ می‌کنند.

HTML بعد از فشرده‌سازی چقدر کوچک‌تر می‌شود؟

صرفه‌جویی معمول بین ۱۰ تا ۳۰ درصد از حجم فایل اصلی است، بسته به میزان فضای خالی و تعداد کامنت‌های موجود در سورس. قالب‌های با تورفتگی زیاد و کامنت فراوان بیشترین بهره را می‌برند. HTML از پیش فشرده با فرمت‌بندی حداقلی ممکن است تنها ۵ تا ۸ درصد کوچک‌تر شود.

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

بله. فشرده‌سازی HTML و فشرده‌سازی Gzip در سطوح مختلفی کار می‌کنند. فشرده‌سازی HTML کاراکترهای متنی اضافی را حذف می‌کند؛ Gzip الگوهای تکراری بایت را پیدا می‌کند. فشرده‌سازی HTML ابتدا به این معناست که Gzip داده کمتری برای پردازش دارد و خروجی فشرده‌شده کوچک‌تری تولید می‌کند. گوگل توصیه می‌کند هر دو اعمال شوند.

آیا فشرده‌سازی HTML که حاوی JavaScript inline است امن است؟

یک فشرده‌ساز پایه که تنها فضاهای خالی را کاهش می‌دهد محتوای درون تگ‌های script را تغییر نمی‌دهد. فشرده‌سازهایی با گزینه --minify-js همچنین JavaScript inline را با استفاده از یک فشرده‌ساز JS فشرده می‌کنند. اگر اسکریپت‌های inline شما به فضای خالی خاصی وابسته باشند (نادر)، خروجی را تست کنید. اکثر اسکریپت‌های inline بعد از فشرده‌سازی بدون مشکل کار می‌کنند.

تفاوت بین فشرده‌سازی HTML و compression چیست؟

فشرده‌سازی HTML یک تبدیل متنی در زمان build است که کاراکترهای غیرضروری را حذف می‌کند. Compression (Gzip، Brotli) یک کدگذاری باینری در زمان سرور است که پاسخ HTTP را کوچک می‌کند. فشرده‌سازی HTML برگشت‌ناپذیر است (کامنت‌ها حذف می‌شوند)، در حالی که compression توسط مرورگر هنگام دریافت معکوس می‌شود.

آیا فشرده‌سازی HTML روی SEO تأثیر می‌گذارد؟

خیر. ربات‌های موتورهای جستجو درست مانند مرورگرها DOM را تجزیه می‌کنند. آن‌ها فضاهای خالی و کامنت‌ها را نادیده می‌گیرند. فشرده‌سازی HTML ساختار DOM را تغییر نمی‌دهد، بنابراین هیچ تأثیری بر نحوه ایندکس صفحه شما توسط موتورهای جستجو ندارد. زمان‌های بارگذاری سریع‌تر ناشی از HTML کوچک‌تر ممکن است از طریق سیگنال‌های Core Web Vitals به‌طور غیرمستقیم رتبه‌بندی را بهبود بخشد.

فشرده‌سازی HTML در مقایسه با فشرده‌سازی CSS یا JavaScript چگونه است؟

فشرده‌سازهای CSS و JavaScript نام متغیرها را تغییر می‌دهند، کد مرده را حذف می‌کنند و بهینه‌سازی‌های خاص آن زبان‌ها را انجام می‌دهند. فشرده‌سازهای HTML ساده‌تر هستند زیرا HTML متغیر یا منطق اجرایی برای بهینه‌سازی ندارد. فشرده‌سازی HTML بر فضای خالی، کامنت‌ها و syntax attribute‌های اضافی تمرکز دارد.

فشرده‌ساز HTML