Bộ nhớ đệm cho thao tác tiến và lùi

Philip Walton
Barry Pollard

Bộ nhớ đệm cho thao tác tiến/lùi (hay bfcache) là một tính năng tối ưu hoá trình duyệt, cho phép điều hướng tiến và lùi tức thì. Phiên bản này cải thiện đáng kể trải nghiệm duyệt web, đặc biệt là đối với người dùng có mạng hoặc thiết bị chậm.

Trang này trình bày cách tối ưu hoá các trang của bạn cho bfcache trên tất cả các trình duyệt.

Khả năng tương thích với trình duyệt

bfcache đã được hỗ trợ trong cả Firefox và Safari trong nhiều năm, trên máy tính và thiết bị di động.

Kể từ phiên bản 86, Chrome đã bật bfcache cho thao tác trên nhiều trang web trên Android cho một tỷ lệ nhỏ người dùng. Trong các bản phát hành tiếp theo, tính năng hỗ trợ bổ sung được triển khai dần dần. Kể từ phiên bản 96, bfcache được bật cho tất cả người dùng Chrome trên máy tính và thiết bị di động.

kiến thức cơ bản về bfcache

bfcache là một bộ nhớ đệm trong bộ nhớ giúp lưu trữ ảnh chụp nhanh hoàn chỉnh của một trang khi người dùng di chuyển khỏi đó. Với toàn bộ trang trong bộ nhớ, trình duyệt có thể nhanh chóng khôi phục trang nếu người dùng quyết định quay lại, thay vì cần lặp lại tất cả yêu cầu mạng cần thiết để tải trang.

Video sau đây chỉ cho thấy mức tăng tốc độ điều hướng của bfcache:

Việc sử dụng bfcache giúp các trang tải nhanh hơn nhiều trong quá trình điều hướng tiến và lùi.

Dữ liệu sử dụng Chrome cho thấy rằng 1/10 thao tác điều hướng trên máy tính và 1/5 thao tác trên thiết bị di động là tiến hoặc lùi. Vì vậy, bfcache có khả năng tiết kiệm rất nhiều thời gian và mức sử dụng dữ liệu.

Cách hoạt động của "bộ nhớ đệm"

"Bộ nhớ đệm" mà bfcache sử dụng khác với bộ nhớ đệm HTTP. Bộ nhớ đệm này đóng vai trò riêng trong việc tăng tốc các thao tác lặp lại. bfcache là một bản tổng quan nhanh của toàn bộ trang trong bộ nhớ, bao gồm cả vùng nhớ khối xếp JavaScript, trong khi bộ nhớ đệm HTTP chỉ chứa phản hồi cho các yêu cầu được đưa ra trước đó. Vì rất hiếm khi xảy ra tất cả các yêu cầu cần tải một trang để có thể thực hiện được từ bộ nhớ đệm HTTP, nên các lượt truy cập lặp lại bằng tính năng khôi phục bfcache luôn nhanh hơn cả các thao tác điều hướng không phải bfcache được tối ưu hoá tốt nhất.

Tuy nhiên, việc tạo ảnh chụp nhanh về một trang trong bộ nhớ có thể gây ra một số vấn đề phức tạp về cách tốt nhất để duy trì mã đang tiến hành. Ví dụ: bạn xử lý các lệnh gọi setTimeout() khi hết thời gian chờ trong khi trang đang ở trong bộ nhớ đệm bfcache?

Câu trả lời là các trình duyệt sẽ tạm dừng mọi đồng hồ hẹn giờ đang chờ xử lý hoặc lời hứa chưa được giải quyết cho các trang trong bfcache, bao gồm hầu hết mọi tác vụ đang chờ xử lý trong hàng đợi tác vụ JavaScript và tiếp tục xử lý các tác vụ nếu trang được khôi phục từ bfcache.

Trong một số trường hợp, chẳng hạn như đối với thời gian chờ và lời hứa, đây là rủi ro khá thấp, nhưng cũng có thể dẫn đến hành vi khó hiểu hoặc không mong muốn. Ví dụ: nếu trình duyệt tạm dừng một tác vụ cần thiết cho một giao dịch IndexedDB, thì việc đó có thể ảnh hưởng đến các thẻ đang mở khác ở cùng một nguồn gốc, vì nhiều thẻ truy cập cùng một cơ sở dữ liệu IndexedDB. Do đó, trình duyệt thường sẽ không cố gắng lưu các trang vào bộ nhớ đệm trong quá trình thực hiện giao dịch IndexedDB hoặc trong khi sử dụng các API có thể ảnh hưởng đến các trang khác.

Để biết thêm thông tin về mức độ ảnh hưởng của việc sử dụng API đến khả năng đáp ứng điều kiện của bfcache của trang, hãy xem phần Tối ưu hoá các trang của bạn cho bfcache.

Bộ nhớ đệm và ứng dụng trang đơn (SPA)

Vì bfcache hoạt động với các thao tác điều hướng do trình duyệt quản lý, nên bfcache không hoạt động trong "thao tác mềm" trong ứng dụng trang đơn (SPA). Tuy nhiên, bfcache vẫn có thể hữu ích khi rời khỏi và quay lại SPA.

Các API để quan sát bfcache

Mặc dù bfcache là một tính năng tối ưu hoá mà các trình duyệt tự động thực hiện, nhưng nhà phát triển vẫn phải biết thời điểm xảy ra để có thể tối ưu hoá trang của mình và điều chỉnh mọi chỉ số hoặc hoạt động đo lường hiệu suất cho phù hợp.

Các sự kiện chính dùng để quan sát bfcache là sự kiện chuyển đổi trang pageshow và pagehide, được hầu hết các trình duyệt hỗ trợ.

Các sự kiện Vòng đời trang mới hơn, freeze và resume, cũng được gửi khi các trang truy cập vào hoặc rời khỏi bfcache, cũng như trong một số trường hợp khác, chẳng hạn như khi một thẻ trong nền bị treo để giảm thiểu mức sử dụng CPU. Các sự kiện này chỉ được hỗ trợ trong trình duyệt dựa trên Chromium.

Quan sát thời điểm một trang được khôi phục từ bfcache

Sự kiện pageshow sẽ kích hoạt ngay sau sự kiện load khi trang đang tải ban đầu và bất cứ khi nào trang được khôi phục từ bfcache. Sự kiện pageshow có một thuộc tính persisted, là true nếu trang được khôi phục từ bfcache và nếu không thì false. Bạn có thể sử dụng thuộc tính persisted để phân biệt hoạt động tải trang thông thường với hoạt động khôi phục bfcache. Ví dụ:

window.addEventListener('pageshow', (event) => {
  if (event.persisted) {
    console.log('This page was restored from the bfcache.');
  } else {
    console.log('This page was loaded normally.');
  }
});

Trong các trình duyệt hỗ trợ Page Lifecycle API, sự kiện resume sẽ kích hoạt khi các trang được khôi phục từ bfcache (ngay trước sự kiện pageshow) và khi người dùng truy cập lại vào một thẻ nền bị treo. Nếu muốn cập nhật trạng thái của một trang sau khi trang bị treo (bao gồm cả các trang trong bfcache), bạn có thể sử dụng sự kiện resume, nhưng nếu muốn đo tỷ lệ truy cập bfcache của trang web thì bạn cần sử dụng sự kiện pageshow. Trong một số trường hợp, bạn có thể cần sử dụng cả hai.

Để biết thông tin chi tiết về các phương pháp hay nhất khi đo lường bfcache, hãy xem bài viết Cách bfcache ảnh hưởng đến phân tích và đo lường hiệu suất.

Quan sát khi một trang chuyển vào bfcache

Sự kiện pagehide sẽ kích hoạt khi một trang huỷ tải hoặc khi trình duyệt cố gắng đặt trang đó vào bfcache.

Sự kiện pagehide cũng có một thuộc tính persisted. Nếu là false, bạn có thể tự tin rằng trang đó sẽ không vào bfcache. Tuy nhiên, việc persisted là true không đảm bảo rằng một trang sẽ được lưu vào bộ nhớ đệm. Điều này có nghĩa là trình duyệt intends lưu trang vào bộ nhớ đệm, nhưng có thể có các yếu tố khác khiến bạn không thể lưu trang vào bộ nhớ đệm.

window.addEventListener('pagehide', (event) => {
  if (event.persisted) {
    console.log('This page *might* be entering the bfcache.');
  } else {
    console.log('This page will unload normally and be discarded.');
  }
});

Tương tự, sự kiện freeze sẽ kích hoạt ngay sau sự kiện pagehide nếu persisted là true, nhưng điều đó chỉ có nghĩa là trình duyệt intends lưu trang vào bộ nhớ đệm. Tài khoản này có thể vẫn phải loại bỏ tài khoản vì một số lý do sẽ được giải thích sau này.

Tối ưu hoá các trang của bạn cho bfcache

Không phải trang nào cũng được lưu trữ trong bfcache và ngay cả khi một trang được lưu trữ ở đó, nó sẽ không ở đó vô thời hạn. Các trang sau đây trình bày những điều khiến các trang đủ điều kiện dùng bộ nhớ đệm bfcache, đồng thời đề xuất các phương pháp hay nhất để tối đa hoá khả năng lưu trang vào bộ nhớ đệm của trình duyệt nhằm đạt được tỷ lệ truy cập vào bộ nhớ đệm cao hơn.

Sử dụng pagehide thay vì unload

Cách quan trọng nhất để tối ưu hoá bfcache trên mọi trình duyệt là tuyệt đối không dùng trình nghe sự kiện unload. Thay vào đó, hãy theo dõi pagehide, vì mã này sẽ kích hoạt cả khi một trang chuyển sang bfcache và bất cứ khi nào unload kích hoạt.

unload là một tính năng cũ hơn, ban đầu được thiết kế để kích hoạt bất cứ khi nào người dùng di chuyển khỏi một trang. Trường hợp này không còn như vậy, nhưng nhiều trang web vẫn hoạt động trên giả định các trình duyệt sử dụng unload theo cách này và sau khi unload kích hoạt, trang chưa tải sẽ ngừng tồn tại. Điều này có thể làm hỏng bfcache nếu trình duyệt cố gắng lưu một trang đã huỷ tải vào bộ nhớ đệm.

Trên máy tính, Chrome và Firefox khiến các trang có trình nghe unload không đủ điều kiện để dùng bfcache. Điều này giúp giảm rủi ro nhưng cũng khiến nhiều trang không được lưu vào bộ nhớ đệm và do đó tải lại chậm hơn nhiều. Safari cố gắng lưu một số trang vào bộ nhớ đệm bằng trình nghe sự kiện unload, nhưng để giảm khả năng xảy ra sự cố, Safari sẽ không chạy sự kiện unload khi người dùng rời khỏi, điều này khiến trình nghe unload không đáng tin cậy.

Trên thiết bị di động, Chrome và Safari cố gắng lưu các trang vào bộ nhớ đệm bằng trình nghe sự kiện unload, vì tính không đáng tin cậy của unload trên thiết bị di động khiến nguy cơ bị sự cố giảm xuống. Firefox dành cho thiết bị di động coi các trang sử dụng unload là không đủ điều kiện cho bfcache, ngoại trừ trên iOS, vì trình duyệt này yêu cầu tất cả trình duyệt phải sử dụng công cụ kết xuất WebKit, để hoạt động giống như Safari.

Để xác định xem có JavaScript nào trên các trang của bạn sử dụng unload hay không, bạn nên sử dụng quy trình kiểm tra no-unload-listeners trong Lighthouse.

Để biết thông tin về kế hoạch của Chrome sẽ không dùng unload nữa, hãy tham khảo bài viết Ngừng sử dụng sự kiện huỷ tải.

Sử dụng Chính sách về quyền để ngăn việc sử dụng trình xử lý huỷ tải trên một trang

Một số tập lệnh và tiện ích của bên thứ ba có thể thêm trình xử lý huỷ tải vào một trang, khiến trang web không đủ điều kiện để lưu vào bfcache. Để ngăn chặn điều này trong Chrome 115 trở lên, hãy sử dụng Chính sách về quyền.

Permission-Policy: unload()

Chỉ thêm trình nghe beforeunload theo điều kiện

Sự kiện beforeunload không làm cho các trang của bạn không đủ điều kiện để dùng bộ nhớ đệm cho thao tác tiến/lùi. Tuy nhiên, phương thức này không đáng tin cậy, vì vậy, bạn chỉ nên sử dụng phương thức này khi thực sự cần thiết.

Một ví dụ về trường hợp sử dụng cho beforeunload là cảnh báo người dùng rằng họ sẽ mất các thay đổi chưa lưu nếu rời khỏi trang. Trong trường hợp này, bạn chỉ nên thêm trình nghe beforeunload khi người dùng có các thay đổi chưa lưu, và sau đó xoá các trình nghe đó ngay sau khi lưu những thay đổi chưa lưu, như trong mã sau:

function beforeUnloadListener(event) {
  event.preventDefault();
  return event.returnValue = 'Are you sure you want to exit?';
};

// A function that invokes a callback when the page has unsaved changes.
onPageHasUnsavedChanges(() => {
  window.addEventListener('beforeunload', beforeUnloadListener);
});

// A function that invokes a callback when the page's unsaved changes are resolved.
onAllChangesSaved(() => {
  window.removeEventListener('beforeunload', beforeUnloadListener);
});

Giảm thiểu việc sử dụng Cache-Control: no-store

Cache-Control: no-store là một tiêu đề HTTP mà các máy chủ web có thể đặt trên các phản hồi hướng dẫn trình duyệt không lưu trữ phản hồi trong bất kỳ bộ nhớ đệm HTTP nào. API này được dùng cho những tài nguyên chứa thông tin nhạy cảm của người dùng, chẳng hạn như các trang yêu cầu đăng nhập.

Mặc dù bfcache không phải là bộ nhớ đệm HTTP, nhưng trước đây trình duyệt đã loại trừ các trang khỏi bfcache khi Cache-Control: no-store được đặt trên tài nguyên trang (chứ không phải trên bất kỳ tài nguyên phụ nào). Chrome đang nỗ lực thay đổi hành vi này trong khi vẫn duy trì quyền riêng tư của người dùng, nhưng theo mặc định, các trang sử dụng Cache-Control: no-store sẽ không đủ điều kiện dùng bfcache.

Để tối ưu hoá cho bfcache, chỉ dùng Cache-Control: no-store trên các trang chứa thông tin nhạy cảm không được lưu vào bộ nhớ đệm.

Đối với những trang muốn luôn phân phát nội dung mới nhất nhưng không có thông tin nhạy cảm, hãy sử dụng Cache-Control: no-cache hoặc Cache-Control: max-age=0. Các lệnh này sẽ yêu cầu trình duyệt xác thực lại nội dung trước khi phân phát và không ảnh hưởng đến khả năng đáp ứng điều kiện bfcache của trang vì việc khôi phục một trang từ bfcache không liên quan đến bộ nhớ đệm HTTP.

Nếu nội dung của bạn thay đổi theo từng phút, hãy tìm nạp thông tin cập nhật bằng cách sử dụng sự kiện pageshow để đảm bảo trang của bạn luôn được cập nhật như mô tả trong phần tiếp theo.

Cập nhật dữ liệu cũ hoặc nhạy cảm sau khi khôi phục bfcache

Nếu trang web của bạn giữ lại dữ liệu trạng thái người dùng và đặc biệt là nếu dữ liệu đó bao gồm thông tin nhạy cảm của người dùng, thì bạn phải cập nhật hoặc xoá dữ liệu đó sau khi khôi phục một trang từ bfcache.

Ví dụ: nếu người dùng đăng xuất khỏi trang web trên máy tính công cộng và người dùng tiếp theo nhấp vào nút quay lại, thì dữ liệu cũ từ bfcache có thể bao gồm dữ liệu riêng tư mà người dùng đầu tiên dự kiến sẽ bị xoá khi họ đăng xuất.

Để tránh những trường hợp như vậy, hãy luôn cập nhật trang sau sự kiện pageshow nếu event.persisted là true:

window.addEventListener('pageshow', (event) => {
  if (event.persisted) {
    // Do any checks and updates to the page
  }
});

Đối với một số thay đổi, bạn có thể buộc phải tải lại toàn bộ, giữ lại nhật ký điều hướng cho các thao tác tiến lên. Mã sau đây sẽ kiểm tra sự hiện diện của một cookie dành riêng cho trang web trong sự kiện pageshow và tải lại nếu không tìm thấy cookie:

window.addEventListener('pageshow', (event) => {
  if (event.persisted && !document.cookie.match(/my-cookie)) {
    // Force a reload if the user has logged out.
    location.reload();
  }
});

Khôi phục quảng cáo và bộ nhớ đệm

Bạn nên tránh sử dụng bfcache để trang của bạn có thể phân phát một nhóm quảng cáo mới trên mỗi lần điều hướng tiến hoặc lùi. Tuy nhiên, điều này ảnh hưởng xấu đến hiệu suất trang web và không giúp tăng mức độ tương tác với quảng cáo một cách nhất quán. Ví dụ: người dùng có thể có ý định quay lại một trang để nhấp vào một quảng cáo, nhưng nếu trang được tải lại thay vì khôi phục từ bfcache, có thể trang đó sẽ hiển thị một quảng cáo khác. Bạn nên sử dụng thử nghiệm A/B để xác định chiến lược tốt nhất cho trang của mình.

Đối với các trang web muốn làm mới quảng cáo khi khôi phục bfcache, bạn chỉ có thể làm mới quảng cáo trên sự kiện pageshow khi event.persisted là true mà không ảnh hưởng đến hiệu suất của trang, như trong ví dụ về Thẻ xuất bản của Google. Để biết thêm thông tin về các phương pháp hay nhất cho trang web, hãy liên hệ với nhà cung cấp quảng cáo của bạn.

Tránh tham chiếu window.opener

Trong các trình duyệt cũ, nếu bạn mở một trang bằng window.open() qua một đường liên kết với target=_blank mà không chỉ định rel="noopener", thì trang mở sẽ tham chiếu đến đối tượng cửa sổ của trang đã mở.

Ngoài việc này là rủi ro bảo mật, bạn không thể đặt một trang có tham chiếu window.opener có giá trị rỗng vào bfcache vì như vậy có thể làm hỏng mọi trang tìm cách truy cập vào đó.

Để tránh những rủi ro này, hãy sử dụng rel="noopener" để ngăn việc tạo tệp tham chiếu window.opener. Đây là hành vi mặc định trong tất cả trình duyệt hiện đại. Nếu trang web của bạn cần mở một cửa sổ và kiểm soát cửa sổ đó bằng window.postMessage() hoặc bằng cách tham chiếu trực tiếp đối tượng cửa sổ, thì cả cửa sổ đang mở lẫn cửa sổ mở đều không đủ điều kiện dùng bfcache.

Đóng các kết nối đang mở trước khi người dùng rời đi

Như đã đề cập trước đó, khi một trang được đưa vào bfcache, thao tác này sẽ tạm dừng tất cả các tác vụ JavaScript đã lên lịch và tiếp tục các thao tác đó khi trang được lấy ra khỏi bộ nhớ đệm.

Nếu các tác vụ JavaScript đã lên lịch này chỉ truy cập vào API DOM hoặc các API khác tách biệt với trang hiện tại, thì việc tạm dừng các tác vụ này trong khi trang không hiển thị cho người dùng sẽ không gây ra vấn đề gì.

Tuy nhiên, nếu những tác vụ này được kết nối với các API cũng có thể truy cập được từ các trang khác trong cùng một nguồn gốc (ví dụ: IndexedDB, Web Locks và WebSockets), thì việc tạm dừng các tác vụ này có thể làm hỏng các trang đó bằng cách ngăn mã trên các trang đó chạy.

Do đó, một số trình duyệt sẽ không tìm cách đặt một trang vào bfcache nếu trang đó có một trong các tuỳ chọn sau:

Nếu trang của bạn đang sử dụng bất kỳ API nào trong số này, bạn nên đóng các kết nối và xoá hoặc ngắt kết nối đối tượng tiếp nhận dữ liệu trong sự kiện pagehide hoặc freeze. Điều đó cho phép trình duyệt lưu trang vào bộ nhớ đệm một cách an toàn mà không có nguy cơ ảnh hưởng đến các thẻ đang mở khác. Sau đó, nếu trang được khôi phục từ bfcache, bạn có thể mở lại hoặc kết nối lại với các API đó trong sự kiện pageshow hoặc resume.

Ví dụ sau cho biết cách đảm bảo rằng các trang sử dụng IndexedDB đủ điều kiện sử dụng bfcache bằng cách đóng một kết nối mở trong trình nghe sự kiện pagehide:

let dbPromise;
function openDB() {
  if (!dbPromise) {
    dbPromise = new Promise((resolve, reject) => {
      const req = indexedDB.open('my-db', 1);
      req.onupgradeneeded = () => req.result.createObjectStore('keyval');
      req.onerror = () => reject(req.error);
      req.onsuccess = () => resolve(req.result);
    });
  }
  return dbPromise;
}

// Close the connection to the database when the user leaves.
window.addEventListener('pagehide', () => {
  if (dbPromise) {
    dbPromise.then(db => db.close());
    dbPromise = null;
  }
});

// Open the connection when the page is loaded or restored from bfcache.
window.addEventListener('pageshow', () => openDB());

Kiểm tra để đảm bảo các trang của bạn có thể lưu vào bộ nhớ đệm

Dịch vụ Công cụ của Chrome cho nhà phát triển có thể giúp bạn kiểm thử các trang để đảm bảo các trang đó được tối ưu hoá cho bfcache và xác định mọi vấn đề có thể khiến các trang đó không đủ điều kiện.

Cách kiểm tra một trang:

  1. Chuyển đến trang đó trong Chrome.
  2. Trong Công cụ cho nhà phát triển, hãy chuyển đến Ứng dụng > Bộ nhớ đệm cho thao tác tiến/lùi.
  3. Nhấp vào nút Run Test (Chạy phép kiểm thử). Sau đó, Công cụ cho nhà phát triển sẽ cố gắng chuyển sang phần khác và quay lại để xác định xem có thể khôi phục trang từ bfcache hay không.
Bảng điều khiển bộ nhớ đệm cho thao tác tiến/lùi trong Công cụ cho nhà phát triển
Bảng điều khiển Bộ nhớ đệm cho thao tác tiến/lùi trong Công cụ cho nhà phát triển.

Nếu kiểm tra thành công, bảng điều khiển sẽ báo cáo "Đã khôi phục từ bộ nhớ đệm cho thao tác tiến/lùi". Nếu không thành công, bảng điều khiển sẽ cho biết lý do. Để biết danh sách đầy đủ các lý do, hãy xem Danh sách lý do chưa được khôi phục cho Chromium.

Nếu lý do là vấn đề bạn có thể giải quyết với tư cách là nhà phát triển, thì bảng điều khiển sẽ đánh dấu lý do đó là Có thể hành động.

Lỗi báo cáo Công cụ cho nhà phát triển không khôi phục được trang từ bfcache
Thử nghiệm bfcache không thành công và cho ra kết quả hữu ích.

Trong hình ảnh này, việc sử dụng trình nghe sự kiện unload sẽ khiến trang không đủ điều kiện để dùng bfcache. Bạn có thể khắc phục vấn đề đó bằng cách chuyển từ unload sang sử dụng pagehide:

Nên
window.addEventListener('pagehide', ...);
Không nên
window.addEventListener('unload', ...);

Lighthouse 10.0 cũng thêm tính năng kiểm tra bfcache, giúp thực hiện kiểm thử tương tự. Để biết thêm thông tin, hãy xem tài liệu về quy trình kiểm tra bfcache.

Cách bfcache ảnh hưởng đến số liệu phân tích và đo lường hiệu suất

Nếu sử dụng công cụ phân tích để theo dõi lượt truy cập vào trang web của mình, bạn có thể nhận thấy tổng số lượt xem trang được báo cáo giảm vì Chrome bật bfcache cho nhiều người dùng hơn.

Trên thực tế, có thể bạn đã báo cáo thiếu số lượt xem trang từ các trình duyệt khác triển khai bfcache, vì hầu hết các thư viện phân tích phổ biến không theo dõi khôi phục bfcache dưới dạng lượt xem trang mới.

Để tính cả số lần khôi phục bfcache vào số lượt xem trang, hãy đặt trình nghe cho sự kiện pageshow và kiểm tra thuộc tính persisted.

Ví dụ sau cho thấy cách thực hiện việc này với Google Analytics. Các công cụ phân tích khác có thể sử dụng logic tương tự:

// Send a pageview when the page is first loaded.
gtag('event', 'page_view');

window.addEventListener('pageshow', (event) => {
  // Send another pageview if the page is restored from bfcache.
  if (event.persisted) {
    gtag('event', 'page_view');
  }
});

Đo lường tỷ lệ truy cập bfcache của bạn

Để xác định những trang chưa sử dụng bfcache, hãy đo lường loại điều hướng cho lượt tải trang như sau:

// Send a navigation_type when the page is first loaded.
gtag('event', 'page_view', {
   'navigation_type': performance.getEntriesByType('navigation')[0].type;
});

window.addEventListener('pageshow', (event) => {
  if (event.persisted) {
    // Send another pageview if the page is restored from bfcache.
    gtag('event', 'page_view', {
      'navigation_type': 'back_forward_cache';
    });
  }
});

Tính tỷ lệ truy cập bfcache bằng cách sử dụng số lần điều hướng back_forward và điều hướng back_forward_cache.

Có những lý do khiến tính năng điều hướng tiến hoặc lùi có thể không sử dụng bfcache bao gồm hành vi sau đây của người dùng:

  • Thoát và khởi động lại trình duyệt.
  • Sao chép một thẻ.
  • Đóng và khôi phục thẻ.

Trong một số trường hợp như vậy, trình duyệt có thể giữ nguyên kiểu điều hướng ban đầu và hiển thị một loại back_forward, mặc dù những thao tác này không phải là thao tác điều hướng quay lại hoặc tiến. Ngay cả khi các loại điều hướng được báo cáo chính xác, bfcache vẫn được loại bỏ định kỳ để tiết kiệm bộ nhớ.

Do đó, chủ sở hữu trang web không thể kỳ vọng tỷ lệ truy cập bfcache là 100% cho tất cả các thao tác điều hướng back_forward. Tuy nhiên, việc đo lường tỷ lệ của chúng có thể giúp xác định các trang ngăn việc sử dụng bfcache.

Nhóm Chrome đang nghiên cứu API NotRestoredReasons nhằm giúp chỉ ra lý do các trang không sử dụng bfcache, nhờ đó nhà phát triển có thể cải thiện tỷ lệ truy cập bfcache.

Đo lường hiệu suất

bfcache cũng có thể ảnh hưởng tiêu cực đến các chỉ số hiệu suất được thu thập trong trường, cụ thể là các chỉ số đo lường thời gian tải trang.

Vì các thao tác điều hướng bfcache khôi phục một trang hiện có, thay vì bắt đầu một lượt tải trang mới, nên tổng số lượt tải trang được thu thập sẽ giảm khi bfcache được bật. Tuy nhiên, trang tải bfcache thay thế có thể là một trong những lần tải trang nhanh nhất trong tập dữ liệu của bạn, vì tải trang lặp lại, bao gồm cả thao tác tiến và lùi, thường nhanh hơn tải trang lần đầu do lưu vào bộ nhớ đệm HTTP. Vì vậy, việc bật bfcache có thể khiến các phân tích của bạn hiển thị tốc độ tải trang chậm hơn, mặc dù có cải thiện hiệu suất trang web cho người dùng.

Có một vài cách để xử lý vấn đề này. Một là chú thích tất cả các chỉ số tải trang bằng loại điều hướng tương ứng: navigate, reload, back_forward hoặc prerender. Điều này giúp bạn tiếp tục theo dõi hiệu suất trong các loại điều hướng này, ngay cả khi phân phối tổng thể có xu hướng âm. Bạn nên sử dụng phương pháp này cho các chỉ số tải trang không tập trung vào người dùng như Thời gian cho byte đầu tiên (TTFB).

Đối với các chỉ số tập trung vào người dùng như Các chỉ số quan trọng về trang web, bạn nên báo cáo một giá trị thể hiện chính xác hơn trải nghiệm người dùng.

Tác động đến Các chỉ số quan trọng về trang web

Các chỉ số quan trọng về trang web đo lường trải nghiệm của người dùng trên một trang web trên nhiều phương diện (tốc độ tải, tính tương tác, độ ổn định về hình ảnh). Điều quan trọng là các chỉ số quan trọng về trang web phải phản ánh thực tế là người dùng trải nghiệm bfcache sẽ khôi phục dưới dạng các thao tác điều hướng nhanh hơn so với tải trang mặc định.

Những công cụ thu thập và báo cáo về các chỉ số quan trọng về trang web, chẳng hạn như Báo cáo trải nghiệm người dùng trên Chrome, coi việc khôi phục bfcache là các lượt truy cập trang riêng biệt trong tập dữ liệu của công cụ. Và mặc dù chưa có API hiệu suất web chuyên biệt để đo lường các chỉ số này sau khi khôi phục bfcache, bạn có thể ước tính giá trị của chúng bằng cách sử dụng API web hiện có:

Để biết thêm thông tin về ảnh hưởng của bfcache ảnh hưởng đến từng chỉ số, hãy xem các trang hướng dẫn về chỉ số cho các chỉ số quan trọng chính của trang web. Để xem ví dụ cụ thể về cách triển khai phiên bản bfcache của các chỉ số này, hãy tham khảo bài viết PR thêm chúng vào thư viện web-vitals JS.

Nguồn thông tin khác