Việc lưu vào bộ nhớ đệm của HTTP có thể tăng tốc thời gian tải trang cho các lượt truy cập lặp lại.
Khi một trình duyệt yêu cầu một tài nguyên, máy chủ cung cấp tài nguyên có thể cho trình duyệt biết thời lượng tạm thời lưu trữ hoặc lưu vào bộ nhớ đệm tài nguyên đó. Đối với mọi yêu cầu tiếp theo đối với tài nguyên đó, trình duyệt sẽ sử dụng bản sao cục bộ thay vì lấy tài nguyên đó từ mạng.
Cách kiểm tra chính sách về bộ nhớ đệm của Lighthouse không thành công
Lighthouse gắn cờ tất cả tài nguyên tĩnh không được lưu vào bộ nhớ đệm:
Lighthouse xem xét một tài nguyên có thể lưu vào bộ nhớ đệm nếu tài nguyên đó đáp ứng tất cả các điều kiện sau:
- Tài nguyên là phông chữ, hình ảnh, tệp phương tiện, tập lệnh hoặc trang kiểu.
- Tài nguyên có mã trạng thái HTTP
200
,203
hoặc206
. - Tài nguyên không có chính sách không lưu vào bộ nhớ đệm rõ ràng.
Khi một trang không vượt qua quy trình kiểm tra, Lighthouse sẽ liệt kê kết quả trong một bảng gồm 3 cột:
URL | Vị trí của tài nguyên có thể lưu vào bộ nhớ đệm |
TTL của bộ nhớ đệm | Thời lượng bộ nhớ đệm hiện tại của tài nguyên |
Kích thước cần chuyển | Dữ liệu ước tính mà người dùng của bạn sẽ lưu nếu tài nguyên bị gắn cờ đã được lưu vào bộ nhớ đệm |
Cách lưu tài nguyên tĩnh vào bộ nhớ đệm bằng chức năng lưu vào bộ nhớ đệm của HTTP
Định cấu hình máy chủ của bạn để trả về tiêu đề phản hồi HTTP Cache-Control
:
Cache-Control: max-age=31536000
Chỉ thị max-age
cho trình duyệt biết thời lượng lưu tài nguyên vào bộ nhớ đệm (tính bằng giây).
Ví dụ này đặt thời lượng thành 31536000
, tương ứng với 1 năm: 60 giây × 60 phút × 24 giờ × 365 ngày = 31536000 giây.
Bạn nên lưu các tài sản tĩnh bất biến vào bộ nhớ đệm trong một thời gian dài, chẳng hạn như một năm trở lên.
Sử dụng no-cache
nếu tài nguyên thay đổi và độ mới là quan trọng, nhưng bạn vẫn muốn nhận được một số lợi ích về tốc độ của việc lưu vào bộ nhớ đệm.
Trình duyệt vẫn lưu vào bộ nhớ đệm một tài nguyên được đặt thành no-cache
nhưng trước tiên sẽ kiểm tra với máy chủ để đảm bảo rằng tài nguyên đó vẫn còn mới.
Thời lượng lưu vào bộ nhớ đệm dài hơn không phải lúc nào cũng tốt hơn. Cuối cùng, bạn là người quyết định thời lượng bộ nhớ đệm tối ưu cho tài nguyên của mình.
Có nhiều lệnh để tuỳ chỉnh cách trình duyệt lưu các tài nguyên khác nhau vào bộ nhớ đệm. Tìm hiểu thêm về cách lưu tài nguyên vào bộ nhớ đệm trong bài viết Bộ nhớ đệm HTTP: hướng dẫn về tuyến phòng thủ đầu tiên của bạn và Lớp học lập trình về cách định cấu hình hành vi lưu vào bộ nhớ đệm HTTP.
Cách xác minh phản hồi được lưu vào bộ nhớ đệm trong Chrome DevTools
Để xem trình duyệt đang lấy tài nguyên nào từ bộ nhớ đệm, hãy mở thẻ Mạng trong Công cụ của Chrome cho nhà phát triển:
- Nhấn
Control+Shift+J
(hoặcCommand+Option+J
trên máy Mac) để mở DevTools. - Nhấp vào thẻ Mạng.
Cột Kích thước trong Công cụ của Chrome cho nhà phát triển có thể giúp bạn xác minh rằng một tài nguyên đã được lưu vào bộ nhớ đệm:
Chrome phân phát các tài nguyên được yêu cầu nhiều nhất từ bộ nhớ đệm, rất nhanh, nhưng sẽ bị xoá khi trình duyệt đóng.
Để xác minh tiêu đề Cache-Control
của tài nguyên có được đặt như dự kiến hay không, hãy kiểm tra dữ liệu tiêu đề HTTP của tài nguyên đó:
- Nhấp vào URL của yêu cầu trong cột Tên của bảng Yêu cầu.
- Nhấp vào thẻ Tiêu đề.
Hướng dẫn dành riêng cho ngăn xếp
Drupal
Đặt Browser and proxy cache maximum age (Thời gian tồn tại tối đa của bộ nhớ đệm proxy và trình duyệt) trên trang Administration » Configuration » Development (Quản trị » Cấu hình » Phát triển). Hãy đọc về Bộ nhớ đệm Drupal và tối ưu hoá cho hiệu suất.
Joomla
Xem phần Bộ nhớ đệm.
WordPress
Xem phần Lưu vào bộ nhớ đệm của trình duyệt.