Thực tiễn tốt nhất cho cài đặt kiểm soát bộ đệm cho trang web của bạn

Bạn có thể nhận thấy rằng, đôi khi, khi truy cập một trang web lần thứ hai, nó trông không được như mong đợi và một số kiểu bị hỏng, khiến mọi thứ trông thật kỳ lạ. Thông thường, nguyên nhân của vấn đề này là các chính sách kiểm soát bộ đệm được xác định kém khiến bạn không nhận được các thay đổi mới nhất sau lần triển khai gần đây nhất. Trong bài viết này, tôi sẽ chỉ cho bạn các cài đặt và kỹ thuật bộ nhớ cache phù hợp để giúp bạn cập nhật trang web của mình cho tất cả người dùng sau mỗi lần triển khai.

Đối với những người bạn chỉ muốn có được các thực tiễn tốt nhất và bắt đầu sử dụng chúng, hãy theo liên kết ở đây đến cuối bài viết.

Làm thế nào để bộ nhớ cache hoạt động đằng sau hậu trường?

Trình duyệt của bạn, trên mỗi yêu cầu đến trang web / tài nguyên, cố gắng tải ít dữ liệu nhất có thể bằng cách đọc thông tin được lưu trong bộ nhớ cache từ bộ nhớ cục bộ. Điều này chỉ có thể là chúng tôi cung cấp đủ hướng dẫn cho trình duyệt, để giải thích những tài nguyên nào cần giữ và trong bao lâu.

Các hướng dẫn này có chức năng như chỉ thị; để nói với trình duyệt của bạn về họ, bạn phải thêm chúng để phản hồi thông tin tiêu đề HTTP. Các chỉ thị phổ biến nhất liên quan đến quá trình lưu trữ bộ nhớ cache là Bộ nhớ cache điều khiển bộ nhớ cache, Bộ điều khiển hết hạn sử dụng, Bộ nhớ cache và trò chơi cuối cùng được sửa đổi.

Hầu như mọi máy chủ web đều có một số cài đặt bộ đệm trong phản hồi tiêu đề theo mặc định, nhưng nó không rõ ràng những gì chúng tôi nhận được nếu không có chính sách bộ đệm.

Không có cài đặt kiểm soát bộ đệm, trình duyệt sẽ đến máy chủ web cho mọi yêu cầu tài nguyên và đọc thông tin từ nó. Điều này làm tăng thời gian tải của trang bị ảnh hưởng, thêm tải cho máy chủ web của bạn khi truyền thông tin và tăng số lượng cuộc gọi đến phụ trợ của bạn.

Luồng yêu cầu không có cài đặt bộ đệm

Nó cài đặt lên trình duyệt để quyết định những việc cần làm và cách lưu trữ thông tin mà không cần hướng dẫn từ máy chủ. Hiện tại, Chrome và Safari tải xuống dữ liệu từ phụ trợ mỗi lần mà không có hướng dẫn bộ đệm. Điều này có thể thay đổi và dẫn đến các hành vi khác nhau, tuy nhiên, đặc biệt là trên các nền tảng khác.

Để xác định rõ ràng những việc cần làm với một số tệp nhất định, hãy để Lặn đi sâu vào tìm hiểu các chỉ thị kiểm soát bộ đệm, thêm từng bước để trả lời các tiêu đề và xem kết quả.

Etag (thẻ thực thể)

Etag là một trong những cài đặt bộ đệm. Ý tưởng chính đằng sau tiêu đề HTTP này là cho phép trình duyệt của bạn nhận thức được các sửa đổi đối với các tài nguyên có liên quan mà không cần tải xuống các tệp đầy đủ. Máy chủ có thể tính toán một cái gì đó tương tự với tổng băm của mỗi tệp và sau đó gửi tổng băm này cho khách hàng. Lần sau, khách hàng cố gắng truy cập tài nguyên này, thay vì tải xuống tệp, trình duyệt sẽ gửi một cái gì đó như thế này trong tiêu đề HTTP: If-none-Match: W / Biệt 1d2e7 Chuyện1648e509289. Sau đó, máy chủ sẽ kiểm tra tổng băm này so với tổng băm của tệp hiện tại và, nếu có sự khác biệt, buộc khách hàng phải tải xuống một tệp mới. Nếu không, máy khách sẽ được thông báo rằng nó nên sử dụng một phiên bản được lưu trữ.

Yêu cầu luồng với Etag - Tải thứ 1Yêu cầu luồng với Etag - Tải thứ 2

Với chính sách bộ đệm Etag được bật, chúng tôi luôn đến máy chủ để kiểm tra tổng băm của một tệp và chỉ sau đó, trình duyệt mới quyết định lấy nó từ bộ đệm hoặc tải hoàn toàn. Khi tài nguyên chưa được sửa đổi, chỉ cần 80 byte100 byte để xác minh bất kể bạn đang yêu cầu gì, cho dù là tệp 10KB hay 10MB.

Sửa đổi lần cuối

Một cài đặt kiểm soát bộ đệm khác là tiêu đề HTTP HTTP được sửa đổi lần cuối. Ý tưởng chính rất giống với Etag, nhưng hành vi của trình duyệt có một chút khác biệt. Máy chủ có dấu thời gian của ngày sửa đổi cuối cùng cho mỗi tệp; sau khi tải tệp đầu tiên, máy khách có khả năng hỏi máy chủ xem tài nguyên đã được sửa đổi kể từ thời điểm cụ thể mà tệp được truy cập lần cuối bởi máy khách. Để thực hiện việc này, trình duyệt sẽ gửi If-Modified-Because: Fri, 13 Jul 2018 10:49:23 GMT trong tiêu đề HTTP. Nếu tài nguyên đã được sửa đổi, trình duyệt phải tải xuống một tệp mới, nếu không, nó sử dụng một phiên bản được lưu trữ.

Thực tế là các trình duyệt có chính sách bộ đệm trong của họ và có thể tự quyết định xem có lấy tài nguyên từ bộ đệm hay tải xuống bản sao mới hay không.

Last-Modified là một tiêu đề bộ đệm ẩn yếu, vì trình duyệt áp dụng một heuristic để xác định xem có tìm nạp mục từ bộ đệm hay không. Và các heuristic khác nhau giữa các trình duyệt.
Hướng dẫn thực hành tốt nhất về bộ nhớ đệm của Google
Luồng yêu cầu với lần sửa đổi cuối cùng - Tải đầu tiênLuồng yêu cầu với lần sửa đổi cuối cùng - Tải thứ 2 (Kịch bản hoàn hảo)Luồng yêu cầu với lần sửa đổi cuối cùng - Tải thứ 2 (Trường hợp thường gặp)

Kết quả là chúng ta có thể chỉ dựa vào Last-Modified, vì vậy tôi muốn loại bỏ nó hoàn toàn khỏi cài đặt máy chủ của mình để giảm lưu lượng, ngay cả khi nó chỉ có vài byte.

Kiểm soát bộ nhớ cache tối đa tuổi

Lệnh này cho phép chúng tôi báo cho trình duyệt biết phải giữ tệp trong bộ nhớ cache trong bao lâu kể từ lần tải đầu tiên. Thời gian mà trình duyệt sẽ giữ tệp trong bộ đệm nên được xác định bằng giây, thường được trình bày như thế này Kiểm soát bộ đệm: max-age = 31536000. Với chính sách này, trình duyệt hoàn toàn bỏ qua quá trình thực hiện yêu cầu đến máy chủ của bạn và mở tệp rất nhanh. Nhưng làm thế nào chúng ta có thể chắc chắn rằng tập tin đã thắng Thay đổi quá lâu? Chúng tôi don lồng.

Vì vậy, để buộc trình duyệt tải xuống phiên bản mới của tệp cần thiết, chúng tôi sử dụng một kỹ thuật được triển khai bởi nhiều công cụ xây dựng tài sản, như Webpack hoặc Gulp. Mỗi tệp sẽ được biên dịch trước trên máy chủ và tổng băm được thêm vào tên tệp, chẳng hạn như ứng dụng của ứng dụng-72420c47cc.css. Ngay cả những thay đổi nhỏ đối với tệp cũng được phản ánh trong tổng băm, điều này đảm bảo rằng nó sẽ được công nhận là khác nhau. Vì vậy, sau lần triển khai tiếp theo, bạn sẽ nhận được một phiên bản mới của tệp. Điều này có thể áp dụng cho tất cả các tệp css, js và hình ảnh của chúng tôi (max-age = 31536000); sau khi chúng tôi thay đổi một cái gì đó, trình duyệt sẽ chỉ yêu cầu một tệp mới với tổng băm mới, sau đó nó sẽ lưu vào bộ đệm.

không có bộ đệm

Phần khó khăn của kỹ thuật trên là bạn không thể quên các tệp html của mình; nếu bạn cũng áp dụng cài đặt đó cho các cài đặt đó, bạn sẽ không bao giờ nhận được các liên kết mới cho các tệp css, js hoặc hình ảnh của mình cho đến khi bạn buộc tải lại.

Tôi khuyên bạn nên áp dụng Cache-Control: no-cache cho các tệp html. Áp dụng ứng dụng không có bộ nhớ cache, không có nghĩa là không có bộ đệm, nó chỉ đơn giản là yêu cầu trình duyệt xác thực tài nguyên trên máy chủ trước khi sử dụng nó từ bộ đệm. Đó là lý do tại sao chúng ta cần sử dụng nó với Etag, vì vậy các trình duyệt sẽ gửi yêu cầu đơn giản và tải thêm 80 byte để xác minh trạng thái của tệp.

Cài đặt cuối cùng

  • Sử dụng Gulp, Webpack hoặc tương tự để thêm các chữ số băm duy nhất vào các tệp css, js và hình ảnh của bạn (như app-67ce7f3483.css);
  • Đối với các tệp js, css và hình ảnh, hãy đặt Kiểm soát bộ đệm: công khai, tuổi tối đa = 31536000, không có Etag, không có cài đặt được sửa đổi lần cuối.
  • Đối với các tệp html, sử dụng Kiểm soát bộ đệm: không có bộ đệm và Etag.

Vì vậy, như chúng ta có thể thấy, ngay cả những điều rõ ràng và phổ biến, như lưu trữ các tệp tĩnh, có thể không rõ ràng nếu chúng ta lặn sâu hơn. Nghiên cứu tốt có thể ngăn bạn mắc lỗi và giảm lưu lượng truy cập trên máy chủ của bạn, giảm thời gian tải tốc độ trang web.

Nhấn vào nút nếu bạn thấy bài viết này hữu ích!

Bất kỳ câu hỏi hoặc phản hồi? Kết nối qua Pixel Point