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
Yuriko Hirota
X LinkedIn

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 di chuyển qua lại.

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 cải thiện tỷ lệ truy cập vào bộ nhớ đệm chuyển tiếp và quay lại (bfcache) và nhờ đó, trải nghiệm người dùng cũng như hoạt động kinh doanh đã có những cải thiện đáng kể. Cụ thể, kết quả của thử nghiệm A/B mà họ tiến hành cho thấy những trang sử dụng bfcache có doanh thu từ quảng cáo tăng 9%.

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

Xoá các yếu tố chặn đối với bfcache

bfcache đã có từ Chrome 86 và cũng có trên tất cả các trình duyệt hiện đại. Tuy nhiên, để tận dụng tối đa bộ nhớ đệm chuyển tiếp và quay lại, bạn cần loại bỏ những yếu tố có thể chặn trên trang web của mình. Một số yếu tố chính ngăn chặn Yahoo! JAPAN News gặp phải:

  1. Sử dụng trình xử lý unload.
  2. Sử dụng chỉ thị no-store trên tiêu đề Cache-control.

Bạn có thể kiểm tra các vấn đề chính gây cản trở trên trang web của mình bằng cách chuyển đến Chrome DevTools > Applications (Ứng dụng) > Back/forward Cache (Bộ nhớ đệm lui/tiến). Ngoài ra, bạn có thể sử dụng API notRestoredReasons để có cái nhìn toàn diện hơn về các thành phần chặn dựa trên mức sử dụng thực tế.

Sau đây là cách Yahoo! JAPAN News đã gỡ bỏ các công cụ chặn:

CCNS dành cho những trang không bao giờ được lưu vào bộ nhớ đệm, trong mọi trường hợp. Điều này đi kèm với cảnh báo rằng các trang có CCNS không được 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, thì đâ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 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
  • Không được phép 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 dùng tính năng này 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à những 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ó thể cải thiện hiệu suất và giảm tải công việc cho các máy chủ chính).

Để tìm hiểu thêm về các lựa chọn cache-control, hãy xem sơ đồ quy trình cache-control.

Thử nghiệm A/B để minh hoạ mức độ tác độ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. Họ phân phát một phiên bản trang có cá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 dùng bfcache cho một nhóm khác. Họ đã thử nghiệm các đường dẫn URL có lưu lượng truy cập đáng kể để đảm bảo thử nghiệm đạ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 các trang.

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 có bật bfcache tải nhanh hơn đáng kể trong quá trình điều hướng tiến hoặc lùi.

Điều thực sự hứa hẹn là nhóm có bfcache được bật đã 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! nhận thấy. JAPAN News với thử nghiệm A/B bfcache. Bạn có thể xem thêm thông tin trong 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 vào bộ nhớ đệm dự phòng +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 +9% Hơn 0,6%

Khi thao tác điều hướng qua lại giữa các trang diễn ra tức thì nhờ bộ nhớ đệm chuyển tiếp và quay lạ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.

Trải nghiệm liền mạch cho người dùng

Khi các trang tải ngay lập tức, thao tác điều hướng sẽ diễn ra mượt mà hơn.

Trong Yahoo! JAPAN News, một trong những hành trình chính của người dùng là đọc nhiều bài viết:

  1. Truy cập vào danh sách bài viết.
  2. Nhấp vào một bài viết để đọc.
  3. Sau khi hoàn tất, hãy quay lại danh sách bài viết.
  4. Nhấp vào một bài viết khác để đọc.

Trước bfcache, khi đọc xong một bài viết, 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 khó chịu cho những người dùng muốn nhanh chóng quay lại danh sách để chọn một bài viết khác để đọc.

Một nguyên nhân khác gây ra sự khó chịu trong quá trình điều hướng ngược là vị trí cuộn. Trên 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 ngược 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 có thể được khôi phục không chính xác. Điều này khiến người dùng bối rối hoặc thậm chí bỏ qua trang.

Vấn đề này được giải quyết khi tính năng điều hướng ngược được hỗ trợ bởi bfcache: vị trí cuộn được khôi phục ngay lập tức và chính xác.

Hai dải hình ảnh của một thao tác di chuyển quay lại. Phần trên là một dải phim được xử lý bằng bfcache, mất 0,3 giây, trong khi phần dưới là 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, sự bất tiện trong hành trình của người dùng đã biến mất. Người dùng có thể ngay lập tức quay lại trang danh sách bài viết 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.

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

Ảnh động minh hoạ quy trình điều hướng ngược từ một bài viết đến trang danh sách bài viết khi có và không có bfcache.
Với bfcache, thao tác điều hướng ngược diễn ra nhanh hơn và vị trí cuộn được duy trì chính xác. Nếu không có bfcache, những điểm cải tiến này sẽ không được đảm bảo.

Nói tóm lại, lợi ích của bfcache đối với Yahoo! Tin tức ở Nhật Bản bao gồm:

  • Tăng số lượt xem trang: 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.
  • Doanh thu tăng: 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 tăng 9% trên thiết bị di động so với nhóm thử nghiệm không có bộ nhớ đệm chuyển tiếp/quay lại.

Triển khai bfcache ngay

Nói tóm lại, bfcache không chỉ giúp trang web của bạn hoạt động tức thì mà còn có thể giảm bớt sự khó chịu 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 yếu tố chặn bộ nhớ đệm chuyển tiếp/quay lại, đặc biệt là những lý do được liệt kê vì đây là những lý do phổ biến khiến bộ nhớ đệm chuyển tiếp/quay lại không được sử dụng. Trong tương lai, những điều này có thể không ngăn được 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 yếu tố chặn bfcache ngay bây giờ và tránh những mẫu phổ biến này (cũng như các mẫu ít phổ biến khác).