Việc lưu vào bộ nhớ đệm HTTP có thể tăng thời gian tải trang trong những lần truy cập lặp lại.
Khi 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 khoảng thời gian tạm thời lưu trữ hoặc lưu tài nguyên vào bộ nhớ đệm. Đối với mọi yêu cầu tiếp theo cho tài nguyên đó, trình duyệt sẽ sử dụng bản sao cục bộ của nó thay vì lấy từ mạng.
Cách quy trình kiểm tra chính sách bộ nhớ đệm của Lighthouse không thành công
Lighthouse sẽ gắn cờ tất cả tài nguyên tĩnh không được lưu vào bộ nhớ đệm:
![Ảnh chụp màn hình các thành phần tĩnh của Lighthouse Serve với quy trình kiểm tra chính sách bộ nhớ đệm hiệu quả](https://developer.chrome.com/static/docs/lighthouse/performance/uses-long-cache-ttl/image/a-screenshot-the-lightho-d4eb993831c72.png?authuser=5&hl=vi)
Lighthouse sẽ coi một tài nguyên có thể lưu vào bộ nhớ đệm nếu tất cả các điều kiện sau được đáp ứng:
- Tài nguyên là phông chữ, hình ảnh, tệp đa phương tiện, tập lệnh hoặc biểu định kiểu.
- Tài nguyên này có mã trạng thái HTTP
200
,203
hoặc206
. - Tài nguyên không có chính sách rõ ràng về việc không lưu bộ nhớ đệm.
Khi một trang không vượt qua được quy trình kiểm tra, Lighthouse sẽ liệt kê kết quả trong một bảng có ba 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 | Một ước tính về dữ liệu 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 bộ nhớ đệm HTTP
Định cấu hình máy chủ để trả về tiêu đề phản hồi HTTP Cache-Control
:
Cache-Control: max-age=31536000
Lệnh max-age
cho trình duyệt biết cần phải lưu tài nguyên vào bộ nhớ đệm trong bao lâu (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 thành phần tĩnh không thể thay đổi vào bộ nhớ đệm trong thời gian dài, chẳng hạn như một năm trở lên.
Dùng no-cache
nếu tài nguyên thay đổi và làm mới cũng quan trọng, nhưng bạn vẫn muốn hưởng 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 một tài nguyên được thiết lập thành no-cache
vào bộ nhớ đệm nhưng sẽ kiểm tra với máy chủ trước tiên để đảm bảo tài nguyên đó vẫn còn hiệu lực.
Thời lượng 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 phả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 vào bộ nhớ đệm. Tìm hiểu thêm về tài nguyên lưu vào bộ nhớ đệm qua bài viết Bộ nhớ đệm HTTP: hướng dẫn bảo vệ đầu tiên và Lớp học lập trình về đị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 Công cụ của Chrome cho nhà phát triển
Để xem tài nguyên mà trình duyệt đang nhận được 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 xét]: <> (Danh sách sau đây là một đoạn mã ngắn từ web.dev, nhưng không được dịch từ tiếng Anh cho bất kỳ ngôn ngữ nào.)
1. Nhấn Control+Shift+J
(hoặc Command+Option+J
trên máy Mac) để mở Công cụ cho nhà phát triển.
2. 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:
![Cột Kích thước.](https://developer.chrome.com/static/docs/lighthouse/performance/uses-long-cache-ttl/image/the-size-column-4c3e86c3d8b8f.png?authuser=5&hl=vi)
Chrome phân phát các tài nguyên được yêu cầu nhiều nhất từ bộ nhớ đệm của bộ nhớ, bộ nhớ này hoạt động rất nhanh, nhưng sẽ bị xoá khi trình duyệt đóng.
Để xác minh rằng tiêu đề Cache-Control
của tài nguyên được đặt như dự kiến, 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 đề.
![Kiểm tra tiêu đề Kiểm soát bộ nhớ đệm thông qua thẻ Tiêu đề](https://developer.chrome.com/static/docs/lighthouse/performance/uses-long-cache-ttl/image/inspecting-cache-control-881e2975bf9d3.png?authuser=5&hl=vi)
Cache-Control
qua thẻ Tiêu đề.
Hướng dẫn dành riêng cho ngăn xếp
Drupal
Đặt Trình duyệt và bộ nhớ đệm proxy thời gian tối đa trên trang Quản trị > Cấu hình > Phát triển. Xem Tài nguyên về hiệu suất của Drupal.
Joomla
Xem Bộ nhớ đệm.
WordPress
Xem Lưu vào bộ nhớ đệm của trình duyệt.