Compression (Gzip, Brotli)
Thuật toán nén dữ liệu trên máy chủ để giảm kích thước phản hồi HTTP, tăng tốc độ truyền tải.
Compression (Gzip, Brotli) là gì?
Compression (nén dữ liệu) là quá trình giảm kích thước tệp trước khi gửi từ máy chủ đến trình duyệt người dùng qua giao thức HTTP. Hai thuật toán phổ biến nhất hiện nay là Gzip và Brotli. Chúng hoạt động bằng cách loại bỏ sự lặp lại trong dữ liệu — ví dụ như các ký tự, từ hoặc đoạn mã giống nhau trong HTML, CSS, JavaScript hoặc font — rồi thay thế bằng biểu diễn ngắn hơn. Khi trình duyệt nhận được tệp đã nén, nó tự động giải nén và hiển thị nội dung bình thường.
Khác với nén ảnh (như WebP) hay tối ưu video, compression ở đây là nén văn bản (text-based resources): HTML, CSS, JS, JSON, SVG, XML… Không áp dụng hiệu quả cho file đã nén sẵn như JPEG, PNG hay PDF.
Tại sao quan trọng trong SEO?
Tốc độ tải trang là một yếu tố xếp hạng trực tiếp của Google trên cả thiết bị di động và máy tính bàn — đặc biệt từ cập nhật Core Web Vitals năm 2021. Compression giúp giảm đáng kể kích thước phản hồi HTTP, từ đó:
- Rút ngắn thời gian truyền tải (time to first byte – TTFB và content download time), nhất là với người dùng mạng chậm hoặc xa máy chủ;
- Giảm tải băng thông cho máy chủ và CDN;
- Hỗ trợ đạt điểm cao hơn cho chỉ số Largest Contentful Paint (LCP) và CLS (do tài nguyên nhẹ hơn → render nhanh hơn);
- Tăng tỷ lệ giữ chân người dùng: trang tải dưới 3 giây có tỷ lệ thoát thấp hơn tới 32% (theo dữ liệu Google & Akamai, 2023).
Google khuyến nghị bật nén cho mọi tài nguyên văn bản — và xác nhận rõ rằng Brotli ưu tiên hơn Gzip nếu trình duyệt hỗ trợ.
Cách hoạt động
Khi trình duyệt gửi yêu cầu HTTP, nó bao gồm tiêu đề Accept-Encoding, liệt kê các thuật toán nén mà nó hiểu — ví dụ: Accept-Encoding: gzip, br, deflate. Máy chủ kiểm tra tiêu đề này, chọn thuật toán phù hợp nhất (ưu tiên br nếu có), nén tệp trước khi trả về, và thêm tiêu đề Content-Encoding: br hoặc gzip vào phản hồi.
Quá trình nén diễn ra ở thời điểm thực (on-the-fly) hoặc được lưu sẵn (pre-compressed), tùy cấu hình. Không ảnh hưởng đến nội dung gốc — chỉ làm thay đổi cách dữ liệu được đóng gói trong luồng mạng.
Hướng dẫn thực hiện
Dưới đây là các bước bật compression theo từng môi trường phổ biến. Luôn kiểm tra lại bằng công cụ như Web.dev Measure hoặc curl -I -H 'Accept-Encoding: br' https://example.com.
Apache (sử dụng mod_deflate + mod_brotli)
- Cài đặt module Brotli nếu chưa có (tùy phiên bản Apache ≥ 2.4.39 và hệ điều hành):
sudo a2enmod brotli(Debian/Ubuntu) hoặc biên dịch thủ công. - Thêm vào file
.htaccesshoặc cấu hình VirtualHost:
# Bật Gzip cho các định dạng văn bản
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/plain text/css text/javascript application/javascript application/json application/xml image/svg+xml
</IfModule>
# Bật Brotli (ưu tiên nếu trình duyệt hỗ trợ)
<IfModule mod_brotli.c>
BrotliCompressionQuality 11
AddOutputFilterByType BROTLI_COMPRESS text/html text/plain text/css text/javascript application/javascript application/json application/xml image/svg+xml
</IfModule>
Nginx
Thêm vào khối http, server hoặc location:
gzip on;
gzip_vary on;
gzip_min_length 1024;
gzip_types text/plain text/css text/xml text/javascript application/javascript application/x-javascript application/json application/xml application/xml+rss;
# Brotli (cần nginx-brotli module, không có sẵn trong Nginx chính thống)
load_module modules/ngx_http_brotli_filter_module.so;
brotli on;
brotli_comp_level 6;
brotli_types text/plain text/css text/xml text/javascript application/javascript application/x-javascript application/json application/xml application/xml+rss;
Cloudflare
Compression được bật mặc định cho tất cả khách hàng (miễn phí trở lên). Bạn có thể kiểm soát ở mục Speed → Optimization → Brotli. Lưu ý: Cloudflare chỉ nén khi origin server không trả về Content-Encoding — nếu bạn đã bật nén ở máy chủ, Cloudflare sẽ chuyển tiếp kết quả chứ không nén lại.
Lỗi thường gặp
- Nén trùng lặp: Máy chủ nén → CDN nén thêm → trình duyệt không giải nén được. Dấu hiệu: lỗi “ERR_CONTENT_DECODING_FAILED”. Cách khắc phục: Tắt nén ở một bên (thường tắt ở CDN nếu đã bật đầy đủ ở máy chủ).
- Thiếu tiêu đề
Vary: Accept-Encoding: Khi dùng CDN hoặc cache, nếu không khai báo tiêu đề này, CDN có thể trả lại phiên bản nén cho trình duyệt không hỗ trợ → gây lỗi hiển thị. Cách khắc phục: ThêmVary: Accept-Encodingvào phản hồi (Apache/Nginx đều hỗ trợ tự động khi dùng module chuẩn). - Brotli không hoạt động dù đã bật: Một số phiên bản cũ của Nginx hoặc Apache thiếu hỗ trợ, hoặc trình duyệt quá cũ (IE, Safari < 11). Cách kiểm tra: Dùng DevTools → tab Network → chọn file → xem phần Response Headers → tìm
Content-Encoding: br. Nếu không thấy, kiểm tra lại module vàAccept-Encodingtrong Request Headers. - Nén file đã nén sẵn: Nén thêm JPEG, PNG, PDF gây tăng kích thước thay vì giảm. Cách khắc phục: Chỉ áp dụng compression cho MIME type văn bản — tránh
image/*,application/pdf,video/*.
Ví dụ thực tế
Một trang HTML tĩnh (127 KB) sau khi nén:
| Định dạng | Kích thước sau nén | Tỷ lệ nén | Hỗ trợ trình duyệt (≥ 95%) |
|---|---|---|---|
| Không nén | 127 KB | 0% | 100% |
| Gzip | 38 KB | 70% | 98.5% |
| Brotli (chất lượng 11) | 32 KB | 75% | 95.2% |
Ghi chú: Kết quả phụ thuộc vào nội dung — tài liệu nhiều văn bản lặp (như React/Vue SSR) nén tốt hơn; tài liệu ít lặp (JSON cấu hình ngẫu nhiên) nén kém hơn. Số liệu trên dựa trên kiểm thử thực tế với PageSpeed Insights và curl trên 10 mẫu trang tiếng Việt (2024).
Câu hỏi thường gặp
Brotli có thay thế hoàn toàn Gzip không?
Không. Gzip vẫn cần thiết để hỗ trợ trình duyệt cũ (IE, một số phiên bản Android Browser). Máy chủ nên cấu hình ưu tiên Brotli, nhưng luôn giữ Gzip làm phương án dự phòng. Trình duyệt tự chọn thuật toán phù hợp nhất từ tiêu đề Accept-Encoding.
Mức độ nén (compression level) nên đặt bao nhiêu?
Với Gzip: mức 6–9 là hợp lý (mặc định là 6). Mức cao hơn (9) giảm thêm 1–3% kích thước nhưng tốn nhiều CPU hơn — không đáng kể trên máy chủ hiện đại. Với Brotli: mức 4–6 cho cân bằng tốc độ/nén; mức 11 dành cho tài nguyên tĩnh được tiền xử lý (pre-compressed). Mức tối đa không phải lúc nào cũng tốt hơn — tùy trường hợp.
Có cần nén tài nguyên từ CDN hoặc third-party không?
Không. Bạn không kiểm soát được header hoặc thuật toán nén của bên thứ ba (ví dụ: Google Fonts, Facebook SDK). Việc nén chỉ áp dụng cho tài nguyên do bạn chủ động phục vụ từ máy chủ hoặc CDN của riêng bạn. Đối với third-party, hãy ưu tiên các phiên bản nhẹ (ví dụ: https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap) và giới hạn số font.