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 (hoặc bfcache) là một tính năng tối ưu hoá của trình duyệt, cho phép điều hướng tiến và lùi trong tích tắc. Tính năng này cải thiện đáng kể trải nghiệm duyệt web cho người dùng, đặc biệt là đối với những trang web có nhiều thao tác quay lại và chuyển tiếp.
Bài viết trên web.dev về bfcache

Mức phân bổ ngân sách tối thiểu cho Yahoo! JAPAN News, một trong những nền tảng tin tức phổ biến nhất ở Nhật Bản, đã nỗ lực phối hợp để cải thiện tỷ lệ truy cập vào bfcache, nhờ đó mang lại trải nghiệm người dùng và kết quả kinh doanh đáng kể. Cụ thể, kết quả thử nghiệm A/B mà họ tiến hành cho thấy những 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ó từ Chrome 86 và cũng có trên tất cả trình duyệt hiện đại. Tuy nhiên, để khai thác tối đa bfcache, bạn cần xoá các trình chặn tiềm ẩn trên trang web của mình. Một số trình chặn chính mà Yahoo! JAPAN News đã gặp phải các vấn đề sau:

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 những trình chặn chính đối với trang web của mình bằng cách chuyển đến Công cụ của Chrome cho nhà phát triển > Ứng dụng > Bộ nhớ đệm lui/về trước (thông tin chi tiết hơn) hoặc bằng cách sử dụng notRestoredReasons API để có được thông tin toàn diện hơn về trình chặn dựa trên mức sử dụng thực tế trong trường hợp này.

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

Trình xử lý huỷ tải: 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, Permissions-Policy: unload=() đã được ra mắt trong Chrome 115 để các trang web có thể xoá trình xử lý unload một cách đáng tin cậy cho các nguồn gốc cụ thể. Chrome cũng dự định dần ngừng sử dụng trình xử lý unload.
Cache-control: no-store (viết 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ả khi có tiêu đề no-store trong một số trường hợp nhất định.

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. Tuy nhiên, bạn cần lưu ý rằng mọi trang 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ủ biên CDN và bộ nhớ đệm cục bộ.

Nếu bạn có tiêu đề CCNS, đây là cơ hội tuyệt vời để thảo luận về những chiến lược Cache-control phù hợp với 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 được lưu trữ phản hồi trong bộ nhớ đệm. Do đó, phản hồi được tìm nạp đầy đủ trên mỗi yêu cầu. Bạn nên sử dụng thuộc tính này cho các câu trả lời riêng tư.	Bạn được phép lưu trữ phản hồi 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 (ví dụ: trang chủ của một trang web tin tức – mặc dù ngay cả khi đó, thời gian lưu vào bộ nhớ đệm rất ngắn cũng có thể cải thiện hiệu suất và giảm tải công việc từ các máy chủ chính).

Không được lưu trữ phản hồi trong bộ nhớ đệm.
Do đó, phản hồi được tìm nạp đầy đủ trên mỗi yêu cầu.
Bạn nên sử dụng thuộc tính này cho các câu trả lời riêng tư.

Bạn được phép lưu trữ phản hồi 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 (ví dụ: trang chủ của một trang web tin tức – mặc dù ngay cả khi đó, thời gian lưu vào bộ nhớ đệm rất ngắn cũng có thể cải thiện hiệu suất và giảm tải công việc từ các máy chủ chính).

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

Tác động của bfcache theo số liệu

Để đ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 một phiên bản trang có bản 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 sử dụng bfcache cho một nhóm khác. Họ đã chọn các đườ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.

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 quá trình điều hướng lui hoặc tiến.

Điều thực sự hứa hẹn là nhóm đã bật 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.

Sau đây là thông tin chi tiết về tác động mà Yahoo! ghi nhận được. JAPAN News với thử nghiệm A/B bfcache. (Bạn có thể xem 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 hiệu suất (%) (thiết bị di động)	Mức tăng hiệu suất (%) (máy tính)
Tỷ lệ truy cập bfcache	Tăng 54,03 điểm (0,04% → 54,07%)	+47,28 điểm (0,02% → 47,30%)
Lượt xem trang	Tăng 2,26%	+0,65%
Doanh thu quảng cáo	Tăng 9,0%	+0,6%

Khi thao tác quay lại/chuyển tiếp giữa các trang trở nên tức thì nhờ bfcache, người dùng có xu hướng ở lại các 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 liền mạch cho người dùng trên trang web

Khi các trang tải tức thì, trải nghiệm điều hướng sẽ 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 khi có bfcache, khi đọc xong một bài viết (bước 2), người dùng phải đợi trang danh sách bài viết tải lại. Đây có thể là một yếu tố gây phiền toái 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 nguyên nhân khác gây khó khăn trong quá trình điều hướng ngược là vị trí cuộn. Trong thực tế, trình duyệt sẽ cố gắng khôi phục vị trí cuộn khi thao tác điều hướng lui xảy ra. 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. Đây không bao giờ là vấn đề khi thao tác điều hướng lui được cung cấp bởi bfcache: vị trí cuộn được khôi phục ngay lập tức và chính xác.

Hai băng hình về thao tác quay lại từ một bài viết đến trang danh sách bài viết. Phần trên cùng là một dải phim của quy trình được xử lý bằng bfcache, mất 0,3 giây, trong khi phần dưới cùng là của cùng một quy trình được xử lý mà không có bfcache, mất 3,3 giây.

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

Điều tương tự cũng xảy ra khi người dùng duyệt qua một bài viết rồi chuyển sang bài viết khác và quay lại:

Hình ảnh động cho thấy 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, thao tác điều hướng lui không chỉ nhanh hơn mà vị trí cuộn cũng được duy trì chính xác. Nếu không có bfcache, bạn không thể đưa ra những đảm bảo này.

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

Tăng số lượt xem trang: Người dùng có nhiều khả năng di chuyển trong trang web hơn khi các trang được lưu vào bộ nhớ đệm bằng bfcache.
Tăng doanh thu: Do số lượt xem trang trên mỗi phiên tăng lên, số lượt hiển thị quảng cáo cũng tăng lên, 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 có bfcache.

Kết luận

Tóm lại, bfcache không chỉ giúp trang web của bạn tải 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 trên trang web.

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ì đây là những lý do phổ biến khiến bfcache không được sử dụng. Trong tương lai, các vấn đề 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 trình chặn bfcache và tránh các mẫu phổ biến này cũng như các mẫu ít phổ biến khác.