Cara pengambilan data membantu Terra meningkatkan rasio klik-tayang iklan sebesar 30% dan mempercepat Largest Contentful Paint.

Pengambilan resource mempercepat waktu muat halaman dan meningkatkan metrik bisnis.

Guilherme Moser de Souza

Thierno Thiam

Pengambilan data adalah teknik yang digunakan untuk mempercepat pemuatan halaman dengan mendownload aset, atau bahkan seluruh halaman, yang kemungkinan akan diperlukan dalam waktu dekat. Penelitian 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 engineering Terra untuk mempercepat waktu pemuatan artikel menggunakan teknik pengambilan data di bagian situs tertentu.

Studi kasus ini menjelaskan penerapan perjalanan Terra yang menghasilkan peningkatan rasio klik-tayang (CTR) iklan sebesar 11% di perangkat seluler, CTR iklan 30% di desktop, dan penurunan 50% dalam Largest Contentful Paint (LCP).

Strategi pengambilan data

Pengambilan data telah dilakukan selama beberapa waktu, tetapi penting untuk menggunakannya dengan hati-hati karena menghabiskan bandwidth ekstra untuk resource yang tidak segera diperlukan. Teknik ini harus diterapkan dengan cermat untuk menghindari penggunaan data yang tidak perlu. Dalam kasus Terra, artikel diambil dari pengambilan data jika kondisi berikut terpenuhi:

• Visibilitas link ke artikel yang diambil data: Terra menggunakan Intersection Observer API untuk mendeteksi visibilitas bagian yang berisi artikel yang ingin diambil datanya.
• Kondisi yang menguntungkan untuk peningkatan penggunaan data: Seperti yang disebutkan sebelumnya, pengambilan data adalah peningkatan performa spekulatif yang menghabiskan data tambahan, dan yang mungkin tidak menjadi hasil yang diinginkan dalam setiap situasi. Untuk mengurangi kemungkinan pemborosan bandwidth, Terra menggunakan Network Information API beserta Device Memory API untuk menentukan apakah akan mengambil artikel berikutnya atau tidak. Terra hanya mengambil artikel berikutnya jika:
  • Kecepatan koneksi minimal 3G dan perangkat memiliki memori minimal 4GB,
  • atau jika perangkat menjalankan iOS.
• CPU nonaktif: Terakhir, Terra memeriksa apakah CPU tidak ada aktivitas dan dapat melakukan tugas tambahan dengan menggunakan requestIdleCallback, yang mengambil callback untuk diproses saat thread utama tidak ada aktivitas, atau dengan batas waktu tertentu (opsional)—mana saja yang terjadi lebih dulu.

Mematuhi kondisi ini akan memastikan bahwa Terra hanya mengambil data jika diperlukan, yang menghemat bandwidth dan masa pakai baterai, serta meminimalkan dampak pengambilan data yang pada akhirnya tidak digunakan.

Saat ketentuan ini terpenuhi, Terra akan mengambil data 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 terlebih dahulu meluncurkan fitur ini di bagian "Konten terkait" halaman artikel. Kode UTM membantu mereka membedakan antara artikel yang diambil dan tidak diambil untuk tujuan perbandingan. Setelah dua minggu melakukan pengujian A/B yang sukses, Terra memutuskan untuk menambahkan fungsi pengambilan data ke bagian "Direkomendasikan untuk Anda".

Sebagai hasil dari pengambilan data artikel, terjadi peningkatan metrik iklan secara keseluruhan serta pengurangan waktu LCP dan Waktu Hingga Byte Pertama (TTFB):

Metrik	Ponsel	Desktop
CTR Iklan	+11%	+30%
Visibilitas iklan	+10,5%	+6%
LCP	-51%	-73%
TTFB	-83%	-84%

Pengambilan data—jika digunakan dengan hati-hati—akan sangat meningkatkan waktu muat 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 mengimplementasikannya dengan menggunakan fetch API dengan prioritas rendah yang dikombinasikan dengan instance Intersection Observer. Terra membuat pilihan ini karena memungkinkannya 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 terlebih dahulu memeriksa kualitas koneksi dan memori perangkat minimum sebelum memulai pengambilan data.
• Kemudian, kode ini menggunakan IntersectionObserver untuk memantau kapan elemen terlihat di area tampilan, lalu menambahkan URL ke daftar untuk pengambilan data.
• Proses pengambilan data dijadwalkan dengan requestIdleCallback, yang bertujuan untuk menjalankan fungsi prefetch saat thread utama tidak ada aktivitas.

Kesimpulan

Jika digunakan dengan hati-hati, pengambilan data dapat secara signifikan mengurangi waktu pemuatan untuk permintaan navigasi pada masa mendatang, sehingga mengurangi hambatan dalam perjalanan pengguna dan meningkatkan interaksi. Pengambilan data menyebabkan 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 mendukung, tempat informasi ini tersedia.

Terima kasih banyak 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 upaya ini.