Chrome đang thay đổi để cho phép sử dụng bộ nhớ đệm quay lại/chuyển tiếp (bfcache) cho các trang sử dụng Cache-Control: no-store khi có thể thực hiện an toàn. Hãy tìm hiểu ý nghĩa của điều này đối với nhà phát triển.
Thông tin khái quát
Việc đặt Cache-Control: no-store làm Tiêu đề HTTP là một tín hiệu cho biết rằng trang không được lưu trữ trong bộ nhớ đệm HTTP. Bạn nên sử dụng lệnh này cho các trang chứa dữ liệu nhạy cảm (ví dụ: cho các trang khi người dùng đã đăng nhập), nhưng lệnh no-store thường được dùng trên các trang không có dữ liệu nhạy cảm.
Với bfcache, thay vì huỷ một trang khi người dùng rời khỏi trang, chúng ta sẽ hoãn huỷ và tạm dừng việc thực thi JS. Nếu người dùng quay lại ngay, chúng ta sẽ hiển thị lại trang và tiếp tục thực thi JS. Điều này giúp người dùng điều hướng trang gần như ngay lập tức.
Mặc dù không bắt buộc theo thông số kỹ thuật HTML, nhưng trình duyệt thường coi Cache-Control: no-store là tín hiệu để tránh đặt trang vào bfcache. Đây là lý do lớn nhất khiến bfcache không được sử dụng, đối với khoảng 17% lượt điều hướng theo nhật ký trên thiết bị di động và 7% lượt điều hướng theo nhật ký trên máy tính. Điều này có nghĩa là các trang này không được hưởng lợi từ tính năng khôi phục nhanh và phải tải lại toàn bộ trang, bao gồm mọi lệnh gọi mạng, quá trình thực thi JavaScript và kết xuất.
Thường thì Cache-Control: no-store được đặt để tránh các vấn đề về bộ nhớ đệm khi trang web thay đổi, nhưng lý do này ít liên quan hơn khi sử dụng bfcache, vì toàn bộ trang được khôi phục gần như thể trang đó luôn mở.
Cách Chrome thay đổi hành vi này
Chrome đã thông báo ý định thay đổi hành vi này nhưng đang thận trọng với thay đổi này. Chúng tôi đã chạy các thử nghiệm kể từ Chrome 116 và cho đến gần đây, các thử nghiệm này đã chạy trên 5% số lượt tải trang.
Chúng tôi đã tăng tỷ lệ này lên 10% số lượt tải trang vào ngày 2 tháng 10 và dự định tăng tỷ lệ này lên 20% số lượt tải trang vào tháng 11, 50% vào đầu năm tới, sau đó triển khai toàn bộ tính năng này, với một số trường hợp chọn không sử dụng sẽ được thảo luận ở phần tiếp theo.
Dữ liệu nhạy cảm
Mặc dù phân tích của chúng tôi cho thấy phần lớn thao tác quay lại hoặc chuyển tiếp không bao gồm dữ liệu nhạy cảm và do đó đủ điều kiện để sử dụng bfcache, nhưng có một số trường hợp bạn không nên đặt các trang vào bfcache. Ví dụ: khi đăng xuất, bạn không thể truy xuất trang đã đăng nhập bằng cách di chuyển lui hoặc tới.
Để tránh điều này, Chrome sẽ xoá một trang khỏi bfcache khi có thay đổi đối với cookie hoặc các phương thức uỷ quyền khác.
Ngoài ra, việc sử dụng các API sau đây cho các trang sử dụng Cache-Control: no-store sẽ tiếp tục khiến các trang đó không đủ điều kiện sử dụng bfcache:
Xin lưu ý rằng đây không phải là danh sách đầy đủ các API ngăn chặn việc sử dụng bfcache mà là các API chặn bfcache trên các trang Cache-Control: no-store ngay cả khi các API này không được sử dụng tại thời điểm rời khỏi trang.
Thời gian chờ bfcache cho các trang Cache-Control: no-store cũng được giảm xuống còn 3 phút (từ 10 phút đối với các trang không sử dụng Cache-Control: no-store) để giảm thiểu rủi ro hơn nữa.
Chọn không tham gia dành cho doanh nghiệp
Các doanh nghiệp thường có phần mềm và thiết bị dùng chung khó cập nhật. Bạn có thể tắt chính sách AllowBackForwardCacheForCacheControlNoStorePageEnabled để tiếp tục ngăn việc sử dụng bfcache cho các trang Cache-Control: no-store.
Kiểm thử thay đổi
Nhà phát triển có thể kiểm thử thay đổi này bằng cờ sau:
--enable-features=CacheControlNoStoreEnterBackForwardCache:level/restore-unless-cookie-change
Nếu có bất kỳ trường hợp ngoại lệ nào trước đó (ví dụ: cookie thay đổi), thì điều này sẽ ngăn trang sử dụng bfcache với lý do "Các trang có tài nguyên chính có Cache-Control: no-store không thể truy cập vào bộ nhớ đệm cho thao tác tiến/lùi" xuất hiện trong trình kiểm tra bfcache của Chrome DevTools.
Bạn có thể sử dụng trang kiểm thử bfcache này để kiểm thử có và không có cờ này.
Những điều nhà phát triển cần biết
Mặc dù nhà phát triển không cần thực hiện bất kỳ thay đổi nào để người dùng hưởng lợi từ việc sử dụng bfcache nhiều hơn này, nhưng họ có thể cần phải cân nhắc một số điều. Đây là những vấn đề tương tự mà các trang web khác có thể gặp phải trong lần ra mắt đầu tiên của bfcache vào tháng 12 năm 2021.
Tác động đến hiệu suất
Lý do chúng tôi thực hiện thay đổi này là để cải thiện trải nghiệm trên trang cho người dùng trên web. Chúng tôi nhận thấy các chỉ số quan trọng về trang web được cải thiện đáng kể khi lần đầu tiên ra mắt bfcache. Giờ đây, chúng tôi muốn mang những điểm cải tiến đó đến nhiều trang web hơn.
Khi tính năng này ra mắt, chủ sở hữu trang web có thể thấy Chỉ số quan trọng chính của trang web được cải thiện và có thể đo lường mức sử dụng bfcache trong CrUX, bao gồm cả trong Trang tổng quan CrUX.
Số liệu phân tích về tác động
Các trang được khôi phục từ bfcache sẽ "khôi phục" trang cũ (bao gồm cả vùng nhớ khối xếp JavaScript) thay vì tải lại trang. Nhiều nhà cung cấp dịch vụ phân tích phổ biến không đo lường lượt khôi phục bfcache dưới dạng lượt xem trang mới vì họ chỉ kích hoạt lượt xem trang khi tải lần đầu.
Do đó, các trang web có thể thấy số lượt tải trang giảm trong số liệu phân tích khi bắt đầu sử dụng bfcache lần đầu tiên. Bạn nên xem những lượt này là lượt xem trang bằng cách đặt trình nghe cho sự kiện pageshow và kiểm tra thuộc tính persisted:
// Send a pageview when the page is first loaded.
gtag('event', 'page_view');
// Send another pageview if the page is restored from bfcache.
window.addEventListener('pageshow', (event) => {
if (event.persisted) {
// Page was restored from bfcache, sent another page view.
gtag('event', 'page_view');
}
});
Xử lý nội dung cập nhật khi khôi phục trang
Giờ đây, các trang web có thể thấy mức sử dụng bfcache khi trước đây không thấy mức sử dụng này và khi trang được tải lại hoàn toàn bằng dữ liệu mới, nên nhà phát triển có thể cân nhắc làm mới dữ liệu khi khôi phục bfcache.
Bạn có thể kích hoạt nội dung cập nhật theo cách tương tự như cách ghi nhật ký các lượt xem trang bổ sung cho mục đích phân tích bằng cách sử dụng sự kiện pageshow và kiểm tra thuộc tính persisted.
Xin lưu ý rằng không phải nội dung nào cũng cần được cập nhật và người dùng có thể muốn "quay lại" nội dung mà họ đã xem trước đó. Ví dụ: việc làm mới danh sách bài viết có thể khiến người dùng không còn thấy bài viết mà họ định quay lại xem.
Tác động đến quảng cáo
Tương tự như tác động đến số liệu phân tích, các trang web có thể thấy số lượt hiển thị quảng cáo giảm nếu quảng cáo chỉ tải khi trang tải. Bạn có thể làm mới quảng cáo theo phương thức lập trình khi khôi phục bfcache để đảm bảo tính đồng nhất với việc tải toàn bộ trang, một lần nữa sử dụng sự kiện pageshow và kiểm tra thuộc tính persisted nhưng không phải lúc nào cũng là việc nên làm. Hãy tham khảo tài liệu của nhà cung cấp quảng cáo về cách kích hoạt tải lại quảng cáo.
Thông tin khác về bfcache
Để biết thêm thông tin về bfcache, hãy xem hướng dẫn kỹ thuật toàn diện về bfcache.
Phản hồi
Chúng tôi rất mong nhận được ý kiến phản hồi của bạn về thay đổi này. Bạn có thể gửi ý kiến phản hồi trong công cụ theo dõi lỗi của Chrome bằng thành phần bfcache.
Kết luận
Chúng tôi rất vui khi có thể mang lại lợi ích của bfcache cho nhiều trang hơn để cải thiện trải nghiệm trang cho người dùng. Chúng tôi đã cân nhắc kỹ lưỡng về thay đổi này và sẽ triển khai theo cách an toàn nhất có thể. Chúng tôi hy vọng thông tin được cung cấp tại đây sẽ giúp nhà phát triển hiểu rõ về thay đổi này và thực hiện mọi thay đổi cần thiết để tránh gặp vấn đề khi điều này xảy ra.