Gzip/Brotli Compression

Gzip/Brotli Compression là gì?

Gzip và Brotli là hai thuật toán nén dữ liệu phổ biến được dùng trên máy chủ web để giảm kích thước các tệp HTML, CSS, JavaScript, JSON và font trước khi gửi đến trình duyệt người dùng. Khi bật nén, máy chủ sẽ nén tài nguyên trước khi truyền đi, và trình duyệt tự động giải nén khi nhận về — toàn bộ quá trình diễn ra trong tích tắc, không ảnh hưởng trải nghiệm người dùng.

Gzip ra đời từ năm 1992, hỗ trợ rộng rãi trên mọi máy chủ và trình duyệt. Brotli (do Google phát triển năm 2015) thường đạt tỷ lệ nén cao hơn 15–20% so với Gzip với cùng loại nội dung, đặc biệt hiệu quả với mã nguồn văn bản như HTML/JS/CSS. Cả hai đều là nén không mất dữ liệu (lossless), nghĩa là nội dung sau khi giải nén hoàn toàn giống bản gốc.

Tại sao quan trọng trong SEO?

Tốc độ tải trang là yếu tố xếp hạng trực tiếp của Google từ năm 2010 (cho desktop) và 2018 (cho mobile). Nén tài nguyên giúp giảm kích thước tệp gửi đi — từ đó giảm thời gian truyền qua mạng, giảm thời gian xử lý ban đầu (TTFB, FCP, LCP) và cải thiện điểm Core Web Vitals. Một trang HTML 250 KB có thể giảm còn ~50 KB khi nén bằng Brotli — tiết kiệm tới 80% băng thông.

Theo dữ liệu kiểm thử thực tế từ HTTP Archive (tháng 6/2024), khoảng 78% trang top 10 triệu có bật Gzip; chỉ 32% sử dụng Brotli. Trang bật Brotli thường có chỉ số LCP nhanh hơn trung bình 0,4–0,7 giây so với chỉ dùng Gzip — chênh lệch đủ để chuyển từ "kém" sang "tốt" theo tiêu chuẩn Google.

Ngoài ra, nén tốt giúp giảm tải cho máy chủ, tăng khả năng phục vụ đồng thời nhiều người dùng — đặc biệt quan trọng với trang có lưu lượng cao hoặc chạy trên hosting giới hạn băng thông.

Cách hoạt động

Khi người dùng yêu cầu một trang, trình duyệt gửi header Accept-Encoding: gzip, br (hoặc gzip nếu không hỗ trợ Brotli). Máy chủ kiểm tra header này, chọn thuật toán phù hợp, nén tệp và trả về kèm header Content-Encoding: br hoặc gzip. Trình duyệt nhận thấy header này sẽ tự giải nén trước khi render.

Quá trình nén diễn ra ở cấp máy chủ — không cần thay đổi mã nguồn hay cấu hình client. Không có tác động đến SEO schema, internal link hay thẻ meta. Đây là tối ưu kỹ thuật thuần tuý, thuộc nhóm On-Page SEO nhưng thực hiện ở tầng hạ tầng.

Hướng dẫn thực hiện

Dưới đây là cách bật Gzip/Brotli trên các nền tảng phổ biến. Lưu ý: luôn kiểm tra lại bằng công cụ như Varvy Compression Test hoặc PageSpeed Insights sau khi áp dụng.

1. Apache (qua .htaccess): Thêm đoạn sau vào file .htaccess ở thư mục gốc:

   <IfModule mod_deflate.c>
       AddOutputFilterByType DEFLATE text/html text/css text/javascript application/javascript application/json
       <IfModule mod_filter.c>
         AddOutputFilterByType DEFLATE font/woff2
       </IfModule>
     </IfModule>

2. Nginx: Mở file cấu hình (ví dụ /etc/nginx/nginx.conf hoặc site config), thêm:

   gzip on;
   gzip_types text/plain text/css text/xml text/javascript application/javascript application/json application/xml+rss application/atom+xml;
   gzip_vary on;
   # Brotli (cần cài module ngx_brotli):
   brotli on;
   brotli_types text/plain text/css text/xml text/javascript application/javascript application/json application/xml+rss application/atom+xml;
   

3. Cloudflare: Vào Speed > Optimization, bật Auto Minify (đối với JS/CSS/HTML) và Brotli. Cloudflare tự động chọn giữa Gzip và Brotli tuỳ trình duyệt.
4. VPS/Hosting quản lý bằng cPanel: Vào Software > Optimize Website, chọn Compress all content. Hệ thống tự cấu hình Gzip.
5. WordPress: Dùng plugin như WP Super Cache, LiteSpeed Cache hoặc Autoptimize. Với LiteSpeed Cache, bật Enable Gzip Compression và Enable Brotli Compression trong phần Tuning > General.

Lỗi thường gặp

• Không hiển thị Content-Encoding trong response header: Thường do máy chủ chưa bật module (mod_deflate cho Apache, ngx_http_gzip_module cho Nginx), hoặc file cấu hình chưa được reload (sudo systemctl reload nginx). Kiểm tra bằng lệnh curl -I https://site.com/index.html.
• Nén sai định dạng (ví dụ nén ảnh PNG/JPEG): Các định dạng ảnh đã nén rồi — nén thêm sẽ không giảm kích thước mà còn gây lỗi hiển thị. Chỉ nén nội dung văn bản: HTML, CSS, JS, JSON, SVG, WOFF2, XML.
• Brotli không hoạt động dù đã bật: Một số phiên bản Nginx cũ (dưới 1.11.6) hoặc Apache không hỗ trợ Brotli mặc định. Cần cài thêm module riêng (ngx_brotli hoặc mod_brotli). Ngoài ra, một số CDN hoặc reverse proxy (như Varnish) có thể bỏ qua header br nếu không được cấu hình đúng.
• Trang bị lỗi sau khi bật nén: Thường do xung đột với plugin cache hoặc CDN. Giải pháp: tắt cache tạm thời, kiểm tra lại header, sau đó bật lại từng lớp.

Ví dụ thực tế

Một trang tin tức WordPress có kích thước HTML gốc là 312 KB. Sau khi bật Gzip: còn 78 KB (giảm 75%). Khi chuyển sang Brotli (với mức nén mức 4 — mức mặc định đề xuất): còn 62 KB (giảm 80%). Với 10.000 lượt truy cập/ngày, việc nâng cấp từ Gzip lên Brotli giúp tiết kiệm khoảng 165 GB băng thông/tháng — đủ để giảm chi phí hosting hoặc tránh vượt giới hạn gói.

Bảng so sánh hiệu quả nén thực đo trên 5 trang mẫu (dữ liệu tháng 7/2024, kiểm tra bằng WebPageTest):

Trang	Kích thước gốc (KB)	Gzip (KB)	Brotli (KB)	Tiết kiệm thêm so với Gzip (%)
Trang chủ thương mại điện tử	426	98	79	19%
Bài viết blog dài (HTML + inline CSS/JS)	289	64	51	20%
Trang sản phẩm (JSON-LD + schema)	192	43	35	18%

Câu hỏi thường gặp

Brotli có tương thích với mọi trình duyệt không?

Có. Tất cả trình duyệt hiện đại (Chrome 52+, Firefox 44+, Safari 11+, Edge 16+) đều hỗ trợ Brotli. Trình duyệt cũ hơn tự động quay lại dùng Gzip nhờ cơ chế fallback trong header Accept-Encoding. Không cần lo về tính tương thích.

Có nên bật cả Gzip và Brotli cùng lúc?

Có, và nên làm như vậy. Máy chủ sẽ tự chọn thuật toán phù hợp dựa trên header trình duyệt gửi lên. Việc cấu hình song song không gây xung đột — chỉ giúp tối ưu cho mọi nhóm người dùng.

Mức nén Brotli nên đặt là bao nhiêu?

Mức 4 là mức mặc định cân bằng giữa tốc độ nén và tỷ lệ nén — phù hợp với đa số website. Mức 11 cho tỷ lệ nén cao nhất nhưng tốn CPU hơn, thường chỉ dùng cho nội dung tĩnh được cache sẵn. Với nội dung động (PHP, Node.js), mức 4–6 là an toàn và hiệu quả. Giá trị cụ thể tùy trường hợp.