Caching

Caching là gì?

Caching (gọi tắt là bộ nhớ đệm) là quá trình lưu tạm các tài nguyên của trang web — như file HTML, CSS, JavaScript, hình ảnh, phông chữ — tại một vị trí gần người dùng hơn (trình duyệt, máy chủ trung gian hoặc CDN), để lần truy cập sau không cần tải lại toàn bộ từ máy chủ gốc. Đây không phải là việc sao chép vĩnh viễn, mà là lưu có thời hạn, dựa trên các quy tắc do nhà phát triển hoặc hệ thống thiết lập.

Tại sao quan trọng trong SEO?

Caching ảnh hưởng trực tiếp đến ba yếu tố xếp hạng chính của Google: tốc độ tải trang, trải nghiệm người dùng và tỷ lệ thoát. Theo báo cáo của Google Core Web Vitals, trang có thời gian tải trên thiết bị di động dưới 2,5 giây đạt chỉ số LCP (Largest Contentful Paint) tốt hơn 70% so với trang chậm hơn 4 giây. Khi caching hoạt động hiệu quả, người dùng thấy nội dung nhanh hơn, giảm khả năng đóng tab sớm — điều này giúp cải thiện tín hiệu hành vi gửi về công cụ tìm kiếm.

Bên cạnh đó, caching giảm tải cho máy chủ gốc: ít yêu cầu HTTP hơn → giảm rủi ro lỗi 503/504, tăng khả năng xử lý đồng thời khi có lượt truy cập cao (ví dụ: chạy chiến dịch quảng cáo). Điều này间 tiếp hỗ trợ khả năng thu thập dữ liệu (crawling) của bot Google — vì bot ưu tiên thu thập trang phản hồi nhanh và ổn định.

Cách hoạt động

Khi người dùng lần đầu truy cập trang, trình duyệt nhận phản hồi từ máy chủ kèm các header HTTP như Cache-Control, Expires, ETag hoặc Last-Modified. Những header này quy định:

• File có được phép lưu cục bộ hay không (public / private),
• Thời gian lưu tối đa (max-age=3600 = 1 giờ),
• Cách xác minh tính mới khi hết hạn (ETag so sánh mã băm, Last-Modified so ngày chỉnh sửa).

Lần truy cập sau, trình duyệt kiểm tra xem file còn hiệu lực không. Nếu còn, nó lấy thẳng từ bộ nhớ đệm — không gửi yêu cầu tới máy chủ. Nếu hết hạn, trình duyệt gửi yêu cầu kiểm tra (conditional request) với If-None-Match hoặc If-Modified-Since. Máy chủ trả về 304 Not Modified nếu nội dung 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 caching hiệu quả, áp dụng cho đa số nền tảng:

1. Phân loại tài nguyên theo chu kỳ thay đổi:
   • Tài nguyên tĩnh (CSS, JS, ảnh, phông): đặt Cache-Control: public, max-age=31536000 (1 năm) — nhưng phải dùng tên file có hash (ví dụ: style.a1b2c3.css) để đảm bảo cập nhật khi thay đổi.
   • Tài nguyên động (HTML, trang danh mục): đặt Cache-Control: private, max-age=300 (5 phút) hoặc dùng stale-while-revalidate để cân bằng giữa tốc độ và độ tươi.
2. Cấu hình trên máy chủ:
   • Apache: thêm vào .htaccess hoặc httpd.conf:

     ExpiresActive On
     ExpiresByType text/css "access plus 1 year"
     ExpiresByType image/jpg "access plus 1 month"

   • Nginx: khai báo trong khối location:

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

3. Sử dụng CDN: Các dịch vụ như Cloudflare, BunnyCDN hoặc Vercel tự động cache tài nguyên tĩnh theo mặc định. Cần bật tính năng Browser Cache TTL và cấu hình Cache Rules để phân biệt file HTML (không cache) và file tĩnh (cache lâu).
4. Kiểm tra kết quả: Dùng DevTools (tab Network) → xem cột Size: nếu hiển thị (memory cache) hoặc (disk cache), nghĩa là caching đang hoạt động. Kiểm tra header Cache-Control và Age để xác minh thời gian lưu.

Lỗi thường gặp

• Cache quá lâu cho file HTML: Người dùng không thấy nội dung mới sau cập nhật. Cách khắc phục: Đặt Cache-Control: no-cache hoặc max-age=0 cho file HTML; kết hợp với ETag để kiểm tra thay đổi.
• Không dùng versioning cho file tĩnh: Khi cập nhật CSS nhưng tên file không đổi, trình duyệt vẫn dùng bản cũ trong cache. Cách khắc phục: Tự động sinh hash trong tên file (ví dụ qua Webpack, Vite) hoặc thêm tham số phiên bản (style.css?v=2.1 — không khuyến khích vì có thể bỏ qua cache).
• Xung đột giữa nhiều lớp cache: Trình duyệt cache, CDN cache và plugin cache WordPress cùng hoạt động gây ra nội dung lỗi thời. Cách khắc phục: Thiết lập thứ tự ưu tiên rõ ràng; vô hiệu hóa plugin cache nếu đã dùng CDN mạnh; kiểm tra header thực tế bằng curl hoặc DevTools.
• Cache nhạy cảm trên trang đăng nhập: Lưu cookie hoặc token trong cache → rủi ro bảo mật. Cách khắc phục: Đặt Cache-Control: no-store, private cho tất cả trang yêu cầu xác thực.

Ví dụ thực tế

Một website thương mại điện tử tại Việt Nam (domain: maytinhgiare.vn) từng có thời gian tải trang sản phẩm trung bình 4,8 giây trên di động. Sau khi áp dụng caching theo bảng sau, thời gian giảm còn 1,3 giây và tỷ lệ thoát giảm 22% trong 30 ngày:

Tài nguyên	Thời gian cache cũ	Thời gian cache mới	Ghi chú
HTML	300 giây	60 giây + ETag	Đảm bảo cập nhật nhanh giá/khuyến mãi
CSS/JS	Không cache	1 năm (có hash)	Dùng Webpack để sinh tên file dạng main.f8a2e1.js
Hình ảnh sản phẩm	1 ngày	1 tháng	CDN tự động tối ưu và cache
Font (WOFF2)	Không cache	1 năm	Font hiếm khi thay đổi, nên cache dài hạn

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

Caching có làm chậm trang lần đầu truy cập không?

Không. Lần đầu truy cập luôn tải đầy đủ từ máy chủ — caching chỉ phát huy tác dụng từ lần thứ hai trở đi. Thời gian tải lần đầu phụ thuộc vào kích thước tài nguyên và tốc độ mạng, không liên quan đến cấu hình cache.

Có nên bật caching cho trang blog cá nhân không?

Có, nhưng cần phân biệt: bài viết cũ (ít thay đổi) nên cache lâu (6–12 tháng); trang chủ và danh mục nên cache ngắn (5–30 phút) để phản ánh bài mới kịp thời. Với blog dùng WordPress, plugin WP Super Cache hoặc LiteSpeed Cache là lựa chọn an toàn.

Googlebot có tuân thủ header Cache-Control không?

Googlebot không lưu cache như trình duyệt người dùng, nhưng nó tôn trọng header Cache-Control: noindex, noarchive và no-transform. Với max-age, bot có thể dùng để ước lượng tần suất thu thập lại — tuy nhiên hành vi cụ thể tùy trường hợp và không được công bố chi tiết.