Brotli là thuật toán nén do Google phát triển, thay thế gzip với tỷ lệ nén tốt hơn 15-26% cho HTML, CSS và JavaScript. Nếu bạn đang chạy WordPress trên VPS dùng Nginx mà chưa bật Brotli, bạn đang lãng phí mỗi lần tải trang khoảng 40ms trên kết nối 4G — nhân với hàng nghìn page views mỗi ngày thì đó là khoảng cách lớn trong Core Web Vitals.
Mình đã bật Brotli cho hơn chục site WordPress chạy Nginx, và hôm nay mình sẽ hướng dẫn bạn cấu hình từ A đến Z: cài module, tinh chỉnh config, pre-compress static assets, và kiểm tra xem đã hoạt động chưa.
Brotli khác gì Gzip và tại sao bạn nên bật ngay?
Gzip là thuật toán nén mặc định từ năm 1992, có mặt ở mọi web server. Brotli ra đời năm 2015, được chuẩn hóa RFC 7932, có thêm từ điển tĩnh 120KB chứa các token web phổ biến. Kết quả thực tế: HTML nén nhỏ hơn 15%, CSS nhỏ hơn 21%, JavaScript nhỏ hơn 19% so với gzip cùng mức nén.
Trang chủ WordPress điển hình khoảng 180KB HTML không nén. Gzip level 6 xuống còn 28KB. Brotli level 6 xuống 23KB. Pre-compress level 11 xuống 19KB. Chênh 5-9KB mỗi request cộng dồn thành hàng trăm megabyte băng thông tiết kiệm mỗi tháng, và cải thiện Largest Contentful Paint đáng kể trên mobile.
Điều kiện cần trước khi cấu hình Brotli?
Bạn cần VPS chạy Nginx với quyền root hoặc sudo. Brotli chỉ hoạt động trên HTTPS — mọi trình duyệt chỉ gửi header Accept-Encoding: br qua kết nối mã hóa. Nếu site chưa có SSL, hãy cài Let’s Encrypt trước. Mọi trình duyệt từ năm 2017 trở đi đều hỗ trợ Brotli: Chrome 50+, Firefox 44+, Safari 11+, Edge 15+, покр 96%+ người dùng toàn cầu.
Cài đặt module Brotli cho Nginx như thế nào?
Cách dễ nhất là dùng package có sẵn. Trên Ubuntu 22.04+ hoặc Debian Bookworm, bạn chỉ cần chạy hai lệnh sau:
sudo apt update
sudo apt install libnginx-mod-http-brotli-filter libnginx-mod-http-brotli-staticPackages này tự động tạo load snippet trong /etc/nginx/modules-enabled/. Bạn kiểm tra xem đã có chưa:
ls /etc/nginx/modules-enabled/ | grep brotliKết quả phải hiển thị hai file: 50-mod-http-brotli-filter.conf và 50-mod-http-brotli-static.conf. Nếu không có, bạn thêm thủ công vào đầu /etc/nginx/nginx.conf (trước block http):
load_module modules/ngx_http_brotli_filter_module.so;
load_module modules/ngx_http_brotli_static_module.so;Lưu ý: nếu bạn dùng distro không có package sẵn hoặc build Nginx từ source, bạn sẽ cần compile module ngx_brotli từ GitHub của Google. Mình sẽ hướng dẫn phần này ở cuối bài.
Cấu hình Brotli trong nginx.conf ra sao?
Mở file /etc/nginx/nginx.conf và thêm các directive sau vào trong block http { ... }:
http {
# Brotli on-the-fly compression
brotli on;
brotli_comp_level 6;
brotli_min_length 256;
brotli_types
text/plain
text/css
text/javascript
text/xml
application/javascript
application/json
application/xml
application/rss+xml
application/atom+xml
application/ld+json
application/manifest+json
application/vnd.ms-fontobject
font/opentype
font/ttf
image/svg+xml
image/x-icon;
# Brotli static (serve file .br pre-compressed)
brotli_static on;
# Giữ gzip làm fallback cho trình duyệt cũ
gzip on;
gzip_comp_level 6;
gzip_min_length 256;
gzip_vary on;
gzip_types
text/plain text/css text/javascript application/javascript
application/json application/xml image/svg+xml font/opentype;
}Mình giải thích từng thông số: brotli_comp_level 6 là điểm cân bằng tốt nhất giữa tỷ lệ nén và CPU. Mức 4-6 phù hợp cho dynamic content, chỉ tốn thêm khoảng 1ms mỗi request. Mức 11 cho file tĩnh pre-compressed. brotli_min_length 256 bỏ qua file quá nhỏ vì nén không đáng kể. Danh sách brotli_types bao gồm mọi text content, nhưng bỏ qua ảnh (JPEG, PNG, WebP) và video vì đã nén sẵn.
Lưu ý quan trọng: giữ gzip bật song song. Nginx sẽ tự chọn Brotli cho trình duyệt hỗ trợ và gzip cho trình duyệt cũ. Không ai bị bỏ lại phía sau.
Kiểm tra Brotli đã hoạt động chưa?
Sau khi cấu hình xong, test và reload Nginx:
sudo nginx -t
sudo systemctl reload nginxDùng curl để kiểm tra:
curl -H "Accept-Encoding: br,gzip" -I https://example.comNếu thấy Content-Encoding: br trong response headers là Brotli đang hoạt động. Bạn cũng có thể mở Chrome DevTools, tab Network, click vào bất kỳ request nào (HTML, CSS, JS) và kiểm tra Response Headers. Hoặc dùng công cụ online như tools.keycdn.com/brotli-test.
Pre-compress static assets để tối ưu nhất?
Đây là bước nhiều bạn bỏ qua nhưng lại mang lại lợi ích lớn nhất. Thay vì Nginx nén real-time mỗi request, bạn nén sẵn file CSS/JS ở mức 11 (tối đa) một lần, rồi Nginx serve trực tiếp file .br — không tốn CPU lúc runtime.
Đầu tiên cài CLI tool:
sudo apt install brotliSau đó nén sẵn các file tĩnh trong web root:
find /var/www/thienlv.com/public_html -type f \( -name "*.css" -o -name "*.js" \) \
-exec brotli -Z -f {} -o {}.br \;Cờ -Z tương đương level 11. Khi Nginx thấy brotli_static on và browser gửi Accept-Encoding: br, nó tự động serve app.js.br thay vì nén app.js realtime. Zero CPU, maximum compression.
Để tự động hóa, bạn có thể thêm cron job chạy sau mỗi lần deploy:
# Thêm vào crontab -e
# Chạy pre-compress mỗi đêm lúc 3h sáng
0 3 * * * find /var/www/yoursite/public_html -type f \( -name "*.css" -o -name "*.js" \) -newer /tmp/brotli_stamp -exec brotli -Z -f {} -o {}.br \; && touch /tmp/brotli_stampNếu site của bạn chạy qua Cloudflare (bất kỳ gói nào, kể cả Free), Brotli đã được bật mặc định từ năm 2017. Bạn không cần làm gì cả. Tương tự với Kinsta, WP Engine, SiteGround — đều bật sẵn.
Cloudways thì cần bật thủ công trong Application Settings > Settings & Packages. Hetzner managed hosting cần thêm directive trong domain config. OVH dùng Apache, thêm cấu hình trong .htaccess. Bluehost, HostGator dạng cPanel thường không hỗ trợ — dùng Cloudflare free plan phía trước là giải pháp nhanh nhất.
Compile ngx_brotli từ source khi nào cần?
Nếu bạn chạy distro không có package (CentOS, Rocky Linux, AlmaLinux) hoặc build Nginx custom, bạn sẽ cần compile module:
# Cài build tools
sudo apt install build-essential libpcre3-dev libssl-dev zlib1g-dev libbrotli-dev git
# Lấy source Nginx (khớp version đang chạy)
NGINX_VERSION=$(nginx -v 2>&1 | grep -oP '\d+\.\d+\.\d+')
wget https://nginx.org/download/nginx-$NGINX_VERSION.tar.gz
tar xf nginx-$NGINX_VERSION.tar.gz
cd nginx-$NGINX_VERSION
# Clone module
git clone --recursive https://github.com/google/ngx_brotli.git
# Build dynamic module
./configure --with-compat --add-dynamic-module=./ngx_brotli
make modules
sudo cp objs/ngx_http_brotli_filter_module.so /etc/nginx/modules/
sudo cp objs/ngx_http_brotli_static_module.so /etc/nginx/modules/Sau đó thêm load_module vào nginx.conf và cấu hình như phần trên.
Các lỗi thường gặp khi bật Brotli?
Lỗi “unknown directive brotli”: Module chưa được load. Kiểm tra load_module trong nginx.conf và chắc chắn file .so tồn tại trong /etc/nginx/modules/.
Brotli không hoạt động qua HTTP: Đúng rồi. Trình duyệt chỉ gửi Accept-Encoding: br qua HTTPS. Đảm bảo site đã bật SSL.
CPU tăng sau khi bật Brotli: Có thể level quá cao. Giảm brotli_comp_level xuống 4 nếu VPS yếu. Hoặc dùng pre-compress static assets để giảm tải.
File .br cũ sau khi update theme/plugin: Xóa file .br cũ và chạy lại lệnh pre-compress. Hoặc setup script tự động chạy sau mỗi lần update.
Tổng kết
Bật Brotli cho WordPress trên Nginx là một trong những tối ưu đơn giản nhất mà bạn có thể làm ngay hôm nay: cài package, thêm vài dòng config, reload Nginx. Không cần thay đổi code WordPress, không cần plugin, không ảnh hưởng đến trình duyệt cũ. Trung bình giảm 15-26% dung lượng text content, cải thiện LCP 50-150ms trên mobile, tiết kiệm băng thông đáng kể.
Mình khuyến nghị cấu hình level 6 cho dynamic content, pre-compress level 11 cho static assets, và luôn giữ gzip làm fallback. Ba bước cài, cấu hình, kiểm tra — xong trong 10 phút.
Nếu bạn gặp vấn đề gì trong quá trình cấu hình, cứ để lại bình luận bên dưới, mình sẽ hỗ trợ.
