Nén Gzip, Brotli Là Gì? Cách Bật Nén Văn Bản Cho Website

Nén Gzip, Brotli là gì và nén những loại tệp nào?

Nén Gzip, Brotli là hai thuật toán nén máy chủ dùng để thu nhỏ tệp trước khi truyền, trình duyệt nhận xong thì tự giải nén. Theo web.dev của Google, cả hai cho kết quả rõ nhất trên tài nguyên dạng chữ: CSS, JavaScript và HTML. Với ảnh đã nén sẵn bằng cách khác thì nén thêm gần như không lợi gì.

Bài tối ưu mã hóa và dung lượng truyền của web.dev ghi tỷ lệ nén trên tệp chữ lớn thường tới 70 đến 90%. Dòng thứ hai của bảng là tệp đã qua bước minify code, nén xong vẫn giảm thêm hơn một nửa.

Nén Gzip, Brotli dành cho tệp chữ. Ảnh có cách nén riêng của ảnh.

Trình duyệt và máy chủ thỏa thuận kiểu nén ra sao?

Trình duyệt và máy chủ thỏa thuận kiểu nén qua hai header HTTP. Lúc xin một tệp, trình duyệt gửi header Accept-Encoding để báo nó hiểu những thuật toán nén nào. Máy chủ chọn một thuật toán, nén tệp, rồi trả về kèm header Content-Encoding ghi tên thuật toán đã dùng.

Theo web.dev, mọi trình duyệt hiện đại đều báo hỗ trợ Gzip và Brotli trong Accept-Encoding. Phần còn lại là việc của máy chủ: máy chủ phải được cấu hình để nén.

Trình duyệt đã sẵn sàng nhận tệp nén, website chỉ cần máy chủ bật nén.

Nên chọn Brotli hay Gzip cho website của mình?

Nên chọn Brotli làm thuật toán chính và giữ Gzip làm dự phòng. Tài liệu Lighthouse của Google ghi Brotli giảm dung lượng tệp nhiều hơn các thuật toán khác, còn Gzip được mọi trình duyệt lớn hỗ trợ nhưng kém hiệu quả hơn Brotli. Máy chủ bật cả hai thì trình duyệt nào cũng nhận được tệp nén.

web.dev lưu ý với tệp nén ngay lúc có yêu cầu, mức ở giữa thang thường cân bằng giữa tỷ lệ nén và tốc độ. Tệp tĩnh nén sẵn từ trước thì dùng được mức cao nhất.

Bật Brotli, giữ Gzip làm dự phòng, và để mức nén cao cho tệp tĩnh nén sẵn.

Kiểm tra website đã bật nén Gzip, Brotli chưa thế nào?

Kiểm tra website đã bật nén chưa bằng cách đọc header content-encoding của từng tệp trong Chrome DevTools, hoặc chạy Lighthouse. Lighthouse gom mọi phản hồi dạng chữ không có content-encoding là br, gzip hoặc deflate, rồi ước số byte bớt được nếu nén bằng Gzip.

Bốn bước kiểm bằng Chrome DevTools

1. Mở DevTools: bấm Control+Shift+J, hoặc Command+Option+J trên Mac, rồi chọn tab Network.
2. Tải lại trang: bấm vào yêu cầu của tệp HTML, CSS hoặc JavaScript cần kiểm.
3. Mở tab Headers: tìm dòng content-encoding trong phần Response Headers.
4. So dung lượng: bật large request rows, cột Size hiện dung lượng đã nén ở trên, chưa nén ở dưới.

Lighthouse không nêu tên phản hồi nhỏ hơn 1,4 KiB, hoặc phản hồi chỉ bớt được dưới 10% dung lượng. Từ Lighthouse 13, phần kiểm này nằm trong mục Document request latency. Chi tiết ở tài liệu Lighthouse về nén văn bản.

Tệp HTML, CSS, JavaScript nào cũng có content-encoding là br hoặc gzip thì website đã bật nén.

Bật nén Gzip, Brotli trên máy chủ bằng cách nào?

Bật nén Gzip, Brotli là việc cấu hình ở máy chủ web hoặc ở CDN, không nằm trong mã của trang. Theo web.dev, phần mềm máy chủ thường có sẵn mô-đun nén tài nguyên dạng chữ, còn CDN thường tự nén các tài nguyên đủ điều kiện. Với WordPress, tài liệu Lighthouse ghi bật nén trong cấu hình máy chủ web.

Ba nơi bật nén

• Máy chủ web: bật mô-đun nén Brotli và Gzip trong cấu hình máy chủ, áp cho HTML, CSS, JavaScript.
• CDN: bật tính năng nén của CDN, CDN lo cả nén lúc có yêu cầu lẫn nén sẵn.
• Hosting dùng chung: hỏi nhà cung cấp hosting. web.dev ghi việc cấu hình máy chủ trả tệp nén là trách nhiệm của bên hosting.

Các việc tối ưu code khác cho WordPress nằm ở bài SEO WordPress #15: hình ảnh và code.

Bật nén ở một nơi là đủ, sau đó kiểm lại header content-encoding trên trang thật.

Nén Gzip, Brotli nằm ở đâu trong bảng chuẩn SQA-200?

Nén Gzip, Brotli là mục P1.05 trong bảng chuẩn SQA-200, thuộc trụ cột I về kỹ thuật và Core Web Vitals, trọng số 1 điểm. Chuẩn đạt của mục này: bật nén Brotli hoặc Gzip trên máy chủ để giảm dung lượng HTML, CSS, JS khi truyền.

Các mục đứng cạnh P1.05 trong trụ cột I

• P1.03 CLS Minimization: cLS dưới 0,1 nhờ khai sẵn width và height cho ảnh, media.
• P1.04 TTFB Server Response: tTFB dưới 300 ms nhờ cache ở máy chủ, tối ưu PHP và chỉ mục cơ sở dữ liệu.
• P1.06 WebP / AVIF Images: chuyển ảnh raster sang định dạng WebP hoặc AVIF với mức nén phù hợp.
• P1.07 Native Lazy Loading: đặt loading="lazy" cho mọi ảnh và iframe nằm ngoài màn hình đầu.

Toàn bộ 99 mục kiểm, chuẩn đạt và điểm từng mục nằm ở bài SQA-200 là gì, mục này ở dòng P1.05 Gzip / Brotli Compression.

P1.05 đạt khi mọi tệp HTML, CSS, JavaScript của website được trả về ở dạng nén Brotli hoặc Gzip.

Người làm website hay hỏi gì về nén Gzip, Brotli?

Người làm website hay hỏi ba câu về nén Gzip, Brotli: đã minify rồi có cần nén nữa không, tệp nhỏ có cần nén không, và nén có làm máy chủ chậm đi không. Ba câu trả lời dưới đây lấy từ tài liệu Lighthouse và web.dev của Google.

Đã minify code rồi thì có cần nén Gzip, Brotli nữa không?

Vẫn cần. Minify bỏ ký tự thừa trong tệp, còn Gzip và Brotli nén tệp lúc truyền, hai việc nằm ở hai lớp khác nhau. Ví dụ của web.dev cho thấy tệp angular đã minify nặng 173 KiB, nén Brotli còn 53 KiB. Trong SQA-200, hai việc là hai mục riêng: P1.10 và P1.05.

Tệp nhỏ có cần nén không?

Tệp rất nhỏ nén không lợi bao nhiêu. Lighthouse không nêu tên phản hồi nhỏ hơn 1,4 KiB, và cũng bỏ qua phản hồi mà nén chỉ bớt được dưới 10% dung lượng. Vì vậy báo cáo chỉ liệt kê những tệp đáng nén. Việc cần làm là bật nén chung cho các loại tệp chữ, không chọn từng tệp.

Nén ở mức cao nhất có làm máy chủ phản hồi chậm không?

Có thể. Theo web.dev, mức nén cao cho tệp nhỏ hơn nhưng cần nhiều thời gian nén hơn. Với tệp nén ngay lúc có yêu cầu, mức ở giữa thang thường cân bằng. Tệp tĩnh thì nén sẵn một lần ở mức cao nhất rồi dùng lại, nên không làm tăng TTFB của mỗi yêu cầu.

Nén là bước cuối trên đường truyền: tệp đã gọn nhờ minify, rồi được nén khi gửi đi.