Cách dùng Nén HTML
- Dán HTML hoặc mở một file
.html. - Chọn những gì cần xóa: khoảng trắng, comment, thuộc tính
typemặc định và giá trị boolean dư thừa. - Giữ tùy chọn minify CSS và JavaScript inline để thu gọn cả khối
<style>và<script>. - Sao chép hoặc tải về HTML đã nén và so sánh dung lượng ở trên.
Quá trình nén HTML loại bỏ những gì?
HTML viết tay hoặc được sinh tự động thường chứa thụt đầu dòng, xuống dòng và comment mà trình duyệt bỏ qua. Loại bỏ chúng giúp giảm số byte trình duyệt phải tải về trước khi bắt đầu hiển thị. Mức tiết kiệm thông thường là 10–25 % so với HTML gốc, và còn nhiều hơn với template có thụt lề sâu hoặc comment dài.
| Trước | Sau |
|---|---|
<!-- nav --> | (đã xóa) |
<button disabled="disabled"> | <button disabled> |
<script type="text/javascript"> | <script> |
class=" card featured " | class="card featured" |
Thụt lề giữa các mục <li> | (đã xóa) |
Xử lý khoảng trắng an toàn
Khoảng trắng trong HTML không phải lúc nào cũng vô nghĩa: khoảng trắng trong <strong>Free</strong> plan đang tách hai từ. Công cụ nén này giữ lại một khoảng trắng giữa phần tử inline và văn bản, chỉ xóa khoảng trắng quanh các phần tử block như div, p, li và section, và không đụng đến nội dung trong <pre> và <textarea>, vì khoảng cách ở đó là một phần của nội dung.
Những gì được giữ lại
- Comment có điều kiện (
<!--[if IE]>) và comment bắt đầu bằng<!--!. - Dấu nháy của thuộc tính — xóa chúng tiết kiệm được rất ít và có thể làm hỏng giá trị thuộc tính có khoảng trắng.
- Script có kiểu không phải JavaScript, chẳng hạn template; JSON-LD được nén như JSON.
Nén HTML khi đưa lên production
Với quy trình build, hãy dùng công cụ minify có sẵn của framework hoặc html-minifier-terser. Với các trang lẻ, email template, đoạn nhúng CMS và custom code trên Webflow, công cụ này nhanh hơn. Sau khi nén, hãy đảm bảo máy chủ cũng nén HTML — kiểm tra bằng công cụ kiểm tra nén website. Muốn đọc lại HTML đã nén, dùng công cụ định dạng HTML.
Cũng được tìm dưới tên: minify html online, html compressor, rút gọn html, xóa khoảng trắng html, minify css js inline.
Các công cụ dùng kèm tốt với Nén HTML
- Nén JavaScript (Minify JS) — Dán JavaScript vào và nhận code đã nén, sẵn sàng cho production, từ Terser — cùng engine được Vite, webpack và Rollup sử dụng — kèm so sánh trước/sau và dung lượng gzip thực tế.
- Nén CSS — Dán stylesheet vào để thu nhỏ ngay lập tức.
- Tối ưu SVG — Dọn dẹp các file SVG xuất từ Figma, Illustrator, Inkscape hoặc Sketch bằng SVGO, rồi xem trước trước/sau để chắc chắn icon vẫn hiển thị đúng.
- Nén & Giải nén Gzip — Nén văn bản hoặc bất kỳ tệp nào bằng gzip, zlib hoặc raw deflate, hoặc dán chuỗi Base64 / mở tệp .gz để giải nén.
Câu hỏi thường gặp
Nén HTML có giúp cải thiện SEO không?
Nén HTML có làm hỏng bố cục không?
Công cụ có nén CSS và JavaScript bên trong HTML không?
<style> và thuộc tính style sẽ được nén, còn các khối <script> được nén bằng Terser. Nếu script có lỗi cú pháp, nó sẽ được giữ nguyên.