Cách rút gọn HTML hoạt động
Bộ rút gọn duyệt qua đầu vào bằng một máy trạng thái nhỏ phân biệt các vùng cần giữ nguyên (<pre>, <textarea>, <script>, <style>) với các vùng có thể thu gọn khoảng trắng và xóa chú thích.
- Token hóa các khối cần bảo toàn. Bộ quét đọc đầu vào từng ký tự một và chuyển sang trạng thái bảo toàn khi gặp thẻ mở
<pre>,<textarea>,<script>hoặc<style>. Mọi thứ bên trong các thẻ đó được giữ nguyên từng byte cho đến thẻ đóng tương ứng. - Thu gọn khoảng trắng có thể chỉnh sửa. Trong các vùng có thể chỉnh sửa, bộ quét thu gọn mỗi chuỗi dấu cách, tab và xuống dòng thành một dấu cách duy nhất, rồi cắt bỏ khoảng trắng đầu và cuối xung quanh các ranh giới thẻ. Văn bản hiển thị tái hiển thị theo cách trình duyệt render.
- Xóa chú thích. Các khối
<!-- ... -->bị xóa khi nút gạt được bật. Chú thích điều kiện IE (<!--[if IE]> ... <![endif]-->) được giữ lại khi nút gạt bảo toàn-điều-kiện được bật, vì các ứng dụng email cũ vẫn phụ thuộc vào chúng. - Thu gọn thuộc tính boolean. Các dạng dài dòng như
checked="checked",disabled="disabled"vàrequired="required"rút gọn thành tên thuộc tính đơn giản. Đặc tả HTML5 coi dạng rút gọn là tương đương về ngữ nghĩa, vì vậy DOM được render không thay đổi. - Báo cáo chênh lệch byte. Cả văn bản gốc lẫn văn bản đã rút gọn đều được đo bằng
new TextEncoder().encode(...).byteLength— đúng số byte UTF-8 mà CDN hoặc máy chủ HTTP sẽ thấy trên đường truyền. Thanh số liệu hiển thị kích thước gốc, kích thước rút gọn, byte đã tiết kiệm và phần trăm tiết kiệm.
Tại sao cần rút gọn HTML
- Tải trang nhanh hơn. HTML nhỏ hơn đến trình duyệt sớm hơn và bộ phân tích cú pháp hoàn thành sớm hơn. Trên mạng di động, lượng byte tiết kiệm chuyển trực tiếp thành First Contentful Paint nhanh hơn và điểm hiệu suất Lighthouse tốt hơn.
- Hóa đơn egress CDN thấp hơn. CloudFront, Cloudflare và Fastly tính phí theo gigabyte egress. Giảm 20% HTML trên hàng triệu lượt xem hàng tháng tích lũy thành tiết kiệm thực sự trên hóa đơn, trước bất kỳ tối ưu hóa ảnh hay script nào.
- Diff pull-request gọn hơn. HTML tĩnh dựng sẵn được commit vào repo trở nên lộn xộn khi mỗi chỉnh sửa template làm thay đổi thụt lề. HTML rút gọn trong thư mục dist tạo ra diff PR gọn hơn tập trung vào thay đổi nội dung thực sự thay vì nhiễu khoảng trắng.
- Embed và đoạn mã nhỏ hơn. Template email, đoạn mã widget bên thứ ba và HTML lưu trong cấu hình JSON hoặc YAML đều được hưởng lợi từ cùng lượng byte cắt giảm. Embed rút gọn giữ email giao dịch dưới giới hạn kích thước ESP và thu nhỏ gói widget.
Ứng dụng phổ biến
Rút gọn HTML xuất hiện ở cuối hầu hết mọi pipeline build trang tĩnh hoặc JAMstack, cùng với một số bối cảnh runtime nơi byte quan trọng hơn khả năng đọc mã nguồn.
- Bước build trang tĩnh: Eleventy, Hugo, Astro và Next.js build sản xuất chạy HTML qua bộ rút gọn trước khi ghi vào thư mục dist để gói deploy nhỏ hơn nguồn.
- Email giao dịch: các ESP (SendGrid, Postmark, Mailgun) giới hạn kích thước body HTML và việc mở rộng inline-CSS tính điểm nhanh. Rút gọn body trước khi gửi giữ tin nhắn dưới giới hạn.
- Widget nhúng: widget bên thứ ba và đoạn chat được giao dưới dạng HTML inline được hưởng lợi từ mọi byte cắt giảm vì trang chủ phải tải chúng mỗi lần truy cập.
Ví dụ thực tế
Dán một đoạn form 500 byte dài dòng với thụt lề hai dấu cách, ba xuống dòng giữa các hàng, một khối chú thích HTML ở đầu và một <input type="checkbox" checked="checked" />. Với tất cả các tùy chọn được bật, đầu ra thu gọn xuống khoảng 300 byte — tiết kiệm khoảng 40% — trong khi cây DOM được render vẫn tương đương byte với nguồn.
Rút gọn có phá vỡ HTML của tôi không?
Không, khi sử dụng với các nút gạt mặc định. Bộ rút gọn bảo toàn nội dung của các thẻ <pre>, <textarea>, <script> và <style> nguyên văn, để nguyên chú thích điều kiện IE khi nút gạt đó được bật, và chỉ thu gọn khoảng trắng mà bộ phân tích HTML5 đã phân loại là không quan trọng. Cây DOM được render tương đương byte với nguồn. Các nút gạt mạnh (xóa-thuộc-tính-rỗng) có thể thay đổi hành vi với các đoạn mã cố ý dùng value="" hoặc alt="", vì vậy hãy xem lại đầu ra nếu bật chúng.
Công cụ này có rút gọn CSS và JS nội tuyến không?
Không có trong công cụ này. Nội dung <style> và <script> nội tuyến được bảo toàn nguyên văn để bộ rút gọn không bao giờ phá vỡ quy tắc CSS hay câu lệnh JS bằng cách thu gọn khoảng trắng trong string literal hoặc regex. Để rút gọn CSS hãy dùng CSS Minifier; JS dùng JS Minifier. HTML Minifier tập trung vào chính đánh dấu.
Có thể tiết kiệm được bao nhiêu?
Tiết kiệm điển hình trên HTML viết tay từ 10 đến 30%, tùy thuộc vào mức độ nguồn sử dụng thụt lề, dòng trống và dạng thuộc tính dài dòng. HTML tĩnh dựng sẵn từ các framework như Next.js thường tiết kiệm 15 đến 25% vì framework đã thực hiện một số tối ưu hóa nhưng để lại khoảng trắng đọc được. Template có nhiều chú thích và HTML kiểu email với lồng sâu có thể đạt 40% hoặc hơn.
Nội dung pre có được bảo toàn không?
Có. Bộ rút gọn token hóa rõ ràng các khối <pre>, <textarea>, <script> và <style> là các vùng cần-giữ-nguyên và sao chép nội dung của chúng byte-by-byte vào đầu ra. Khoảng trắng, xuống dòng và thụt lề bên trong các thẻ đó sống sót nguyên vẹn sau khi rút gọn, vì vậy các mẫu mã và ASCII art render hoàn toàn giống nhau.
Rút gọn HTML phía trình duyệt giữ pipeline build của bạn đơn giản và đánh dấu nhỏ gọn. Dán bất kỳ HTML nào ở trên, điều chỉnh các nút tùy chọn và sao chép hoặc tải xuống đầu ra đã rút gọn — không tải lên, không tài khoản, không thư viện vendor.