Việc tìm nạp trước tài nguyên giúp tăng tốc thời gian tải trang và cải thiện chỉ số kinh doanh.
Tìm nạp trước là một kỹ thuật dùng để tăng tốc độ tải trang bằng cách tải tài nguyên xuống (hoặc thậm chí là toàn bộ trang) có thể sẽ cần thiết trong tương lai gần. Nghiên cứu đã chỉ ra rằng thời gian tải nhanh hơn dẫn đến tỷ lệ chuyển đổi cao hơn và trải nghiệm người dùng tốt hơn.
Terra là một trong những cổng nội dung lớn nhất tại Brazil, cung cấp nội dung giải trí, tin tức và thể thao với hơn 63 triệu lượt khách truy cập riêng biệt mỗi tháng. Chúng tôi đã cộng tác với nhóm kỹ thuật của Terra để cải thiện thời gian tải bài viết bằng cách sử dụng kỹ thuật tìm nạp trước trên một số phần trang web nhất định của họ.
Nghiên cứu điển hình này mô tả cách Terra triển khai hành trình, giúp tỷ lệ nhấp vào quảng cáo (CTR) tăng 11% trên thiết bị di động, 30% CTR quảng cáo trên máy tính và giảm 50% về Thời gian hiển thị nội dung lớn nhất (LCP).
Chiến lược tìm nạp trước
Tính năng tìm nạp trước đã hoạt động được một thời gian, nhưng bạn cần phải sử dụng cẩn thận vì quá trình này tốn thêm băng thông cho những tài nguyên không cần thiết ngay lập tức. Bạn nên cân nhắc kỹ lưỡng khi áp dụng kỹ thuật này để tránh sử dụng dữ liệu không cần thiết. Trong trường hợp Terra, các bài viết được tìm nạp trước nếu đáp ứng các điều kiện sau:
- Mức độ hiển thị của đường liên kết đến các bài viết được tìm nạp trước: Terra đã sử dụng Intersection Observer API để phát hiện khả năng xem của phần chứa bài viết mà họ muốn tìm nạp trước.
- Các điều kiện thuận lợi để tăng mức sử dụng dữ liệu: Như đã đề cập trước đó, tìm nạp trước là một cải tiến về hiệu suất suy đoán, tiêu tốn thêm dữ liệu và có thể không phải là kết quả mong muốn trong mọi tình huống. Để giảm khả năng lãng phí băng thông, Terra sử dụng Network thông tin API cùng với Device Memory API (API bộ nhớ thiết bị) để xác định xem có tìm nạp bài viết tiếp theo hay không. Terra chỉ tìm nạp bài viết tiếp theo khi:
- Tốc độ kết nối tối thiểu là 3G và thiết bị có bộ nhớ ít nhất 4 GB,
- hoặc nếu thiết bị đang chạy iOS.
- CPU ở trạng thái rảnh: Cuối cùng, Terra kiểm tra xem CPU có ở trạng thái rảnh hay không và có thể thực hiện thêm tác vụ bằng cách sử dụng
requestIdleCallback. Phương thức này sẽ thực hiện lệnh gọi lại khi luồng chính ở trạng thái rảnh, hoặc theo một thời hạn cụ thể (không bắt buộc) tuỳ theo điều kiện nào xảy ra trước.
Việc tuân thủ các điều kiện này đảm bảo Terra chỉ tìm nạp dữ liệu khi cần thiết, giúp tiết kiệm băng thông và thời lượng pin, đồng thời giảm thiểu tác động của những lần tìm nạp trước không sử dụng đến.
Khi đáp ứng những điều kiện này, Terra sẽ tìm nạp trước các bài viết có trong phần: "Nội dung liên quan" và "Đề xuất cho bạn" được đánh dấu bằng màu xanh dương bên dưới.
Tác động đối với doanh nghiệp
Để đo lường tác động của kỹ thuật này, trước tiên, Terra ra mắt tính năng này trong phần "Nội dung liên quan" trên trang bài viết. Mã UTM giúp họ phân biệt giữa các bài viết được tìm nạp trước và không được tìm nạp trước nhằm mục đích so sánh. Sau hai tuần thử nghiệm A/B thành công, Terra quyết định thêm chức năng tìm nạp trước vào phần "Đề xuất cho bạn".
Nhờ tìm nạp trước bài viết, chỉ số quảng cáo tăng tổng thể và thời gian LCP và Thời gian tạo byte đầu tiên (TTFB) đã giảm:
Tìm nạp trước (khi được sử dụng cẩn thận) sẽ cải thiện đáng kể thời gian tải trang, tăng chỉ số quảng cáo và giảm thời gian LCP.
Chi tiết kỹ thuật
Bạn có thể tìm nạp trước bằng cách sử dụng các gợi ý về tài nguyên như rel=prefetch hoặc rel=preload, thông qua các thư viện như Quicklink hoặc Guess.js hoặc bằng cách sử dụng Speculation Rules API (API Quy tắc suy đoán) mới hơn. Terra đã chọn triển khai việc này bằng cách sử dụng API tìm nạp có mức độ ưu tiên thấp kết hợp với thực thể Intersection Observer. Terra đưa ra lựa chọn này vì nó cho phép họ hỗ trợ Safari (hiện chưa hỗ trợ các phương thức tìm nạp trước khác như rel=prefetch hay Speculation Rules API) đồng thời không cần đến thư viện JavaScript đầy đủ tính năng để đáp ứng nhu cầu của Terra.
JavaScript dưới đây tương đương với mã mà Terra sử dụng:
function prefetch(nodeLists) {
// Exclude slow ECTs < 3g
if (navigator.connection &&
(navigator.connection.effectiveType === 'slow-2g'
|| navigator.connection.effectiveType === '2g')
) {
return;
}
// Exclude low end device which is device with memory <= 2GB
if (navigator.deviceMemory && navigator.deviceMemory <= 2) {
return;
}
const fetchLinkList = {};
const observer = new IntersectionObserver(function (entries) {
entries.forEach(function (entry) {
if (entry.isIntersecting) {
if (!fetchLinkList[entry.target.href]) {
fetchLinkList[entry.target.href] = true;
fetch(entry.target, {
priority: 'low'
});
}
observer.unobserve(entry = entry.target);
}
});
});
}
const idleCallback = window.requestIdleCallback || function (cb) {
let start = Date.now();
return setTimeout(function () {
cb({
didTimeout: false,
timeRemaining: function () {
return Math.max(0, 50 - (Date.now() - start));
}
});
}, 1);
}
idleCallback(function () {
prefetch(nodeLists)
})
- Trước tiên, hàm
prefetchsẽ kiểm tra chất lượng kết nối tối thiểu và bộ nhớ thiết bị trước khi bắt đầu tìm nạp trước. - Sau đó, phương thức này sử dụng
IntersectionObserverđể theo dõi thời điểm các phần tử hiển thị trong khung nhìn, rồi thêm URL vào danh sách để tìm nạp trước. - Quá trình tìm nạp trước được lên lịch bằng
requestIdleCallback, nhằm thực thi hàmprefetchkhi luồng chính ở trạng thái rảnh.
Kết luận
Khi được sử dụng cẩn thận, việc tìm nạp trước có thể làm giảm đáng kể thời gian tải cho các yêu cầu điều hướng sau này, từ đó giảm thiểu rào cản trong hành trình của người dùng và tăng mức độ tương tác. Việc tìm nạp trước sẽ dẫn đến việc tải thêm các byte có thể không được sử dụng, vì vậy Terra đã thực hiện thêm các bước để chỉ tìm nạp trước trong điều kiện mạng tốt và trên các thiết bị có hỗ trợ thông tin này.
Xin đặc biệt cảm ơn Gilberto Cocchi, Harry Theodoulou, Miguel Carlos Martínez Díaz, Barry Pollard, Jeremy Wagner, Leonardo Bellini và Lucca Paradeda thuộc nhóm Kỹ thuật của Terra đã đóng góp cho công trình này.