Cách bộ nhớ đệm cho thao tác tiến/lùi đã giúp Yahoo! JAPAN News tăng 9% doanh thu trên thiết bị di động

Yuriko Hirota

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ì. Giao diện này cải thiện đáng kể trải nghiệm duyệt web cho người dùng, đặc biệt đối với các trang web có nhiều thao tác điều hướng qua lại.
bài viết trên web.dev trên bfcache

Người bán trên Yahoo! JAPAN News, một trong những nền tảng tin tức phổ biến nhất tại Nhật Bản, đã nỗ lực phối hợp để cải thiện tỷ lệ truy cập bfcache, nhờ đó mà trải nghiệm người dùng và hoạt động kinh doanh tăng lên đáng kể. Cụ thể, kết quả thử nghiệm A/B mà họ thực hiện cho thấy rằng các trang sử dụng bfcache đã tăng 9% doanh thu từ quảng cáo.

Nghiên cứu điển hình này sẽ giải thích cách Yahoo! JAPAN News xoá các trình chặn cho bfcache và cách bfcache cải thiện đáng kể trải nghiệm người dùng.

Xoá trình chặn cho bfcache

bfcache đã có kể từ Chrome 86 và cũng đã có trên tất cả các trình duyệt hiện đại. Tuy nhiên, việc tận dụng tối đa bfcache yêu cầu xoá các trình chặn tiềm ẩn trên trang web của một người. Một số công cụ chặn chính mà Yahoo! JAPAN News phải đối mặt là:

Sử dụng trình xử lý unload
Sử dụng lệnh no-store trên tiêu đề Cache-control

Bạn có thể kiểm tra xem có trình chặn chính nào cho trang web của mình bằng cách chuyển tới Công cụ dành cho nhà phát triển của Chrome > Ứng dụng > Bộ nhớ đệm cho thao tác tiến/lùi (xem thêm chi tiết) hoặc sử dụng notRestoredReasons API để có cái nhìn toàn diện hơn về trình chặn dựa trên hoạt động sử dụng thực tế tại hiện trường.

Dưới đây là cách Yahoo! JAPAN News đã xoá các trình chặn:

Unload Handlers: Sử dụng sự kiện pagehide thay vì sự kiện unload, vì sự kiện unload rất không đáng tin cậy. Ngoài ra, permission-policy: unload đã được ra mắt trong Chrome 115 để các trang web có thể xoá trình xử lý unload cho nguồn gốc cụ thể một cách đáng tin cậy. Chrome cũng dự định dần dần ngừng sử dụng các trình xử lý unload.
Cache-control: no-store (hay gọi tắt là CCNS): Việc thay đổi tiêu đề Cache-control từ no-store thành no-cache có thể bật bfcache. Chrome cũng dự định bắt đầu lưu vào bộ nhớ đệm cho bfcache ngay cả với tiêu đề no-store trong một số trường hợp.

CCNS dành cho những trang không bao giờ được lưu vào bộ nhớ đệm trong bất kỳ trường hợp nào. Điều này đi kèm với cảnh báo rằng bất kỳ trang nào có CCNS sẽ không thể hưởng lợi từ bất kỳ công nghệ lưu vào bộ nhớ đệm nào, bao gồm cả máy chủ cạnh CDN và bộ nhớ đệm cục bộ.

Nếu bạn có tiêu đề CCNS thì đây là cơ hội tuyệt vời để thảo luận về các chiến lược Cache-control phù hợp cho trang web của bạn. Dưới đây là những điểm khác biệt chính giữa no-store và no-cache.

Cache-control: no-store Cache-control: no-cache

`Cache-control: no-store`	`Cache-control: no-cache`
Không cho phép lưu trữ phản hồi trong bộ nhớ đệm. Do đó, phản hồi được tìm nạp đầy đủ trong mọi yêu cầu. Thông tin này nên được dùng cho các câu trả lời riêng tư.	Phản hồi được phép lưu trữ trong bộ nhớ đệm, miễn là phản hồi được xác thực lại với máy chủ trước mỗi lần sử dụng. Đây phải là các phản hồi công khai mà bạn muốn xác thực lại mỗi lần xác thực (ví dụ: trang chủ của một trang web tin tức – mặc dù thời gian lưu vào bộ nhớ đệm rất ngắn có thể cải thiện hiệu suất và giảm tải cho công việc trên các máy chủ chính).

Không cho phép lưu trữ phản hồi trong bộ nhớ đệm.
Do đó, phản hồi được tìm nạp đầy đủ trong mọi yêu cầu.
Thông tin này nên được dùng cho các câu trả lời riêng tư.

Phản hồi được phép lưu trữ trong bộ nhớ đệm, miễn là phản hồi được xác thực lại với máy chủ trước mỗi lần sử dụng.
Đây phải là các phản hồi công khai mà bạn muốn xác thực lại mỗi lần xác thực (ví dụ: trang chủ của một trang web tin tức – mặc dù thời gian lưu vào bộ nhớ đệm rất ngắn có thể cải thiện hiệu suất và giảm tải cho công việc trên các máy chủ chính).

Nếu bạn muốn tìm hiểu thêm về các lựa chọn trên Cache-control, thì biểu đồ quy trình này sẽ rất hữu ích.

Tác động của bfcache về số lượng

Để đo lường tác động của bfcache, Yahoo! JAPAN News tiến hành thử nghiệm A/B trong 2 tuần, trong đó họ phân phát phiên bản các trang của họ đã sửa lỗi bfcache cho một nhóm và một phiên bản có các trang không đủ điều kiện để dùng bfcache cho một nhóm khác. Họ đã chọn những đường dẫn URL có lưu lượng truy cập đáng kể để thử nghiệm có thể đạt được kết quả có ý nghĩa. Không có sự khác biệt nào khác về hình ảnh hoặc chức năng giữa 2 phiên bản này.

Sau đây là video so sánh trang web có bfcache và không có bfcache. Bạn có thể thấy rằng trang web đã bật bfcache tải nhanh hơn đáng kể trong khi điều hướng tiến hoặc lùi.

Điều thực sự hứa hẹn là nhóm hỗ trợ bfcache đã tăng đáng kể số lượt xem trang và doanh thu từ quảng cáo, đặc biệt là trên thiết bị di động.

Dưới đây là thông tin chi tiết về tác động mà Yahoo! JAPAN News với thử nghiệm A/B trên bfcache. (Bạn có thể tìm thêm thông tin trong bài viết nghiên cứu điển hình của họ).

Chỉ số	Mức tăng % (thiết bị di động)	Mức tăng % (máy tính)
tỷ lệ truy cập bfcache	+54,03 điểm (0,04% → 54,07%)	+47,28 điểm (0,02% → 47,30%)
Lượt xem trang	+2,26%	+0,65%
Doanh thu quảng cáo	Tăng 9,0%	+0,6%

Khi thao tác tiến/lùi giữa các trang trở nên tức thời với bfcache, người dùng có xu hướng ở lại trang lâu hơn, do đó tăng số lượt xem quảng cáo, dẫn đến tăng doanh thu từ quảng cáo.

bfcache nâng cao trải nghiệm người dùng liền mạch trên trang web

Khi các trang tải ngay lập tức, các thao tác sẽ trở nên liền mạch hơn.

Trong Yahoo! JAPAN News, một trong những hành trình chính của người dùng như sau:

Chuyển đến danh sách bài viết
Nhấp vào một bài viết để đọc
Quay lại danh sách bài viết
Nhấp vào một bài viết khác để đọc

Trước bfcache, khi người dùng đọc xong bài viết (bước 2), họ phải đợi trang danh sách bài viết tải lại. Đây có thể là yếu tố gây phiền hà cho những người dùng chỉ muốn quay lại danh sách bài viết để chọn một bài viết khác để đọc.

Một trở ngại khác trong quá trình điều hướng lui là vị trí cuộn. Trong thực tế, trình duyệt cố gắng khôi phục vị trí cuộn khi điều hướng lui. Tuy nhiên, do quảng cáo được thêm động hoặc các thay đổi khác về bố cục, vị trí cuộn thường được khôi phục không chính xác, điều này có thể khiến người dùng mất phương hướng hoặc thậm chí rời khỏi trang. Điều này không bao giờ thành vấn đề khi tính năng điều hướng lui được bfcache hỗ trợ: vị trí cuộn được khôi phục ngay lập tức và chính xác.

Hai cuộn phim cho thao tác điều hướng ngược từ một bài viết đến trang danh sách bài viết. Trên cùng là một cuộn phim của quy trình đang được xử lý với bfcache mất 0,3 giây, trong khi phía dưới là cùng một quá trình được xử lý mà không cần bfcache, mất 3,3 giây.

Giờ đây, nhờ bfcache, hành trình của người dùng không còn gây phiền hà nữa. Người dùng có thể quay lại trang danh sách bài viết ngay lập tức rồi chọn một bài viết khác để đọc mà không cần phải đợi trang danh sách bài viết tải.

Điều tương tự cũng xảy ra khi người dùng duyệt từ trực tiếp bài viết này sang bài viết khác rồi quay lại:

Hình ảnh động minh hoạ luồng điều hướng ngược từ một bài viết đến trang danh sách bài viết có và không có bfcache. Với bfcache, điều hướng ngược không chỉ nhanh hơn mà vị trí cuộn được duy trì chính xác. Nếu không có bfcache thì không thể thực hiện những đảm bảo này.

Tóm lại, các lợi ích của việc sử dụng bfcache cho Yahoo! JAPAN News bao gồm:

Số lượt xem trang tăng: Người dùng có nhiều khả năng điều hướng trong trang web hơn khi các trang được lưu vào bộ nhớ đệm bằng bfcache.
Tăng doanh thu: Nhờ tăng số lượt xem trang trên mỗi phiên, số lượt hiển thị quảng cáo cũng tăng, dẫn đến doanh thu trên thiết bị di động tăng 9% so với nhóm thử nghiệm không sử dụng bfcache.

Kết luận

Tóm lại, bfcache không chỉ làm cho trang web của bạn trở nên tức thì mà còn có thể giảm sự phiền hà trong trải nghiệm tổng thể của người dùng và tăng mức độ tương tác trong trang web của bạn.

Nhóm Chrome liên tục xem xét các trình chặn bfcache — đặc biệt là hai lý do được liệt kê trong bài viết này vì chúng là các lý do phổ biến khiến bfcache không được sử dụng. Trong tương lai, những chế độ cài đặt này có thể không ngăn việc sử dụng bfcache, nhưng bạn không cần phải đợi đến lúc đó. Bạn có thể hưởng lợi từ bfcache bằng cách xem xét các trình chặn bfcache và tránh các mẫu phổ biến và ít phổ biến hơn này.