Nén HTML

Nén HTML Là Gì?

Nén HTML là quá trình giảm kích thước tài liệu HTML mà không thay đổi cách trình duyệt hiển thị nó. Công cụ nén HTML loại bỏ các ký tự chỉ tồn tại để dễ đọc cho lập trình viên: khoảng trắng giữa các thẻ, chú thích, thẻ đóng tùy chọn và giá trị thuộc tính dư thừa. Kết quả đầu ra hoạt động giống hệt nguồn nhưng nhỏ hơn về kích thước byte, có nghĩa là tải xuống nhanh hơn và thời gian hiển thị đầu tiên nhanh hơn cho người dùng.

Trình duyệt phân tích HTML thành cây DOM và loại bỏ hầu hết khoảng trắng trong quá trình đó. Một chuỗi khoảng trắng và ngắt dòng giữa hai thẻ div không có bất kỳ hiệu ứng trực quan nào trên trang đã hiển thị. Chú thích cũng bị trình phân tích cú pháp bỏ qua. Quá trình nén tận dụng các quy tắc này, loại bỏ những gì mà trình phân tích cú pháp sẽ loại bỏ, để chúng không bao giờ phải được truyền qua mạng.

Mức tiết kiệm từ việc nén HTML thay đổi tùy theo tài liệu. Các mẫu có nhiều chú thích, trang được kết xuất từ máy chủ với thụt lề sâu và đầu ra CMS với kiểu nội tuyến thường thấy mức giảm kích thước 15-30% chỉ từ việc nén. Đối với các tài liệu nhỏ, mức tiết kiệm tuyệt đối là khiêm tốn, nhưng trên các trang có lưu lượng truy cập cao, chỉ vài kilobyte cho mỗi lần tải trang cộng lại thành tiết kiệm băng thông thực sự qua hàng triệu yêu cầu.

Tại Sao Sử Dụng Công Cụ Nén HTML Này?

Dán HTML của bạn và nhận kết quả nén ngay lập tức. Không cần cài đặt công cụ xây dựng, không có tệp cấu hình, không cần tài khoản.

Trường Hợp Sử Dụng Công Cụ Nén HTML

Những Gì Nén HTML Loại Bỏ

Một công cụ nén HTML đầy đủ tính năng áp dụng một số phép biến đổi ngoài việc loại bỏ khoảng trắng. Bảng dưới đây liệt kê các kỹ thuật phổ biến nhất, được sắp xếp từ an toàn nhất (luôn không mất mát) đến tích cực nhất (có thể phá vỡ các trường hợp ngoại lệ nếu áp dụng mù quáng).

Nén HTML vs. Nén Gzip

Lập trình viên đôi khi hỏi liệu việc nén có còn cần thiết không khi máy chủ đã áp dụng nén Gzip hoặc Brotli. Câu trả lời ngắn gọn: có, và chúng hoạt động tốt nhất khi kết hợp.

Nén HTML giảm đầu vào mà Gzip xử lý, vì vậy đầu ra nén cũng nhỏ hơn. Hướng dẫn PageSpeed của Google khuyến nghị áp dụng cả hai. Trên một trang điển hình, nén HTML tiết kiệm 15-25% kích thước thô và Gzip nén kết quả thêm 60-80%. Kết hợp lại, tổng kích thước truyền tải có thể giảm xuống còn 10-20% so với tài liệu gốc chưa được nén và chưa được nén.

Ví Dụ Mã

Dưới đây là các ví dụ hoạt động của việc nén HTML trong bốn môi trường. Mỗi ví dụ loại bỏ chú thích và thu gọn khoảng trắng.

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>'

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>'

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>
}

# 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

Câu Hỏi Thường Gặp