Giới thiệu

Khi tối ưu hiệu suất frontend, phần lớn developer thường nghĩ ngay đến việc giảm kích thước bundle, lazy load hình ảnh, hay sử dụng CDN. Tuy nhiên, có một lớp tối ưu cực kỳ quan trọng mà nhiều người bỏ quên: đó là HTTP Headers.

Các HTTP Header như Cache-Control, ETag, Content-Encoding… không chỉ dành cho backend. Chúng là công cụ mạnh mẽ giúp frontend dev kiểm soát cách trình duyệt cache, nén, và xác thực dữ liệu — từ đó cải thiện tốc độ tải trang và trải nghiệm người dùng.

Trong bài viết này, chúng ta sẽ đi sâu vào 3 HTTP Header quan trọng nhất ảnh hưởng trực tiếp đến hiệu suất: Cache-Control, ETag, và Content-Encoding.

---

1. Cache-Control – Kiểm soát bộ nhớ đệm hiệu quả

Cache-Control là HTTP Header cho phép bạn xác định cách và thời gian trình duyệt hoặc proxy nên lưu trữ response từ server.

Ví dụ:

Cache-Control: public, max-age=31536000, immutable

Các chỉ thị phổ biến:

• public: Response có thể được cache bởi bất kỳ cache nào (kể cả CDN).
• private: Chỉ cache trên client (trình duyệt), không qua proxy.
• no-cache: Cho phép cache, nhưng phải revalidate với server mỗi lần.
• no-store: Không được lưu cache dưới bất kỳ hình thức nào.
• max-age=<seconds>: Thời gian sống của cache tính bằng giây.
• immutable: Cho trình duyệt biết rằng file này sẽ không bao giờ thay đổi.

Trường hợp thực tế:

Trong một project sử dụng Next.js, bạn có thể cấu hình headers cho static assets như sau:

// next.config.js
module.exports = {
  async headers() {
    return [
      {
        source: '/_next/static/(.*)',
        headers: [
          {
            key: 'Cache-Control',
            value: 'public, max-age=31536000, immutable',
          },
        ],
      },
    ];
  },
};

Kết quả: static file chỉ được tải một lần duy nhất, sau đó được cache vĩnh viễn trên browser → tăng tốc độ tải lại trang.

---

2. ETag – Xác thực thay đổi nội dung hiệu quả

ETag (Entity Tag) là một mã định danh duy nhất cho mỗi phiên bản của một resource. Trình duyệt sẽ lưu ETag và gửi kèm nó trong request tiếp theo với header If-None-Match. Nếu server thấy ETag trùng khớp, nó sẽ trả về 304 Not Modified thay vì gửi lại toàn bộ nội dung.

Ví dụ response:

ETag: "abc123"

Request tiếp theo:

GET /style.css
If-None-Match: "abc123"

Lợi ích:

• Tiết kiệm băng thông (không gửi lại file nếu không thay đổi).
• Giảm thời gian phản hồi.

Lưu ý:

• Nếu bạn dùng CDN (ví dụ: Cloudflare), ETag có thể gây ra vấn đề nếu không cấu hình đồng bộ.
• Nên chọn giữa ETag và Cache-Control max-age tùy từng use case.

---

3. Content-Encoding – Nén dữ liệu để truyền tải nhanh hơn

Content-Encoding cho biết server đã nén response trước khi gửi đi. Trình duyệt sẽ tự động giải nén khi nhận được.

Các định dạng phổ biến:

• gzip: Phổ biến, hiệu quả, được hỗ trợ rộng rãi.
• br (Brotli): Hiệu quả nén tốt hơn gzip, nhưng cần cấu hình thêm.

Ví dụ:

Content-Encoding: br

Kiểm tra bằng DevTools:

1. Mở tab Network.
2. Bấm vào file .js hoặc .css
3. Xem phần Response Headers → Content-Encoding

Lưu ý khi cấu hình:

• Next.js hỗ trợ nén Brotli tự động khi dùng next start.
• Với custom server (nginx, express), bạn cần bật thủ công:

Nginx example:

gzip on;
gzip_types text/plain text/css application/javascript application/json;
brotli on;
brotli_types text/css application/javascript application/json;

---

Tổng kết: Áp dụng thực tiễn

Dưới đây là checklist ngắn giúp bạn tận dụng HTTP Headers tối đa:

• Dùng Cache-Control: max-age=31536000, immutable cho static assets.
• Kích hoạt ETag cho những resource có khả năng thay đổi.
• Dùng Content-Encoding: br nếu server hỗ trợ.
• Dùng DevTools để kiểm tra headers đã được thiết lập đúng chưa.
• Hiểu rõ cơ chế cache của browser và CDN để tránh lỗi "không thấy cập nhật".

Việc làm chủ HTTP Headers sẽ giúp bạn:

• Tăng tốc độ tải trang đáng kể.
• Giảm chi phí băng thông.
• Tối ưu điểm Lighthouse dễ dàng hơn.

Hãy xem HTTP Headers như một phần không thể thiếu trong chiến lược tối ưu frontend của bạn.