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

Ảnh chụp màn hình phần Lighthouse Serve tĩnh với nội dung kiểm tra chính sách bộ nhớ đệm hiệu quả

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ặc 206.
  • 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ạnLớ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:

  1. Nhấn Control+Shift+J (hoặc Command+Option+J trên máy Mac) để mở DevTools.
  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.

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

  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 đề.
Kiểm tra tiêu đề Cache-Control thông qua thẻ Headers (Tiêu đề)
Kiểm tra tiêu đề Cache-Control thông qua thẻ Headers (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.

Tài nguyên