Brotli vs GZIP: cải thiện tốc độ trang bằng nén HTTP

[Nhật Quang]

Nén văn bản qua HTTP là cách đơn giản nhưng hiệu quả để giảm dung lượng trang và rút ngắn thời gian tải. So sánh GZIP và Brotli cho thấy Brotli thường nén tốt hơn — nên dùng Brotli khi có thể và rơi về GZIP khi trình duyệt không hỗ trợ.

Khi người dùng mở một trang web, trình duyệt sẽ tải về nhiều tệp văn bản như HTML, CSS hay JavaScript. Các tệp càng lớn thì thời gian tải càng lâu và người dùng phải chờ nội dung xuất hiện.

Nén văn bản qua HTTP hoạt động ra sao?​

Nén văn bản giảm kích thước tệp trước khi gửi qua mạng, tiết kiệm băng thông và giảm thời gian tải. Server gửi phản hồi đã nén và dùng header Content-Encoding để báo với trình duyệt cách giải nén (ví dụ "gzip" hoặc "br"). Trình duyệt sau đó giải nén để hiển thị trang.

Cột "Full Size" hiển thị kích thước gốc, còn cột "Size" cho biết lượng dữ liệu thực tế đã truyền qua mạng. Ví dụ trong ảnh, một tệp HTML 354 KB đã được truyền chỉ còn 68 KB nhờ GZIP, giúp giảm đáng kể thời gian tải.

Brotli hay GZIP — nên chọn gì?​

GZIP đã tồn tại từ 1992 và được hỗ trợ rộng rãi. Brotli ra mắt năm 2013, cho tỷ lệ nén tốt hơn trong nhiều trường hợp và nên được ưu tiên sử dụng khi có thể.

Ví dụ so sánh với thư viện Angular: GZIP giảm ~65% kích thước, trong khi Brotli đạt khoảng 70%.

Hỗ trợ trình duyệt cho Brotli hiện khoảng 96% (theo Can I Use). Một số trình duyệt cũ như IE11 không hỗ trợ Brotli, vì vậy server cần fallback về GZIP khi client không gửi accept-encoding tương thích.

Cách bật nén trên server​

• Nếu dùng CDN: nhiều CDN tự động áp dụng nén hoặc có cấu hình bật nén trong dashboard.
• Nếu dùng NGINX/Apache: cấu hình server để bật GZIP/Brotli cho các nội dung text (HTML, CSS, JS).
• Nếu nén ở cấp ứng dụng: ví dụ Node.js có module compression để gửi phản hồi đã nén.

Kiểm tra xem trang của bạn đã nén chưa​

Bạn có thể kiểm tra header phản hồi và kích thước nội dung trong các công cụ khác nhau.

Trong DebugBear, tab Requests hiển thị thông tin GZIP/Brotli. Dùng selector Columns để bật cột Content Encoding — Brotli sẽ hiển thị là "br".

Google Lighthouse có audit tự động về việc bật nén cho tài nguyên văn bản:
"Text-based resources should be served with compression (gzip, deflate or brotli) to minimize total network bytes."

Trong Chrome DevTools, bạn có thể bật hiển thị Response Headers > Content-Encoding để thấy thuật toán nén cho từng request.

Và để xem cả kích thước nén lẫn kích thước gốc, bật tùy chọn hiển thị kích thước đầy đủ trong cột Size.

Lưu ý hiệu năng và mức nén​

Nén và giải nén tốn CPU. Các thuật toán có các mức nén (ví dụ gzip 1–9) để cân bằng giữa tốc độ và tỷ lệ nén. Mức mặc định thường là hợp lý; tăng mức cao hơn hiếm khi mang lại lợi ích lớn so với chi phí CPU.

Không phải mọi dữ liệu đều nên nén bằng gzip/brotli — hình ảnh (JPEG, PNG, WebP) đã được nén riêng theo định dạng nên việc nén thêm thường không hiệu quả.

Kết luận​

Nén văn bản là một phần quan trọng của tối ưu tốc độ trang: giảm dung lượng, cải thiện trải nghiệm người dùng và có lợi cho SEO (Core Web Vitals). Ưu tiên dùng Brotli khi client hỗ trợ và fallback về GZIP khi cần.

Thử sử dụng các công cụ như DebugBear hoặc Lighthouse để kiểm tra và theo dõi việc nén trên trang của bạn theo thời gian.

Nguồn: https://www.debugbear.com/blog/http-compression-gzip-brotli