Việc tìm nạp trước tài nguyên giúp đẩy nhanh thời gian tải trang và cải thiện các 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 các tài nguyên (hoặc thậm chí là toàn bộ trang) có thể cần đến trong tương lai gần. Nghiên cứu cho thấy rằng thời gian tải nhanh hơn sẽ giúp tăng tỷ lệ chuyển đổi và mang lại trải nghiệm tốt hơn cho người dùng.
Terra là một trong những cổng nội dung lớn nhất của Brazil, cung cấp nội dung giải trí, tin tức và thể thao với hơn 63 triệu 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ỹ sư của Terra để cải thiện thời gian tải bài viết bằng cách sử dụng các kỹ thuật tải trước trên một số phần nhất định của trang web.
Nghiên cứu điển hình này mô tả quá trình triển khai hành trình của Terra, nhờ đó tỷ lệ nhấp (CTR) vào quảng cáo trên thiết bị di động tăng 11%, CTR vào quảng cáo trên máy tính để bàn tăng 30% và thời gian Thời gian hiển thị nội dung lớn nhất (LCP) giảm 50%.
Chiến lược tìm nạp trước
Tính năng tìm nạp trước đã xuất hiện được một thời gian, nhưng bạn cần sử dụng tính năng này một cách cẩn thận vì tính năng này sẽ tiêu tốn thêm băng thông cho các tài nguyên không cần thiết ngay lập tức. Bạn nên áp dụng kỹ thuật này một cách thận trọng để 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 sẽ được tìm nạp trước nếu đáp ứng các điều kiện sau:
- Khả năng 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 các bài viết mà họ muốn tìm nạp trướ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ính năng tải trước là một biện pháp cải thiện hiệu suất dự đ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 trường hợp. Để giảm khả năng lãng phí băng thông, Terra sử dụng Network Information API (API Thông tin mạng) 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ối thiểu 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 sẽ kiểm tra xem CPU có ở trạng thái rảnh và có thể thực hiện công việc bổ sung hay không bằng cách sử dụng
requestIdleCallback. Phương thức này sẽ xử lý 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 thời điểm nào đến trước.
Việc tuân thủ các điều kiện này đảm bảo rằng 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 các lượt tìm nạp trước không được sử dụng.
Khi các điều kiện này được đáp ứng, Terra sẽ tải trước các bài viết có trong các phần: "Nội dung liên quan" và "Đề xuất cho bạn" được đánh dấu màu xanh dương bên dưới.
Tác động đến hoạt động kinh doanh
Để đo lường tác động của kỹ thuật này, Terra đã ra mắt tính năng này trong phần "Nội dung có 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 cho 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ải trước vào phần "Đề xuất cho bạn".
Nhờ tính năng tải trước bài viết, các chỉ số quảng cáo đã tăng lên tổng thể và thời gian LCP và Thời gian tải byte đầu tiên (TTFB) đã giảm:
Tính năng 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 các 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 ý 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 sử dụng 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 một thực thể Intersection Observer. Terra đã đưa ra lựa chọn này vì nó cho phép họ hỗ trợ Safari, trình duyệt này chưa hỗ trợ các phương thức tải trước khác như rel=prefetch hoặc API Quy tắc suy đoán, và thư viện JavaScript đầy đủ tính năng không cần thiết cho nhu cầu của Terra.
Mã JavaScript dưới đây gần 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 các URL vào danh sách để tìm nạp trước. - Quy trình tải trước được lên lịch bằng
requestIdleCallback, nhằm mục đích thực thi hàmprefetchkhi luồng chính ở trạng thái rảnh.
Kết luận
Nếu được sử dụng cẩn thận, tính năng tải trước có thể giảm đáng kể thời gian tải cho các yêu cầu điều hướng trong tương lai, từ đó giảm sự phiền hà trong hành trình của người dùng và tăng mức độ tương tác. Việc tải 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ải trước trong điều kiện mạng tốt và trên các thiết bị có khả năng, nơi có thông tin này.
Xin cảm ơn đặc biệt 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 vì những đóng góp của họ cho công việc này.