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

Pengambilan aset akan 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 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 mempercepat waktu pemuatan artikel menggunakan teknik pengambilan data di bagian tertentu situs mereka.

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

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 setidaknya 3G dan perangkat memiliki setidaknya 4 GB memori,
  • atau jika perangkat menjalankan iOS.
• CPU tidak ada aktivitas: 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 batas waktu tertentu (opsional), mana saja yang lebih dulu.

Dengan mematuhi kondisi ini, memastikan bahwa Terra hanya mengambil data saat diperlukan, yang menghemat bandwidth dan masa pakai baterai, serta meminimalkan dampak pengambilan data yang pada akhirnya tidak digunakan lagi.

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".

Berkat artikel pengambilan data, kami mendapati peningkatan keseluruhan metrik iklan serta pengurangan waktu LCP dan Time to First Byte (TTFB):

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 fungsi prefetch 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.