Cache trình duyệt (browser cache) cho website của bạn

Hầu hết các trình duyệt hiện đại ngày nay đều hỗ trợ cache. Các tài nguyên ít thay đổi của website như các file ảnh, js (javascript), css … nên được cache lại vào bộ nhớ của trình duyệt giúp tăng tốc độ load website. Theo chuẩn HTML 1.1 có cung cấp các HTTP response header sau phục vụ cho mục đích cache bao gồm  Strong caching headers và Weak caching headers.

Khi bạn kiểm tra website của bạn trên Google PageSpeed Insights Tool nếu có đề xuất nên khắc phục: “Nâng cao lưu vào bộ nhớ cache trong trình duyệt” thì những gì bạn sắp đọc sau đây sẽ giúp bạn hiểu rõ hơn về cảnh báo này và cách khắc phục nó.

Đề xuất Nâng cao lưu vào bộ nhớ cache trong trình duyệt

 

Cache trình duyệt (browser cache)

  • Strong caching headers (gồm Expires và Cache-Control): Khi có yêu cầu tới các tài nguyên đã từng truy cập trước đó, trình duyệt sẽ kiểm tra các trường này trước khi quyết định gửi request lên server hay lấy từ bộ nhớ cache
    • Expires là thời điểm hết hiệu lực của tài liệu được cache mà chỉ khi nào quá thời điểm này, trình duyệt mới gửi request lên server để tải lại tài liệu. Giá trị của trường này luôn là thời gian theo GMT.
      • Ví dụ: Expires: Fri, 30 Oct 2016 14:19:41 GMT
      • Ưu điểm của Expires là nó được hỗ trợ rộng rãi do được giới thiệu từ chuẩn HTTP 1.0.
      • Nhược điểm của Expires là sử dụng thời gian tuyệt đối nên thời gian tại server và tại nơi cache luôn phải chính xác. Thêm nữa, server phải “nhớ” cập nhật expires date, nếu không khi qua thời điểm này, số lượng request tới server sẽ tăng mạnh gây quá tải cho server.
    • Cache-Control: linh động hơn Expires, nó có thể bao gồm các thông tin như:
      • max-age=[seconds]: khoảng thời gian tối đa mà tài liệu được cache có hiệu lực tính từ thời điểm gửi request
      • private: chỉ ra rằng tài liệu chỉ được cache bởi trình duyệt, không cho phép các share cache như là các proxy
      • public: chỉ ra rằng tài liệu có thể được cache bởi tất cả các thành phần
      • no-cache: tài liệu không được cache mà luôn request lên server
      • VD: Cache-Control: max-age=31536000, public
    • Khi sử dụng cả Expires và Cache-Control thì Cache-Control được ưu tiên.
  • Weak caching headers(gồm Etag và Last-Modified): còn được gọi là các vadilators. Nếu trình duyệt đã quyết định gửi request tới server, nó sẽ gửi request kèm theo các trường này (lúc này request được gọi là conditional GET request)
    • Etag: Giá trị của trường này có thể dựa trên thời gian chỉnh sửa cuối cùng hay checksum của file. Server sẽ kiểm tra giá trị này với giá trị của file hiện tại trên server, nếu trùng khớp nó chỉ trả về mã 304 Not Modified và trình duyệt sẽ load dữ liệu từ trong cache.
      • VD: ETag: “737060cd8c284d8af7ad3082f209582d”
      • Etag có nhược điểm là theo mặc định, một file duy nhất khi ở trên các server khác nhau sẽ có Etag khác nhau. Sẽ không sao nếu trang web của ta chỉ đặt trên một server. Tuy nhiên sẽ là vấn đề nếu website đặt trên nhiều server và được phân tải bởi load-balancer.
    • Last-Modified: tương tự như Etag, nhưng Last-Modified luôn là thời gian chỉnh sửa cuối cùng của file dưới dạng GMT. Last-Modified nằm trong response server trả về, và khi trình duyệt gửi request lên server, nó kèm thêm trường If-Modified-Since với giá trị là Last-Modified cuối cùng nó nhận được.
      • VD: Last-Modified: Sat, 8 Mar 2016 07:57:31 GMT
    • Khi cả Etag và Last-Modified được sử dụng, server sẽ kiểm tra cả hai trường này, theo nguyên tắc có thể mô tả bằng mã giả như sau:

Proxy cache

  • Cơ chế cache không chỉ được thực hiện tại trình duyệt mà còn tại các public proxy server. Điều này có nghĩa là người dùng lần đầu tiên vào trang web của ta đã được hưởng lợi: khi một tài liệu được request lần đầu tiên thông qua một proxy server, thì tất cả các user khác ghé thăm trang web thông qua proxy này đều lấy tài liệu tại cache của proxy mà không cần phải truy cập đến server gốc.
  • Để cho phép các proxy lưu trữ các tài nguyên của website vào cache, sử dụng Cache-control: public header

Các lưu ý và nguyên tắc khuyến nghị khi cache trình duyệt

  • Sử dụng một strong caching header và một weak caching header. Dùng cả hai cho mỗi loại là dư thừa.
    • Nên dùng Cache-Control hơn là Expires do tính linh động của nó. Thời gian hiệu lực nên từ 1 tháng đến tối đa 1 năm đối với những tài nguyên ít thay đổi. Khi thay đổi nội dung của một file và muốn tất cả người dùng đều phải request lại nó, chỉ cần đổi tên riêng file và các liên kết tới file đó.
    • Nên dùng Last-Modified hơn là Etag. Nếu sử dụng Etag, thì nên cấu hình lại nó.
    • Đặt Cache-Control: public để cho phép cache tại các proxy.
  • Các nguyên tắc phải thực hiện
    • Sử dụng các URL một cách kiên định, không nên có nhiều URL với cùng một nội dung.
    • Chỉ sử dụng POST khi thật cần thiết vì phương thức POST hầu hết không được các bộ nhớ cache hỗ trợ.
    • Không thay đổi nội dung file khi không cần thiết.
    • Chỉ sử dụng cookie với các trang động vì nó cũng không được cache.
    • Nên sử dụng thêm việc đánh version cho các file tĩnh để khắc phục nhược điểm của Expires cũng như Cache-Control.

Một số ví dụ về sử dụng Cache-Control Header

Dưới đây chỉ là một vài ví dụ của tôi đưa ra, tùy vào trường hợp và tính năng của site mà bạn nên đưa ra cấu hình hợp lý cho trang của mình

  • Cache-Control Header trên server chạy Apache (cấu hình .htaccess):

 

  • Cache-Control Header trên server nginx:

Nguồn: trinhtuantai.com

3 thoughts on “Cache trình duyệt (browser cache) cho website của bạn

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *