Login

Nginx gzip và cache file tĩnh: tăng tốc website không cần sửa code

  • author-image

    Nguyễn Đình Cường

  • blog-tag
  • blog-comment 0 comment
  • created-date 09 Nov, 2026
blog-thumbnail

Trước khi nghĩ đến chuyện viết lại code cho nhanh, hãy xem máy chủ web đã được cấu hình tốt chưa. Chỉ với vài dòng trong Nginx, bạn có thể giảm lượng dữ liệu truyền đi và để trình duyệt tái sử dụng file đã tải. Hiệu quả thường thấy rõ ngay lập tức.

Nén nội dung bằng gzip

Các file văn bản như HTML, CSS, JavaScript, JSON nén rất tốt, thường giảm đáng kể dung lượng khi truyền. Trình duyệt tự giải nén nên người dùng không nhận ra gì ngoài việc trang tải nhanh hơn. Thêm vào khối http hoặc server:

gzip on;
gzip_comp_level 5;
gzip_min_length 1024;
gzip_vary on;
gzip_proxied any;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml image/svg+xml;

Giải thích:

  • gzip_comp_level: mức nén 1 đến 9. Mức cao hơn nén nhỏ hơn nhưng tốn CPU, mức 4 đến 6 là cân bằng.
  • gzip_min_length: bỏ qua file quá nhỏ vì nén không đáng.
  • gzip_vary on: thêm header Vary: Accept-Encoding để các bộ nhớ đệm trung gian phân biệt bản nén và không nén.
  • gzip_types: danh sách loại nội dung cần nén. HTML luôn được nén sẵn khi bật gzip.

Đừng nén ảnh JPEG, PNG, video hay file ZIP vì chúng đã được nén sẵn, chỉ phí CPU.

Cache file tĩnh ở trình duyệt

File ảnh, CSS, JS ít thay đổi. Nếu bảo trình duyệt giữ chúng trong bộ nhớ đệm, lần truy cập sau sẽ không cần tải lại:

location ~* \.(css|js|png|jpg|jpeg|gif|svg|webp|woff2)$ {
    expires 30d;
    add_header Cache-Control 'public, max-age=2592000';
    access_log off;
}

Dòng expires 30d đã tự thêm header cache tương ứng, nên dòng add_header chỉ để minh họa cách điều chỉnh cụ thể. Bạn có thể chỉ giữ một trong hai. Dòng access_log off giúp log đỡ rác.

Vấn đề: sửa file mà người dùng vẫn thấy bản cũ

Cache dài hạn rất tốt cho tốc độ nhưng gây rắc rối khi bạn cập nhật file. Giải pháp phổ biến là đặt tên file kèm mã băm hoặc phiên bản, ví dụ app.3f9a1c.js. Khi nội dung đổi, tên đổi, trình duyệt coi như file mới. Hầu hết công cụ build hiện đại (Vite, webpack, Next.js) hỗ trợ sẵn tính năng này.

Quy tắc thực dụng:

  1. File có mã băm trong tên: cache rất dài.
  2. File HTML chính: cache ngắn hoặc không cache, để luôn trỏ tới đúng file mã băm mới.
  3. File API động: tùy nghiệp vụ, thường không cache ở trình duyệt.

Kiểm tra bằng curl

curl -I -H 'Accept-Encoding: gzip' https://example.com/assets/app.js

Trong kết quả, hãy tìm Content-Encoding: gzip và Cache-Control. Bạn cũng có thể mở tab Network trong công cụ phát triển của trình duyệt để xem kích thước truyền đi và trạng thái lấy từ cache.

Một số tối ưu liên quan

  • HTTP/2: bật bằng cách thêm http2 vào lệnh listen hoặc dùng chỉ thị tương ứng của phiên bản Nginx bạn đang chạy.
  • Brotli: thuật toán nén tốt hơn gzip, nhưng cần module bổ sung.
  • CDN: đưa file tĩnh đến gần người dùng hơn.
  • Nén và đổi định dạng ảnh: thường là mục có lợi nhất về dung lượng.

Cảnh báo khi chỉnh cấu hình

Luôn chạy sudo nginx -t rồi mới sudo systemctl reload nginx. Sau khi đổi, thử lại bằng chế độ ẩn danh hoặc xóa cache trình duyệt để chắc chắn bạn đang xem hành vi mới chứ không phải bản cache cũ.

Kết luận

Gzip giảm dữ liệu truyền đi, cache giúp tránh tải lại thứ không đổi. Hai thay đổi nhỏ trong Nginx này mang lại cải thiện đáng kể và gần như miễn phí. Hãy đo trước và sau để thấy hiệu quả thật trên website của bạn.

Muốn tìm hiểu thêm về cấu hình máy chủ và tối ưu hiệu năng, bạn có thể tham khảo các bài học tại codebem.com.

author_photo
Nguyễn Đình Cường

0 comment