Image HTTP cache headers

Image HTTP cache headers là gì?

Image HTTP cache headers là các dòng thông tin được máy chủ gửi kèm khi trả về hình ảnh (JPEG, PNG, WebP…), giúp trình duyệt và hệ thống phân phối nội dung (CDN) biết cách lưu tạm (cache) và khi nào nên tải lại ảnh đó. Hai header quan trọng nhất là Cache-Control và Expires. Ngoài ra còn có ETag, Last-Modified và Vary — những yếu tố hỗ trợ cơ chế kiểm tra tính mới của ảnh.

Tại sao quan trọng trong SEO?

Khi hình ảnh được lưu tạm hiệu quả, trang web tải nhanh hơn: thời gian render giảm, tỷ lệ thoát thấp hơn, trải nghiệm người dùng cải thiện — tất cả đều là tín hiệu xếp hạng gián tiếp mà Google xác nhận. Ngược lại, nếu ảnh không được cache đúng cách, mỗi lần tải lại đều gây yêu cầu HTTP mới, làm tăng độ trễ, tiêu tốn băng thông và làm chậm Core Web Vitals — đặc biệt là chỉ số Largest Contentful Paint (LCP).

Theo báo cáo của HTTP Archive (2024), hơn 38% trang web Việt Nam chưa thiết lập Cache-Control cho tài nguyên tĩnh như hình ảnh. Điều này đồng nghĩa với việc hàng triệu lượt truy cập bị mất tốc độ không cần thiết — và tiềm năng SEO bị bỏ ngỏ.

Cách hoạt động

Khi trình duyệt lần đầu tải một hình ảnh, máy chủ gửi kèm header như:

Cache-Control: public, max-age=31536000

Trình duyệt hiểu rằng: "Ảnh này có thể lưu ở bất kỳ đâu (public), và vẫn còn hiệu lực trong 31.536.000 giây — tức 1 năm". Trong khoảng thời gian đó, nếu người dùng quay lại trang hoặc chuyển sang trang khác có cùng ảnh, trình duyệt sẽ lấy trực tiếp từ bộ nhớ đệm thay vì gửi yêu cầu mới đến máy chủ.

Nếu hết hạn, trình duyệt có thể gửi yêu cầu kiểm tra lại (conditional request) bằng If-None-Match (dựa vào ETag) hoặc If-Modified-Since (dựa vào Last-Modified). Máy chủ phản hồi 304 Not Modified nếu ảnh chưa thay đổi — tiết kiệm băng thông và thời gian.

Hướng dẫn thực hiện

Dưới đây là các bước thiết lập cache header cho hình ảnh — áp dụng tùy theo nền tảng:

1. Xác định loại máy chủ: Apache, Nginx, Cloudflare, hoặc hosting quản lý (ví dụ: SiteGround, Kinsta).
2. Chọn chiến lược cache phù hợp:
   • Hình ảnh tĩnh (logo, icon, banner cố định): max-age=31536000 (1 năm)
   • Hình ảnh thường xuyên cập nhật (sản phẩm, blog): max-age=604800 (7 ngày)
   • Hình ảnh nhạy cảm (ảnh cá nhân, chứng minh thư): no-store hoặc no-cache
3. Cấu hình trên máy chủ:
   • Apache: Thêm vào .htaccess hoặc file cấu hình ảo:

     <FilesMatch "\.(jpg|jpeg|png|webp|gif|svg)$">
       Header set Cache-Control "public, max-age=31536000, immutable"
     </FilesMatch>

   • Nginx: Thêm trong khối location:

     location ~* \.(jpg|jpeg|png|webp|gif|svg)$ {
       expires 1y;
       add_header Cache-Control "public, immutable";
     }

   • Cloudflare: Dùng Page Rule với pattern *example.com/images/*, bật Cache Level → Cache Everything, kết hợp Edge Cache TTL (tối đa 1 năm).
4. Kiểm tra kết quả: Dùng DevTools (tab Network → chọn ảnh → xem phần Headers → Response Headers) hoặc công cụ trực tuyến như RedBot hoặc HTTP Checker.

Lỗi thường gặp

• Thiếu header hoàn toàn: Một số máy chủ mặc định không gửi Cache-Control cho ảnh. → Khắc phục: Cấu hình bắt buộc như hướng dẫn trên.
• Dùng max-age=0 hoặc no-cache cho ảnh tĩnh: Gây tải lại ảnh mỗi lần — làm chậm LCP. → Khắc phục: Phân loại ảnh rõ ràng, chỉ dùng no-cache khi cần kiểm tra thay đổi theo thời gian thực.
• Mâu thuẫn giữa nhiều header: Ví dụ vừa có Expires vừa có Cache-Control: max-age, trong khi giá trị không khớp. → Khắc phục: Ưu tiên Cache-Control; nếu dùng Expires, đảm bảo giá trị trùng với max-age tính theo giờ GMT.
• Không dùng immutable: Với ảnh có tên thay đổi khi nội dung thay đổi (hash-based filename như logo.a1b2c3.png), thêm immutable giúp trình duyệt bỏ qua kiểm tra 304 — tăng tốc độ tải lại. → Lưu ý: Chỉ áp dụng khi URL ảnh thay đổi khi ảnh thay đổi (tức dùng versioning hoặc content hashing).

Ví dụ thực tế

Một website thương mại điện tử tại Việt Nam (domain: shopgiay.vn) đã tối ưu cache cho ảnh sản phẩm:

Loại ảnh	Định dạng	Header áp dụng	Kết quả đo (WebPageTest)
Ảnh sản phẩm	.webp	Cache-Control: public, max-age=604800, immutable	LCP giảm từ 3.8s → 1.9s; 92% yêu cầu ảnh dùng cache
Logo & icon	.svg, .png	Cache-Control: public, max-age=31536000, immutable	Tỷ lệ cache hit đạt 99.7% sau 30 ngày
Ảnh blog (đăng mới hàng tuần)	.jpg	Cache-Control: public, max-age=604800	Giảm 68% băng thông ảnh so với trước

Sau 2 tháng, trang tăng 22% lưu lượng organic từ tìm kiếm hình ảnh (Google Images), đồng thời điểm Core Web Vitals trên Search Console đạt mức “Tốt” ở cả 3 chỉ số.

Câu hỏi thường gặp

Cache-Control và Expires khác nhau thế nào?

Cache-Control là header hiện đại, hỗ trợ nhiều chỉ thị (public/private, immutable, no-transform…), ưu tiên cao hơn Expires. Expires chỉ là thời điểm tuyệt đối (GMT), dễ sai nếu đồng hồ máy chủ không chuẩn. Hiện Google khuyến nghị dùng Cache-Control thay vì Expires — trừ trường hợp tương thích ngược với hệ thống cũ.

Có nên cache ảnh SVG như ảnh bitmap không?

Có, nhưng cần lưu ý: SVG là file văn bản, thường nhỏ và dễ nén. Nên đặt max-age cao (1 năm) và kết hợp immutable nếu tên file chứa hash. Tuy nhiên, nếu SVG được sinh động bằng JavaScript hoặc chứa dữ liệu nhạy cảm, cần cân nhắc no-store.

CDN có tự động cache ảnh không, hay phải cấu hình riêng?

Phần lớn CDN (Cloudflare, BunnyCDN, StackPath) đều cache ảnh theo mặc định — nhưng thời gian cache (TTL) thường ngắn (2–7 ngày) và không tuân theo header từ máy chủ gốc nếu không bật tính năng Respect Origin Headers. Vì vậy, bạn phải cấu hình cả ở máy chủ gốc lẫn CDN để đảm bảo nhất quán. Một số CDN cho phép ghi đè TTL bằng Page Rule hoặc API — tùy trường hợp.