Mengambil aset terlebih dahulu akan mempercepat waktu pemuatan halaman dan meningkatkan metrik bisnis.
Pengambilan data adalah teknik yang digunakan untuk mempercepat pemuatan halaman dengan mendownload resource—atau bahkan seluruh halaman—yang kemungkinan akan diperlukan dalam waktu dekat. Riset telah menunjukkan bahwa waktu pemuatan yang lebih cepat menghasilkan rasio konversi yang lebih tinggi dan pengalaman pengguna yang lebih baik.
Terra adalah salah satu portal konten terbesar dari Brasil, yang menawarkan hiburan, berita, dan olahraga dengan lebih dari 63 juta pengunjung unik per bulan. Kami telah berkolaborasi dengan tim engineer Terra untuk meningkatkan waktu pemuatan artikel dengan menggunakan teknik pengambilan data di bagian tertentu di situs mereka.
Studi kasus ini menjelaskan penerapan perjalanan Terra yang menghasilkan peningkatan rasio klik-tayang (CTR) iklan sebesar 11% di perangkat seluler, CTR iklan sebesar 30% di desktop, dan pengurangan waktu Largest Contentful Paint (LCP) sebesar 50%.
Strategi pengambilan data
Pengambilan data telah ada selama beberapa waktu, tetapi penting untuk menggunakannya dengan hati-hati karena menggunakan bandwidth tambahan untuk resource yang tidak segera diperlukan. Teknik ini harus diterapkan dengan cermat untuk menghindari penggunaan data yang tidak perlu. Dalam kasus Terra, artikel dipramuat jika kondisi berikut terpenuhi:
- Visibilitas link ke artikel yang dipramuat: Terra menggunakan Intersection Observer API untuk mendeteksi visibilitas bagian yang berisi artikel yang ingin dipramuat.
- Kondisi yang menguntungkan untuk peningkatan penggunaan data: Seperti yang disebutkan sebelumnya, pengambilan data adalah peningkatan performa spekulatif yang menggunakan data tambahan, dan hal itu mungkin bukan hasil yang diinginkan dalam setiap situasi. Untuk mengurangi kemungkinan pemborosan bandwidth, Terra menggunakan Network Information API bersama dengan Device Memory API untuk menentukan apakah akan mengambil artikel berikutnya. Terra hanya mengambil artikel berikutnya jika:
- Kecepatan koneksi minimal 3G dan perangkat memiliki memori minimal 4 GB,
- atau jika perangkat menjalankan iOS.
- CPU tidak ada aktivitas: Terakhir, Terra memeriksa apakah CPU tidak ada aktivitas dan dapat melakukan pekerjaan tambahan menggunakan
requestIdleCallback
, yang memerlukan callback untuk diproses saat thread utama tidak ada aktivitas, atau berdasarkan batas waktu tertentu (opsional)—mana saja yang lebih dulu.
Dengan mematuhi kondisi ini, Terra hanya mengambil data jika diperlukan, sehingga menghemat bandwidth dan masa pakai baterai, serta meminimalkan dampak pengambilan data yang akhirnya tidak digunakan.
Jika kondisi ini terpenuhi, Terra akan melakukan pramuat artikel yang ada di bagian: "Konten Terkait" dan "Direkomendasikan untuk Anda" yang ditandai dengan warna biru di bawah.
Dampak Bisnis
Untuk mengukur dampak teknik ini, Terra pertama kali meluncurkan fitur ini di bagian "Konten terkait" di halaman artikel. Kode UTM membantu mereka membedakan antara artikel yang dipramuat dan tidak dipramuat untuk tujuan perbandingan. Setelah dua minggu pengujian A/B yang berhasil, Terra memutuskan untuk menambahkan fungsi pengambilan data ke bagian "Direkomendasikan untuk Anda".
Sebagai hasil dari pengambilan data artikel secara otomatis, peningkatan metrik iklan secara keseluruhan dan pengurangan waktu LCP dan Time to First Byte (TTFB) diamati:
Pra-pengambilan—jika digunakan dengan hati-hati—sangat meningkatkan waktu pemuatan halaman, meningkatkan metrik iklan, dan mengurangi waktu LCP.
Detail teknis
Pengambilan data dapat dilakukan melalui penggunaan petunjuk resource seperti rel=prefetch
atau rel=preload
, melalui library seperti quicklink atau Guess.js, atau menggunakan Speculation Rules API yang lebih baru. Terra telah memilih untuk menerapkannya dengan menggunakan fetch API dengan prioritas rendah yang dikombinasikan dengan instance Intersection Observer. Terra membuat pilihan ini karena memungkinkan mereka mendukung Safari, yang belum mendukung metode pengambilan data lainnya seperti rel=prefetch
atau Speculation Rules API, dan library JavaScript berfitur lengkap tidak diperlukan untuk kebutuhan Terra.
JavaScript di bawah ini kira-kira setara dengan kode yang digunakan oleh Terra:
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)
})
- Fungsi
prefetch
pertama-tama memeriksa kualitas koneksi minimum dan memori perangkat sebelum memulai pengambilan data. - Kemudian,
IntersectionObserver
digunakan untuk memantau kapan elemen terlihat di area pandang, lalu menambahkan URL ke daftar untuk pengambilan data sebelumnya. - Proses pengambilan data dijadwalkan dengan
requestIdleCallback
, yang bertujuan untuk menjalankan fungsiprefetch
saat thread utama tidak ada aktivitas.
Kesimpulan
Jika digunakan dengan hati-hati, pengambilan data dapat mengurangi waktu pemuatan secara signifikan untuk permintaan navigasi mendatang, sehingga mengurangi hambatan dalam perjalanan pengguna dan meningkatkan engagement. Pengambilan data akan menghasilkan pemuatan byte tambahan yang mungkin tidak digunakan, sehingga Terra mengambil langkah tambahan untuk hanya mengambil data dalam kondisi jaringan yang baik dan di perangkat yang kompatibel, tempat informasi ini tersedia.
Terima kasih khusus kepada Gilberto Cocchi, Harry Theodoulou, Miguel Carlos Martínez Díaz, Barry Pollard, Jeremy Wagner, serta Leonardo Bellini dan Lucca Paradeda dari tim Engineering Terra atas kontribusi mereka dalam pekerjaan ini.