Ngày phát hành: 28 tháng 1 năm 2025
Nghiên cứu điển hình này mô tả cách Ray-Ban cải thiện chỉ số LCP bằng cách sử dụng Speculation Rules API để tăng tốc hoạt động điều hướng trong tương lai của người dùng bằng tính năng kết xuất trước, cũng như cách cải thiện hiệu suất kinh doanh của nền tảng thương mại điện tử của Ray-Ban. Thành công này đã khuyến khích Ray Ban xem xét các lựa chọn khác để cải thiện hiệu suất tương tự, chẳng hạn như giúp các trang đủ điều kiện sử dụng bfcache.
Ray-Ban là một thương hiệu kính mắt mang tính biểu tượng, nổi tiếng với những kiểu dáng vượt thời gian như Aviator và Wayfarer, kết hợp thiết kế cổ điển với xu hướng hiện đại. Là một trong những công ty hàng đầu nổi tiếng về kính mắt, kênh thương mại điện tử của Ray-Ban đóng vai trò quan trọng trong việc đảm bảo khả năng cạnh tranh của công ty, thu hút hơn 80 triệu khách truy cập riêng biệt mỗi năm.
Là kênh kinh doanh chính, Ray-Ban tiếp tục cải thiện trải nghiệm người dùng trên nền tảng thương mại điện tử của mình, đồng thời nhận ra tầm quan trọng của Các chỉ số quan trọng về trang web và tác động trực tiếp của các chỉ số này đến trải nghiệm người dùng trên nền tảng.
Phương pháp liên tục của Ray-Ban để cải thiện hành trình trọng yếu của người dùng
Do bản chất của cấu trúc MPA (Ứng dụng nhiều trang) được sử dụng trên nền tảng thương mại điện tử của Ray-Ban, mỗi khi người dùng tương tác với một đường liên kết hoặc nút yêu cầu một trang mới, trình duyệt sẽ gửi một yêu cầu điều hướng đến máy chủ. Máy chủ này sẽ phản hồi bằng một trang HTML mới. Điều này gây ra thách thức cho Ray-Ban trong việc duy trì trải nghiệm duyệt web mượt mà cho người dùng, đặc biệt là trên Trang chi tiết sản phẩm (PDP). Trang này được xác định là một trong những điểm truy cập được sử dụng phổ biến nhất và là một phần quan trọng trong phễu chuyển đổi.
Nhờ việc thiết kế lại gần đây, Ray-Ban đã cải thiện các chỉ số về Chỉ số quan trọng chính của trang web. Tuy nhiên, vẫn còn nhiều điểm cần cải thiện, đặc biệt là trong trường hợp cần sử dụng nhiều thư viện bên ngoài để mang lại trải nghiệm tương tác cho người dùng, từ đó làm tăng chỉ số Trang có nhiều nội dung nhất (LCP) so với các trang khác.
Vì lý do này, Ray-Ban đã chọn triển khai tính năng tải trước để cải thiện hành trình quan trọng của người dùng trên trang web. Việc sử dụng quy tắc suy đoán có thể là một trong những giải pháp hiệu quả nhất để giảm tốc độ tải trang mà người dùng cảm nhận được cho các thao tác điều hướng trong tương lai, vì quy tắc này sẽ tải trước rồi kết xuất trước nội dung của các trang mà người dùng sẽ truy cập tiếp theo.
Chiến lược kết xuất trước dành riêng cho thiết bị của Ray-Ban
Ray-Ban đã áp dụng hai chiến lược kết xuất trước riêng biệt để tính đến sự khác biệt về hành vi và tài nguyên giữa máy tính và thiết bị di động. Những chiến lược này được thiết kế để tối đa hoá hiệu suất mà không ảnh hưởng đến trải nghiệm người dùng hoặc các tính năng hiện có của trang web.
Trên máy tính, tính năng kết xuất trước được thực thi bằng cách di chuột qua thẻ thông tin sản phẩm trong Trang thông tin sản phẩm (PLP), sử dụng chế độ cài đặt độ ưu tiên "moderate" và truyền dưới dạng bộ chọn một lớp nhận dạng của cùng một thẻ thông tin.
let scriptPrerender = document.createElement('script');
scriptPrerender.setAttribute('type', 'speculationrules');
scriptPrerender.innerHTML = `{
"prerender": [
{
"source": "document",
"where": {
"and": [
{
"selector_matches": "a.rb-plp-product-tile__container"
}
]
},
"eagerness": "moderate"
}
]
}`;
document.head.appendChild(scriptPrerender);
Vì sự kiện hover không hoạt động hiệu quả trên thiết bị di động, nên tính năng kết xuất trước được thực thi bằng cách sử dụng chế độ cài đặt độ ưu tiên immediate trên 4 thẻ thông tin đầu tiên (được tìm thấy là những thẻ được nhấp vào nhiều nhất).
let scriptPrerender = document.createElement('script');
scriptPrerender.setAttribute('type', 'speculationrules');
scriptPrerender.innerHTML = `{
"prerender": [
{
"source": "document",
"where": {
"and": [
{
"selector_matches": "a.rb-plp-product-tile__container:nth-child(-n+5)"
}
]
},
"eagerness": "immediate"
}
]
}`;
document.head.appendChild(scriptPrerender);
Kết quả kết xuất trước
Hai chiến lược kết xuất trước này đã tác động đáng kể đến các chỉ số Core Web Vitals cho các trang PDP của Ray-Ban và xu hướng cho các KPI kinh doanh.
| Thiết bị | LCP (Thời gian hiển thị nội dung lớn nhất) | Thay đổi về tỷ lệ chuyển đổi | Thay đổi về tỷ lệ thoát | Tốc độ kết xuất trước | ||
|---|---|---|---|---|---|---|
| Trước | Sau | Chuyển | ||||
| Thiết bị di động | 4,69 giây | 2,66 giây | 43,28% | +101,47% | -13,25% | 29% |
| Máy tính | 3,03 giây | 1,74 giây | 42,57% | +156,16% | -13,18% | 50% |
Các chỉ số kinh doanh của người dùng duyệt xem PDP được phân phát từ máy chủ được so sánh với những người dùng duyệt xem PDP được kết xuất trước. Sau khi thu thập dữ liệu từ không gian làm việc theo dõi của Adobe cho những người dùng có trình duyệt hỗ trợ API (như Chrome), Ray-Ban đã cho thấy những điểm cải tiến đáng kể, cho thấy người dùng có thể di chuyển trên trang web một cách mượt mà hơn. Đối với các trình duyệt khác không hỗ trợ tính năng kết xuất trước, Ray-Ban đã quyết định tải trước tài nguyên tại thời điểm sự kiện hover trên máy tính và cho 4 thẻ thông tin đầu tiên của PLP trên thiết bị di động.
Việc triển khai API Quy tắc suy đoán để kết xuất trước đã thay đổi hoàn toàn nền tảng thương mại điện tử của Ray-Ban. Nhờ những chiến lược cải tiến này, Ray-Ban đã cải thiện LCP thêm 43% trên cả máy tính và thiết bị di động, nâng cao đáng kể trải nghiệm người dùng.
Việc tối ưu hoá này không chỉ giúp tải trang gần như tức thì mà còn mang lại nhiều lợi ích của cấu trúc kiểu SPA trong khi vẫn duy trì cấu trúc MPA hiện tại, đặc biệt là trên các trang quan trọng như PDP.
Từ góc độ kinh doanh, những điểm cải tiến này đã mang lại sự thay đổi lớn, như được xác nhận bằng thử nghiệm A/B:
- Tăng tỷ lệ chuyển đổi:
- Tỷ lệ chuyển đổi trên thiết bị di động trên trang chi tiết sản phẩm tăng đáng kể 101,47%.
- Tỷ lệ chuyển đổi trên máy tính để bàn tăng 156,16%, một con số ấn tượng hơn nữa.
- Nâng cao mức độ tương tác của người dùng:
- Số trang trung bình được xem mỗi phiên tăng 51,95% trên thiết bị di động và 65,30% trên máy tính, cho thấy khả năng điều hướng mượt mà hơn và người dùng quan tâm lâu hơn. Lưu ý: chúng tôi không coi những trang được kết xuất trước nhưng không được kích hoạt là "đã xem".
- Giảm tỷ lệ thoát:
- Tỷ lệ thoát (% người dùng rời khỏi một trang trên tổng số lượt xem trang đó) giảm 13,25% trên thiết bị di động và 13,18% trên máy tính, cho thấy tỷ lệ giữ chân cao hơn trong những khoảnh khắc mua sắm quan trọng.
Mở rộng để cung cấp thêm các thao tác điều hướng tức thì cho người dùng
Do những kết quả tuyệt vời thu được từ việc kết xuất trước PDP, Ray-Ban quyết định khai thác tối đa tiềm năng của Speculation Rules API bằng cách kết xuất trước các đường liên kết PLP trong trình đơn. Phương pháp này giúp cải thiện đáng kể tốc độ tải (và do đó là LCP) của cả loại trang danh mục và trang sản phẩm.
Mặc dù tính năng kết xuất trước giúp ích cho các thao tác điều hướng trong tương lai, nhưng Ray-Ban cũng quan sát thấy một phần đáng kể của thao tác điều hướng qua lại giữa PLP và PDP. Vì kết quả thử nghiệm kết xuất trước cho thấy rõ rằng việc điều hướng người dùng được tối ưu hoá có liên quan trực tiếp đến các chỉ số kinh doanh tốt, nên Ray-Ban cũng đã xem xét bộ nhớ đệm cho thao tác tiến/lùi (bfcache).
Bfcache là một tính năng tối ưu hoá trình duyệt, cung cấp thao tác điều hướng tiến và lùi tức thì bằng cách lưu bản tổng quan nhanh của các trang đủ điều kiện trong nhật ký duyệt web vào bộ nhớ và khôi phục các trang đó mà không cần thông qua mạng. Để đảm bảo rằng PDP và PLP của Ray-Ban đủ điều kiện sử dụng bfcache, chúng tôi đã thực hiện một số nội dung cập nhật nhanh:
- Tắt sự kiện
unloadvà hạn chế quyền truy cập vào API Bluetooth và gia tốc kế của thiết bị bằng cách sử dụng giá trị tiêu đềPermissions-Policylàunload=(), bluetooth=(), andaccelerometer=(). - Đóng các kết nối RTC và IndexedDB tại sự kiện
pagehide. - Tránh sử dụng tiêu đề phản hồi
Cache-Control: no-storekhi không cần thiết.
Việc hỗ trợ bfcache trên các PLP (trang chủ của ứng dụng) có thao tác điều hướng quay lại/tiến lên chiếm tới 40% lưu lượng truy cập trong khi tỷ lệ truy cập bfcache là 0 đã giúp cải thiện LCP gần 30% và CLS 83%.
| Chỉ số | 13/10/2024 > 9/11/2024 | 24/11/2024 > 21/12/2024 | Delta |
|---|---|---|---|
| LCP (Thời gian hiển thị nội dung lớn nhất) | 3725 mili giây | 2674 mili giây | -28,21% |
| INP | 521 mili giây | 395 mili giây | -24,18% |
| CLS (Điểm số tổng hợp về mức thay đổi bố cục) | 0,46 | 0,08 | -82,61% |
| Tỷ lệ truy cập vào bộ nhớ đệm cho thao tác tiến/lùi | 0,02% | 72,9% | +72,87% |
Kết luận
Những kết quả này minh hoạ tiềm năng của tính năng kết xuất trước để cải thiện đáng kể hiệu suất của trang web thương mại điện tử. Bằng cách kết xuất trước các trang dựa trên hành vi của người dùng cho các thao tác điều hướng trong tương lai, Ray-Ban không chỉ cải thiện Chỉ số quan trọng chính của trang web mà còn mang lại mức độ tương tác tốt hơn cho người dùng và tăng doanh số bán hàng. Lợi ích này đã củng cố cam kết của Ray-Ban trong việc mang đến trải nghiệm điều hướng mượt mà không chỉ cho các thao tác điều hướng trong tương lai mà còn cho các thao tác điều hướng lui/tiến do bfcache cung cấp.
Nghiên cứu điển hình này nêu bật cách sử dụng các kỹ thuật hiệu suất web hiện đại có thể thu hẹp khoảng cách giữa các chỉ số kỹ thuật và KPI kinh doanh, thiết lập điểm chuẩn mới cho trải nghiệm người dùng và sự thành công trong thương mại điện tử.
Xin cảm ơn đặc biệt Lorenzo Bartomioli, Gilberto Cocchi, Alejandro Baeza Redondo, Barry Pollard và Jeremy Wagner đã đóng góp cho công việc này.