Phân phát các tài sản tĩnh bằng chính sách bộ nhớ đệm hiệu quả

Việc lưu vào bộ nhớ đệm 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 trình duyệt yêu cầu tài nguyên, máy chủ cung cấp tài nguyên có thể thông báo cho trình duyệ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 kiểm tra chính sách bộ nhớ đệm của Lighthouse không thành công

Lighthouse gắn cờ tất cả cá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ấ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 có mã trạng thái HTTP 200, 203 hoặc 206.
• 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 quá trình kiểm tra, Lighthouse liệt kê các kết quả trong một bảng với 3 cột:

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ủ để 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 khoảng thời gian cần lưu tài nguyên vào bộ nhớ đệm (tính bằng giây). Ví dụ sau đặ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 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 tài nguyên đã đặt thành no-cache vào bộ nhớ đệm nhưng trước tiên hãy kiểm tra với máy chủ để đảm bảo rằng tài nguyên vẫn còn hiện tại.

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 có quyền 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ộ nhớ đệm HTTP: hướng dẫn phòng thủ đầu tiê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 của 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

Để biết trình duyệt đang nhận được những tài nguyên nào từ bộ nhớ đệm, 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 mã ngắn lấy từ web.dev, nhưng không được dịch từ tiếng Anh sang 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:

Chrome phân phối các tài nguyên được yêu cầu nhiều nhất từ bộ nhớ đệm của bộ nhớ, tốc độ này 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 đặt như dự kiến, hãy kiểm tra dữ liệu tiêu đề HTTP:

1. Nhấp vào URL của yêu cầu, trong cột Tên của bảng Yêu cầu.
2. Nhấp vào thẻ Tiêu đề.

Hướng dẫn dành riêng cho ngăn xếp

Drupal

Đặt Thời gian tồn tại tối đa của bộ nhớ đệm proxy và trình duyệt trong phần 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

Hãy xem phần Bộ nhớ đệm.

WordPress

Xem Lưu vào bộ nhớ đệm của trình duyệt.

Tài nguyên

• Mã nguồn để Phân phát tài sản tĩnh bằng quy trình kiểm tra chính sách bộ nhớ đệm hiệu quả
• Thông số kỹ thuật Kiểm soát bộ nhớ đệm
• Kiểm soát bộ nhớ đệm (MDN)