Mình đã test Brotli compression trên 5 site WordPress sản phẩm trong 3 tháng qua, và kết quả khá bất ngờ: kích thước trang giảm trung tích 64%, Core Web Vitals LCP cải thiện 0.4 giây. So với Gzip mặc định mà hầu hết hosting để sẵn, Brotli mang lại lợi ích ngay lập tức mà không cần cài thêm plugin nào.
Bài viết này mình sẽ hướng dẫn bạn cấu hình Brotli compression cho WordPress từ A đến Z, bao gồm cả Nginx, OpenLiteSpeed và Apache. Mọi lệnh đều test sẵn, bạn copy-paste là chạy được.
Brotli Compression La Gi Va Vi Sao No Hon Gzip?
Brotli là thuật toán nén do Google phát triển, ra mắt năm 2015. So với Gzip, Brotli nén tốt hơn 15-25% cho file HTML, CSS, JavaScript. Đặc biệt với font web và JSON API, Brotli giảm đến 30% kích thước so với Gzip mức cao nhất.
Khác biệt lớn nhất nằm ở cấp độ nén. Gzip tối đa level 9, Brotli tối đa level 11. Ở level 11, Brotli chậm hơn khi nén nhưng với cache server thì điều này không thành vấn đề vì bạn chỉ nén một lần.
Kiem Tra Website Da Bat Brotli Chua?
Trước khi cấu hình, bạn cần kiểm tra xem server hiện tại đã bật Brotli chưa. Cách nhanh nhất là dùng lệnh curl kiểm tra header Content-Encoding của phản hồi từ server.
Chạy lệnh sau trên terminal:
curl -sI -H "Accept-Encoding: br, gzip" https://thienlv.com/ | grep -i content-encodingNếu kết quả trả về content-encoding: br thì Brotli đã bật. Nếu chỉ thấy content-encoding: gzip hoặc không có header nào, bạn cần cấu hình thêm.
Cách thứ hai là dùng trang gift-of-speed.com/brotli-test/ để kiểm tra trực tuyến. Nhập URL vào là biết ngay kết quả.
Cau Hinh Brotli Cho Nginx WordPress
Nginx là web server phổ biến nhất cho WordPress hiện nay. Từ Nginx 1.11.6, module Brotli có sẵn dưới dạng dynamic module. Tuy nhiên, không phải bản Nginx nào cũng biên dịch sẵn module này.
Bước 1: Kiểm tra Nginx đã có module Brotli chưa:
nginx -V 2>&1 | grep brotliNếu kết quả chứa brotli thì module đã sẵn sàng. Nếu trống, bạn cần cài thêm. Trên Ubuntu/Debian:
sudo apt install nginx-module-brotliTrên CentOS/AlmaLinux/Rocky Linux, bạn cần cài qua repository nguyên hoặc biên dịch lại Nginx.
Bước 2: Kích hoạt module trong nginx.conf. Thêm hai dòng này vào phần trên cùng, sau user và worker_processes:
# /etc/nginx/nginx.conf
load_module modules/ngx_http_brotli_filter_module.so;
load_module modules/ngx_http_brotli_static_module.so;Bước 3: Cấu hình Brotli trong server block. Thêm vào block server hoặc http trong nginx.conf:
# Brotli configuration
brotli on;
brotli_comp_level 6;
brotli_types text/plain text/css text/javascript application/javascript application/json image/svg+xml application/xml+rss text/xml application/xhtml+xml;Mức nén brotli_comp_level 6 là điểm cân bằng tốt nhất giữa tốc độ và tỷ lệ nén. Mình đã test level 11 cho kết quả nén tốt hơn chỉ 2-3% nhưng tốn CPU gấp 4 lần.
Bước 4: Giữ lại Gzip làm fallback. Không phải browser nào cũng hỗ trợ Brotli, nên bạn cần giữ Gzip hoạt động song song:
# Gzip fallback (dat TRUOC brotli)
gzip on;
gzip_comp_level 6;
gzip_types text/plain text/css text/javascript application/javascript application/json image/svg+xml application/xml+rss;
# Brotli (uu tien cao hon)
brotli on;
brotli_comp_level 6;
brotli_types text/plain text/css text/javascript application/javascript application/json image/svg+xml application/xml+rss;Nginx tự động chọn Brotli nếu browser hỗ trợ, nếu không sẽ fallback xuống Gzip.
Bước 5: Test config và reload:
sudo nginx -t
sudo systemctl reload nginxSau khi reload, kiểm tra lại bằng lệnh curl ở trên. Kết quả phải trả về content-encoding: br.
Cau Hinh Brotli Cho OpenLiteSpeed
Nếu bạn đang dùng OpenLiteSpeed cho WordPress giống mình, Brotli đã tích hợp sẵn từ phiên bản 1.6. Bạn không cần cài thêm gì cả.
Bước 1: Mở WebAdmin Console (thường ở port 7080). Vào Server Configuration > Tuning > GZIP.
Bước 2: Kéo xuống phần Enable Brotli Compression, chọn Yes. Mức nén khuyên dùng là 6.
Bước 3: Trong cùng trang, đảm bảo GZIP Compression vẫn bật ở mức 6 làm fallback.
Bước 4: Nhấn Save, sau đó vào Actions > Graceful Restart để áp dụng thay đổi.
Bước 5: Kiểm tra lại bằng curl. OpenLiteSpeed tự động ưu tiên Brotli khi browser hỗ trợ.
Mình đã benchmark OpenLiteSpeed với Brotli so với Nginx với Brotli trên cùng VPS 2GB RAM. Kết quả: thời gian phản hồi trung bình nhanh hơn 12% cho OpenLiteSpeed, có lẽ nhờ LSCache cache module hoạt động tối ưu hơn.
Cau Hinh Brotli Cho Apache
Nếu hosting của bạn chạy Apache, module mod_brotli có từ Apache 2.4.26. Hầu hết shared hosting hiện đại đã bật sẵn. Trên VPS, bạn cần kích hoạt:
sudo a2enmod brotli
sudo systemctl restart apache2Sau đó thêm vào .htaccess hoặc virtual host config:
<IfModule mod_brotli.c>
SetOutputFilter BROTLI_COMPRESS
BrotliCompressionQuality 6
BrotliFilterNote Input brotli_in
BrotliFilterNote Output brotli_out
</IfModule>Giữ lại mod_deflate (Gzip) bên dưới làm fallback cho các client không hỗ trợ Brotli.
Brotli Static: Pre-compress CSS Va JavaScript
Một mẹo mạnh mẽ mà ít người biết: pre-compress file tĩnh. Thay vì nén Brotli mỗi lần có request, bạn nén sẵn file .css và .js thành .br. Server chỉ việc phục vụ file đã nén, CPU gần như không tốn.
Đối với Nginx, bật brotli_static:
brotli_static on;Sau đó pre-compress các file tĩnh:
# Cai dat brotli command-line tool
sudo apt install brotli
# Pre-compress toan bo CSS va JS trong theme
find /var/www/thienlv.com/public_html/wp-content -name "*.css" -exec brotli -q 11 {} \;
find /var/www/thienlv.com/public_html/wp-content -name "*.js" -exec brotli -q 11 {} \;Lệnh này tạo file style.css.br bên cạnh style.css. Khi Nginx thấy brotli_static on và browser hỗ trợ Brotli, nó sẽ phục vụ file .br ngay lập tức.
Lưu ý: mỗi lần bạn cache plugin hoặc cập nhật theme, cần chạy lại lệnh pre-compress. Bạn có thể tạo cron job tự động:
# Crontab - chay moi 6 gio
0 */6 * * * find /var/www/thienlv.com/public_html/wp-content -name "*.css" -newer /tmp/brotli_marker -exec brotli -q 11 {} \; && find /var/www/thienlv.com/public_html/wp-content -name "*.js" -newer /tmp/brotli_marker -exec brotli -q 11 {} \; && touch /tmp/brotli_markerBrotli Void Plugin Cache WordPress?
Câu trả lời ngắn: không. Plugin cache như WP Rocket, LiteSpeed Cache, W3 Total Cache đều tương thích tốt với Brotli ở mức server. Compression xảy ra ở lớp web server, trước khi plugin cache can thiệp.
Tuy nhiên, một số plugin cache có tùy chọn compression riêng. Nếu bạn đã bật Brotli ở server level, hãy tắt compression trong plugin để tránh nén hai lần, gây lãng phí CPU. Trong WP Rocket, phần Optimize CSS Delivery không liên quan, nhưng trong W3 Total Cache, bạn nên tắt Enable HTTP compression nếu server đã xử lý.
Ket Qua Benchmark Thuc Te Sau 3 Thang
Mình đã theo dõi 5 site WordPress trên cùng VPS 2GB RAM (Vultr HF) trong 3 tháng liên tục. Cấu hình giống hệt nhau, chỉ khác nhau ở thuật toán nén.
Kết quả trung bình trên 5 site:
- Kích thước trang giảm 64% so với không nén, 17% so với Gzip level 6
- LCP (Largest Contentful Paint) cải thiện 0.4 giây trung bình
- TTFB không thay đổi đáng kể (Brotli tốn CPU hơn nhưng với cache thì khác biệt chưa tới 10ms)
- Băng thông server giảm 22% so với Gzip
- Core Web Vitals: 4/5 site đạt xanh LCP, trước đó chỉ 2/5
Riêng site có nhiều hình ảnh, cải thiện ít hơn vì Brotli không nén được JPEG, PNG, WebP (đã nén sẵn). Lợi ích chính nằm ở HTML, CSS, JS và font web.
Cac Loi Thuong Gap Khi Cau Hinh Brotli
Loi 1: Brotli khong hoat dong sau khi reload Nginx. Nguyên nhân thường là module ngx_http_brotli_filter_module.so không load đúng. Kiểm tra lại đường dẫn trong nginx.conf, đảm bảo file .so tồn tại trong /usr/share/nginx/modules/.
Loi 2: Website bang trang sau khi bat Brotli. Điều này xảy ra khi browser không hỗ trợ Brotli nhưng server vẫn gửi content-type sai. Giải pháp: đảm bảo Gzip fallback nằm trước Brotli trong config, Nginx sẽ tự đàm phán đúng.
Loi 3: CPU tang cao tren shared hosting. Shared hosting thường giới hạn CPU. Nếu bật brotli_comp_level 11, mỗi request tốn nhiều CPU hơn. Hạ xuống level 4 hoặc 5 nếu hosting phàn nàn.
Loi 4: Cloudflare da bat Brotli, khong can bat o server. Nếu site đi qua Cloudflare proxy (orange cloud), Cloudflare tự động nén Brotli cho bạn. Tuy nhiên, mình vẫn khuyên bật Brotli ở origin vì kết nối Cloudflare-to-origin cũng cần nén, và khi Cloudflare fetch từ origin, dữ liệu nén tốn ít băng thông hơn.
Co Nen Bat Brotli Cho Moi Site WordPress?
Câu trả lời ngắn: có, ngoại trừ một trường hợp duy nhất. Nếu site của bạn 100% nội dung là hình ảnh và video (gallery site, portfolio), Brotli không giúp nhiều vì media đã nén sẵn. Trong mọi trường hợp còn lại, Brotli luôn đáng để bật.
Với e-commerce (WooCommerce), Brotli đặc biệt có lợi vì trang sản phẩm thường có nhiều JSON, CSS, JS. Mình thấy tốc độ tải trang sản phẩm cải thiện rõ rệt sau khi bật Brotli.
Nếu bạn đang dùng managed WordPress hosting (Kinsta, Cloudways, RunCloud), Brotli thường đã bật sẵn. Kiểm tra bằng lệnh curl, nếu đã có rồi thì không cần làm gì thêm.
Tom Tat: Brotli La Quick Win Dau Tu 15 Phut
Brotli compression là một trong những tối ưu hiệu quả nhất mà bạn có thể hoàn thành trong 15 phút. Không cần plugin, không cần thay đổi code WordPress, chỉ cần cấu hình web server. Kết quả đo được ngay: trang nhỏ hơn, load nhanh hơn, Core Web Vitals tốt hơn.
Nếu bạn chưa bật Brotli, hãy làm ngay hôm nay. Nếu đã bật Gzip, chuyển sang Brotli chỉ tốn thêm vài dòng config mà lợi ích kéo dài mãi mãi. Kết hợp với Redis Object Cache và Nginx FastCGI Cache, bạn sẽ có một site WordPress nhanh nhất có thể.
