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 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:

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ặ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 được quy trình kiểm tra, Lighthouse sẽ liệt kê kết quả trong một bảng có ba cột:

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:

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 đó:

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 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.

Tài nguyên

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