Giới Thiệu
Trong thời đại web hiện đại, việc tối ưu hóa hiệu suất trang web là vô cùng quan trọng. Khi trình duyệt yêu cầu HTML, CSS, JavaScript hoặc thậm chí là hình ảnh, kích thước byte thô có thể là một yếu tố lớn ảnh hưởng đến Thời Gian Từ Khởi Đầu Đến Byte Đầu Tiên (TTFB) và tổng thời gian tải trang. Kích hoạt nén phía server có thể giảm tải trọng dữ liệu xuống, thường giảm kích thước truyền tải từ 60-80% cho các tài nguyên dựa trên văn bản. Nginx có hỗ trợ tích hợp cho gzip, nhưng thuật toán brotli mới hơn (trình nén mã nguồn mở của Google) cung cấp tỷ lệ nén tốt hơn từ 10-30% cho nội dung UTF-8.
Tóm lại: Sử dụng Brotli cho các trình duyệt hiện đại, giữ Gzip làm phương án dự phòng cho các khách hàng cũ.
1. Kiểm Tra Tính Tương Thích Nhanh
| Trình duyệt | Gzip | Brotli |
|---|---|---|
| Chrome ≥ 49 | ✅ | ✅ |
| Firefox ≥ 44 | ✅ | ✅ |
| Safari ≥ 10.1 | ✅ | ✅ |
| Edge ≤ 18 | ✅ | ❌ |
| Internet Explorer | ✅ | ❌ |
Nếu bạn hỗ trợ các phiên bản cũ hơn của Edge hoặc IE, bạn vẫn cần Gzip. Nguyên tắc là phục vụ Brotli khi Accept-Encoding bao gồm br, nếu không thì quay lại Gzip.
2. Cài Đặt Module Brotli Trên Linux
Hầu hết các bản phân phối hiện đại cung cấp module ngx_brotli đã được biên dịch sẵn. Trên Ubuntu 22.04, bạn có thể cài đặt từ kho chính thức:
bash
sudo apt-get update
sudo apt-get install nginx-module-brotli
# Kiểm tra xem module đã được tải chưa
nginx -V 2>&1 | grep -o brotli
Nếu bạn biên dịch Nginx từ mã nguồn, thêm module trong quá trình cấu hình:
bash
cd /usr/local/src
wget https://nginx.org/download/nginx-1.25.2.tar.gz
tar xf nginx-1.25.2.tar.gz
git clone https://github.com/google/ngx_brotli.git
cd ngx_brotli && git submodule update --init
cd ../nginx-1.25.2
./configure \
--add-module=../ngx_brotli \
--with-http_ssl_module \
--with-http_v2_module
make && sudo make install
Sau khi cài đặt, tải lại Nginx:
bash
sudo systemctl reload nginx
3. Cấu Hình Cơ Bản – Gzip
Đặt đoạn mã sau vào khối http trong tệp nginx.conf (hoặc một tệp đã bao gồm như /etc/nginx/conf.d/compression.conf):
nginx
http {
gzip on;
gzip_comp_level 6; # 1‑9, 6 là cân bằng tốt
gzip_min_length 256; # Không nén các phản hồi nhỏ
gzip_types text/plain text/css application/json application/javascript text/xml application/xml+rss;
gzip_vary on; # Gửi tiêu đề Vary: Accept-Encoding
gzip_proxied any;
}
Điểm cần lưu ý:
gzip_comp_level: Mức cao hơn sẽ tăng mức sử dụng CPU. Với các trang web bận rộn, mức 4-6 là phổ biến.gzip_varyđảm bảo rằng các bộ đệm lưu trữ các phiên bản riêng biệt cho phản hồi nén và không nén.
4. Cấu Hình Cơ Bản – Brotli
Thêm khối Brotli sau khối Gzip. Nginx sẽ tự động thương lượng thuật toán tốt nhất.
nginx
http {
# ... khối gzip ở trên ...
brotli on;
brotli_comp_level 5; # 0-11, 5-7 mang lại tỷ lệ tốt nhất mà không làm tắc CPU
brotli_types text/plain text/css application/json application/javascript text/xml application/xml+rss;
brotli_static on; # Phục vụ các tệp .br đã được nén trước nếu chúng tồn tại
}
brotli_static là một lợi thế về hiệu suất: bạn có thể nén trước các tài nguyên tĩnh trong quy trình CI của mình và để Nginx phục vụ chúng trực tiếp, bỏ qua việc nén thời gian chạy.
5. Kích Hoạt Có Điều Kiện – Chỉ Dành Cho Tài Nguyên Văn Bản
Nén các tệp đã nén (ví dụ: JPEG, PNG, MP4) sẽ lãng phí chu kỳ CPU. Các chỉ thị gzip_types và brotli_types đã giới hạn phạm vi, nhưng bạn cũng có thể thêm bộ lọc regex để an toàn hơn:
nginx
location ~* \.(?:js|css|html|json|svg|txt)$ {
# Kế thừa gzip/brotli từ khối http
try_files $uri $uri/ =404;
}
Tất cả các vị trí khác sẽ quay lại mặc định (không nén).
6. Kiểm Tra Cấu Hình của Bạn
6.1 Kiểm Tra Với Curl
bash
# Chỉ Gzip
curl -H "Accept-Encoding: gzip" -I https://example.com/style.css
# Chỉ Brotli
curl -H "Accept-Encoding: br" -I https://example.com/style.css
# Cả hai – để server quyết định
curl -H "Accept-Encoding: gzip, br" -I https://example.com/style.css
Tìm kiếm tiêu đề Content-Encoding: gzip hoặc Content-Encoding: br.
6.2 Kiểm Tra Với Lighthouse / WebPageTest
Chạy kiểm tra Lighthouse (Chrome DevTools) hoặc WebPageTest. So sánh TTFB và Kích Thước Truyền Tải trước và sau khi kích hoạt Brotli. Mong đợi giảm 10-20 ms trong TTFB cho các trang HTML điển hình.
7. Giám Sát Tác Động Đến CPU
Nén sẽ tăng tải cho CPU. Sử dụng htop hoặc top để theo dõi các tiến trình worker của nginx sau một đợt lưu lượng. Nếu bạn thấy CPU duy trì trên 80%, hãy xem xét:
- Giảm
brotli_comp_levelxuống 4. - Kích hoạt
brotli_staticvà nén trước các tài nguyên. - Chuyển giao nội dung tĩnh cho một CDN đã xử lý Brotli.
Bạn cũng có thể xuất các chỉ số Nginx sang Prometheus thông qua ngx_http_stub_status_module và trực quan hóa tỷ lệ nén trong Grafana.
8. Khi Nào Không Nên Sử Dụng Brotli
- Trang web có lưu lượng truy cập rất thấp nơi mà độ phức tạp của bước xây dựng thêm vượt qua tiết kiệm băng thông.
- Các điểm cuối API cũ phục vụ tải trọng nhị phân (ví dụ: protobuf) – nén là không cần thiết và có thể làm hỏng khách hàng.
- Môi trường có hạn chế CPU nghiêm ngặt (ví dụ: VPS chia sẻ rẻ). Duy trì Gzip ở mức 4.
9. Danh Sách Kiểm Tra Trước Khi Triển Khai
- [ ] Cài đặt
ngx_brotli(gói hoặc biên dịch). - [ ] Thêm cả hai khối Gzip và Brotli vào
nginx.conf. - [ ] Giới hạn nén cho các loại MIME văn bản.
- [ ] Kích hoạt
brotli_staticvà thêm bước CI để tạo các tệp.br. - [ ] Kiểm tra với
curlvà Lighthouse. - [ ] Giám sát CPU và điều chỉnh
*_comp_levelkhi cần. - [ ] Tài liệu hành vi dự phòng cho các trình duyệt thiếu hỗ trợ Brotli.
10. Kết Luận
Cân bằng giữa tiết kiệm băng thông và tải CPU là một sự trao đổi điển hình trong SRE. Bằng cách kết hợp Gzip và Brotli một cách thông minh, bạn có thể hưởng lợi từ cả hai thế giới: các trình duyệt hiện đại nhận được tải trọng nhỏ nhất có thể, trong khi các khách hàng cũ vẫn nhận được nén đáng tin cậy. Hãy theo dõi tải của server và đừng quên nén trước các tài nguyên tĩnh để tối ưu hóa thời gian phản hồi của bạn.
Để biết thêm các hướng dẫn thực hành và các nghiên cứu thực tế về hiệu suất web, hãy truy cập lacidaweb.com.