Bộ nhớ Back/forward cache có ý nghĩa gì đối với tốc độ tải trang? 31/01/2023

Bộ nhớ đệm cho thao tác Back/forward cache giúp tăng tốc các điều hướng này bằng cách khôi phục nội dung trang đã tải trước đó.

Bộ nhớ đệm Back/forward cache là gì?

Nếu một trang hỗ trợ bộ nhớ đệm Back/forward cache (còn được gọi là BFCache), thì trình duyệt sẽ lưu toàn bộ trạng thái của trang vào bộ nhớ khi điều hướng đến một trang mới.

Sau đó, khi người dùng điều hướng quay lại trang trước đó, trình duyệt sẽ khôi phục toàn bộ trang từ bộ đệm thay vì tải lại. Bằng cách đó, nội dung trang có thể xuất hiện gần như ngay lập tức.

Khi nào một trang được phân phát từ bộ nhớ đệm Back/forward cache?

Để hưởng lợi từ bộ nhớ đệm Back/forward cache, trang web cần phải đủ điều kiện sử dụng tính năng này. Dưới đây là một số lý do phổ biến khiến một trang có thể không đủ điều kiện:

•              Nó sử dụng unload sự kiện (vì việc khôi phục trang sau khi unload đã được xử lý có thể làm hỏng trang)
•              Nó sử dụng beforeunload sự kiện (trong Firefox)
•              Nó sử dụng Cache-Control: no-store tiêu đề vô hiệu hóa tất cả các bộ đệm

Làm cách nào để kiểm tra xem trang web có thể được phân phát từ bộ nhớ đệm Back/forward cache?

Công cụ dành cho nhà phát triển của Chrome cho phép bạn kiểm tra xem trang của mình có đủ điều kiện sử dụng bộ nhớ đệm cho thao tác tiến/lùi hay không.

1.             Nhấp chuột phải vào trang và nhấp vào Kiểm tra để mở Chrome DevTools
2.             Chuyển sang tab Ứng dụng
3.             Trong phần Bộ nhớ đệm của thanh bên, chọn Bộ nhớ đệm Back/forward cache
4.             Nhấp vào Kiểm tra bộ nhớ đệm Back/forward cache

Sau đó, DevTools sẽ hiển thị cho bạn trạng thái cho biết liệu trang web của bạn có thể sử dụng bộ đệm ẩn cho thao tác tiến/lùi hay không và nếu không đủ điều kiện, bạn có thể làm gì để hỗ trợ nó.

Back/forward cache được setup thành công

Trong trường hợp này, trang của bạn đủ điều kiện cho bộ nhớ đệm cho thao tác tiến/lùi và bạn không cần phải làm gì cả.

Không thành công

Trạng thái này cho thấy rằng bạn nên thực hiện thay đổi đối với trang web của mình để hỗ trợ bộ nhớ đệm cho thao tác tiến/lùi.

Đang chờ hỗ trợ

Cuối cùng, trạng thái này cho biết rằng trang của bạn hiện không đủ điều kiện sử dụng bộ nhớ đệm cho thao tác tiến/lùi nhưng Chrome có thể hỗ trợ tính năng này trong phiên bản tương lai.

Bộ đệm Back/forward cache khác với bộ đệm HTTP như thế nào?

Bộ đệm HTTP của trình duyệt lưu trữ các phản hồi trước đây đối với các yêu cầu mạng để tránh phải tải xuống lại tài nguyên.

Bộ nhớ đệm Back/forward cache toàn diện hơn: có thể khôi phục toàn bộ trạng thái trang.

Khi chỉ sử dụng bộ đệm HTTP, một số tài nguyên có thể vẫn phải được tải xuống lại nếu chúng không đủ điều kiện để lưu vào bộ đệm. Sau đó, trang vẫn cần chạy bất kỳ tập lệnh trên trang nào và hiển thị nội dung trang. Với bộ đệm cho thao tác tiến/lùi, có thể tránh được rất nhiều công việc này.

Những trình duyệt nào hỗ trợ bộ nhớ đệm Back/forward cache?

Chrome, Safari, Firefox và Edge đều hỗ trợ bộ nhớ đệm này.

Tác động đến số liệu

Nếu một trang được tải từ bộ nhớ đệm, trang đó có thể hiển thị cực kỳ nhanh, điều này tốt cho Các chỉ số quan trọng về trang web đặc biệt là Core Web Vitals.

Ví dụ: tại đây, bạn có thể thấy rằng một trang được khôi phục từ bộ đệm ẩn cho thao tác tiến/lùi có Thời lượng hiển thị nội dung lớn nhất chỉ trong 100 mili giây.

So sánh điều đó với một lần tải trang điển hình mà không cần lưu vào bộ nhớ đệm, trong đó phải mất nửa giây để tải trang.

Bộ nhớ đệm Back/forward cache cũng có thể làm giảm sự thay đổi bố cục. Điều này đáng chú ý trong Báo cáo trải nghiệm người dùng Chrome của Google sau khi Chrome bật bộ đệm.