Browser Caching Là Gì? Cách Đặt Cache-Control Cho Website

Browser caching là gì và hoạt động như thế nào?

Browser caching là việc trình duyệt lưu tạm một tài nguyên theo thời hạn máy chủ đưa ra, và lần sau dùng bản đã lưu thay cho việc tải lại từ mạng. Theo web.dev, mọi yêu cầu HTTP đều đi qua bộ nhớ đệm của trình duyệt trước. Có bản còn hạn thì trình duyệt dùng luôn, khỏi tốn độ trễ mạng.

Tệp chưa đổi thì máy chủ trả 304 Not Modified, một phản hồi rất nhỏ báo trình duyệt cứ dùng bản đang có. Phần giải thích đầy đủ ở bài HTTP Cache của web.dev.

Cache-Control quyết định giữ bao lâu, ETag quyết định có phải tải lại hay không.

Nên đặt Cache-Control thế nào cho từng loại tệp?

Đặt Cache-Control theo việc URL của tệp có mang phiên bản hay không. Tệp tĩnh có hash hoặc số phiên bản trong tên, nội dung không bao giờ đổi, thì đặt max-age=31536000, tức một năm. Tệp không mang phiên bản, như trang HTML, thì dùng no-cache để trình duyệt hỏi lại máy chủ trước khi dùng bản đã lưu.

Không khai Cache-Control không có nghĩa là tắt cache. Theo web.dev, lúc đó trình duyệt tự đoán cách lưu hợp với từng loại nội dung, nên website mất quyền kiểm soát.

Tệp có hash trong tên thì cache một năm, trang HTML thì luôn hỏi lại máy chủ.

Cache một năm thì cập nhật tệp bằng cách nào?

Cache một năm thì cập nhật tệp bằng cách đổi URL của tệp mỗi khi nội dung đổi. Cách quen dùng là nhúng một mã hash của nội dung vào tên tệp, ví dụ style.x234dff.css. Nội dung đổi thì hash đổi, tên tệp đổi, và trình duyệt buộc phải tải bản mới.

Tài liệu Lighthouse nêu đúng rủi ro này: thời hạn cache dài thì người dùng có thể không thấy bản cập nhật của tệp tĩnh. Cách tránh là cấu hình công cụ build nhúng hash vào tên tệp, để mỗi phiên bản có một URL riêng. Lighthouse cũng ghi thời hạn dài hơn không phải lúc nào cũng hay hơn, website tự quyết mức hợp với tài nguyên của mình.

Hai kiểu URL và cách cache

• URL có phiên bản: tên tệp mang hash hoặc số phiên bản, cache một năm, cập nhật bằng cách đổi tên tệp.
• URL không phiên bản: tên tệp cố định, dùng no-cache kèm ETag để trình duyệt xác thực lại nhanh.

Thời hạn dài chỉ an toàn khi tên tệp đổi theo nội dung.

Kiểm tra cache của website bằng cách nào?

Kiểm tra cache bằng báo cáo Lighthouse và tab Network của Chrome DevTools. Lighthouse nêu mọi tài nguyên tĩnh chưa được cache, kèm thời hạn cache hiện tại và lượng dữ liệu người dùng bớt được nếu tệp đó được cache. Tab Network cho xem header Cache-Control của từng tệp.

Lighthouse coi một tài nguyên là cache được khi đủ ba điều kiện

• Loại tệp: là font, ảnh, tệp media, script hoặc stylesheet.
• Mã trạng thái: phản hồi có mã HTTP 200, 203 hoặc 206.
• Chính sách: không khai rõ no-cache.

Trong DevTools: mở tab Network, bấm vào tên một yêu cầu, chọn tab Headers và đọc dòng Cache-Control. Cột Size cho biết tệp được lấy từ bộ nhớ đệm hay từ mạng. Chi tiết ở tài liệu Lighthouse về chính sách cache.

Kiểm bằng lần tải thứ hai: tệp tĩnh lấy từ bộ nhớ đệm là cache đang chạy.

Bật browser caching cho website ở đâu?

Bật browser caching ở nơi tạo ra phản hồi HTTP: máy chủ web, CDN hoặc plugin cache của CMS. web.dev ghi phần quan trọng nhất của việc cấu hình cache là các header máy chủ thêm vào mỗi phản hồi, và cách cấu hình khác nhau theo từng máy chủ như Apache, nginx.

Ba nơi cấu hình

• Máy chủ web: khai Cache-Control theo loại tệp trong cấu hình máy chủ.
• CDN: đặt quy tắc cache ở CDN, tệp tĩnh được phục vụ từ điểm gần người dùng.
• WordPress: dùng plugin cache để khai header cho tệp tĩnh. Từng lớp cache của WordPress nằm ở bài SEO WordPress #16: cache và kết nối.

Browser caching khác cache phía máy chủ. Cache phía máy chủ lưu sẵn trang đã dựng để giảm TTFB, còn browser caching lưu tệp tĩnh ở máy người dùng.

Khai header ở một nơi, rồi kiểm lại trên trang thật bằng tab Network.

Browser caching nằm ở đâu trong bảng chuẩn SQA-200?

Browser caching là mục P1.11 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: đặt Cache-Control max-age một năm cho tài nguyên tĩnh. Mục này đứng giữa mục minify và mục CDN của trụ cột.

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

• P1.09 Unused JS/CSS Elimination: gỡ hoặc hoãn tải CSS, JavaScript không dùng bằng code splitting và tree shaking.
• P1.10 Minify HTML/CSS/JS: rút gọn mọi tệp mã ở bản chạy thật: bỏ khoảng trắng, chú thích và định dạng thừa.
• P1.12 Edge CDN Integration: phân phối tài nguyên tĩnh qua CDN (Cloudflare, Fastly) để giảm độ trễ.
• P1.13 SSL/TLS Security: mã hóa TLS 1.3 trên mọi điểm truy cập của tên miền, kèm HSTS preload.

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.11 Browser Cache Headers.

P1.11 đạt khi tài nguyên tĩnh của website trả về Cache-Control với max-age một năm.

Người làm website hay hỏi gì về browser caching?

Người làm website hay hỏi ba câu về browser caching: không khai Cache-Control thì sao, vì sao sửa CSS rồi mà khách vẫn thấy bản cũ, và trang HTML có nên cache một năm 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.

Không khai Cache-Control thì trình duyệt có cache không?

Có. Theo web.dev, bỏ header Cache-Control không tắt HTTP cache. Trình duyệt sẽ tự đoán cách lưu hợp với từng loại nội dung. Như vậy website không kiểm soát được tệp nào được giữ bao lâu, và Lighthouse vẫn nêu những tệp tĩnh chưa có chính sách cache rõ ràng trong báo cáo.

Vì sao sửa CSS rồi mà khách vẫn thấy bản cũ?

Vì trình duyệt của khách còn bản CSS cũ chưa hết hạn, và tên tệp không đổi nên trình duyệt không biết có bản mới. Khi tệp được cache dài mà URL giữ nguyên, website không có cách nào báo cho trình duyệt. Cách xử lý là đổi tên tệp theo nội dung, thường là nhúng hash vào tên tệp lúc build.

Trang HTML có nên cache một năm không?

Không. Trang HTML gần như không mang phiên bản trong URL, nên cache dài thì người đọc không thấy nội dung mới. web.dev gợi ý dùng no-cache cho loại URL này: trình duyệt vẫn lưu trang nhưng hỏi lại máy chủ trước khi dùng, và nhờ ETag, máy chủ chỉ cần trả 304 khi trang chưa đổi.

Tệp tĩnh có hash thì cache dài, trang HTML thì xác thực lại mỗi lần.