Ambil resource lebih awal untuk mempercepat navigasi di masa mendatang

Pelajari petunjuk resource rel=prefetch dan cara menggunakannya.

Demián Renzulli

Jeremy Wagner

Dipublikasikan: 12 September 2019, Terakhir diperbarui: 8 Februari 2025

Riset menunjukkan bahwa waktu pemuatan yang lebih cepat menghasilkan rasio konversi yang lebih tinggi dan pengalaman pengguna yang lebih baik. Jika memiliki insight tentang cara pengguna menjelajahi situs Anda dan halaman mana yang kemungkinan akan mereka kunjungi berikutnya, Anda dapat meningkatkan waktu pemuatan navigasi mendatang dengan mendownload resource untuk halaman tersebut terlebih dahulu.

Panduan ini menjelaskan cara melakukannya dengan <link rel=prefetch> yang memungkinkan Anda menerapkan pengambilan data secara efisien.

Meningkatkan performa situs dengan rel=prefetch

Menambahkan <link rel=prefetch> ke halaman web akan memberi tahu browser untuk mendownload beberapa resource (seperti skrip atau file CSS), yang mungkin diperlukan pengguna di masa mendatang:

<link rel="prefetch" href="/css/styles.css">

Petunjuk prefetch menggunakan byte tambahan untuk resource yang tidak segera diperlukan, sehingga teknik ini perlu diterapkan dengan cermat; hanya ambil resource secara prefetch jika Anda yakin bahwa pengguna akan membutuhkannya. Pertimbangkan untuk tidak melakukan pengambilan data sebelumnya saat pengguna menggunakan koneksi lambat. Anda dapat mendeteksinya dengan Network Information API.

Kasus penggunaan

Pengambilan data memiliki banyak kasus penggunaan untuk mempercepat halaman web dengan mendownload resource terlebih dahulu.

Mengambil halaman berikutnya terlebih dahulu

Mengambil dokumen HTML terlebih dahulu jika halaman berikutnya dapat diprediksi, sehingga saat link diklik, halaman akan langsung dimuat.

Perhatian: Speculation Rules API memberikan beberapa keunggulan dibandingkan prefetch untuk melakukan prefetch navigasi bagi browser yang mendukung API ini, termasuk menangani navigasi yang tidak dapat di-cache dan penanganan prefetch lintas origin yang konsisten.

Misalnya, di halaman listingan produk, Anda dapat melakukan pramuat halaman untuk produk paling populer dalam daftar. Dalam beberapa kasus, navigasi berikutnya bahkan lebih mudah diantisipasi—di halaman keranjang belanja, kemungkinan pengguna mengunjungi halaman checkout biasanya tinggi sehingga menjadikannya kandidat yang baik untuk pengambilan data sebelumnya.

Catatan: eBay menerapkan pengambilan data sebelumnya untuk lima hasil pertama di halaman penelusuran untuk mempercepat pemuatan halaman berikutnya dan melihat dampak positif pada rasio konversi.

Meskipun resource pengambilan data menggunakan bandwidth tambahan, resource ini dapat meningkatkan sebagian besar metrik performa. Time to First Byte (TTFB) sering kali akan jauh lebih rendah, karena permintaan dokumen menghasilkan hit cache. Karena TTFB akan lebih rendah, metrik berbasis waktu berikutnya juga akan sering kali lebih rendah, termasuk Largest Contentful Paint (LCP) dan First Contentful Paint (FCP).

Mengambil aset statis

Mengambil aset statis terlebih dahulu, seperti skrip atau stylesheet, jika bagian berikutnya yang mungkin dikunjungi pengguna dapat diprediksi. Hal ini sangat berguna jika aset tersebut dibagikan di banyak halaman.

Misalnya, Netflix memanfaatkan waktu yang dihabiskan pengguna di halaman logout untuk melakukan pengambilan data React secara terdahulu, yang akan digunakan setelah pengguna login. Berkat hal ini, mereka mengurangi Waktu Hingga Interaktif sebesar 30% untuk navigasi mendatang.

Pada saat penulisan ini, Anda dapat berbagi resource yang dipramuat di antara halaman yang ditayangkan dari berbagai origin. Saat Cache HTTP dengan kunci ganda dikirim, cache ini hanya akan berfungsi untuk navigasi tingkat atas dan sub-resource dengan origin yang sama, tetapi Anda tidak dapat menggunakan kembali sub-resource yang dipramuat di antara origin yang berbeda. Artinya, jika a.com melakukan pengambilan data sebelumnya pada resource b.com/library.js, resource tersebut tidak akan tersedia di cache c.com. Beberapa browser, seperti browser berbasis WebKit, sudah mempartisi cache dan penyimpanan HTML5 untuk semua domain pihak ketiga.

Efek pengambilan aset statis sebelumnya terhadap metrik performa bergantung pada resource yang diambil sebelumnya:

• Mengambil gambar secara pramuat dapat secara signifikan menurunkan waktu LCP untuk elemen gambar LCP.
• Mengambil stylesheet secara pramuat dapat meningkatkan FCP dan LCP, karena waktu jaringan untuk mendownload stylesheet akan dihilangkan. Karena stylesheet memblokir render, stylesheet dapat mengurangi LCP saat diambil sebelumnya. Jika elemen LCP halaman berikutnya adalah gambar latar belakang CSS yang diminta menggunakan properti background-image, gambar tersebut juga akan dipramuat sebagai resource dependen dari sheet gaya yang dipramuat.
• Dengan mengambil JavaScript terlebih dahulu, pemrosesan skrip yang diambil terlebih dahulu akan terjadi jauh lebih cepat daripada jika skrip tersebut harus diambil oleh jaringan terlebih dahulu selama navigasi. Hal ini dapat memengaruhi Interaction to Next Paint (INP) halaman. Jika markup dirender di klien menggunakan JavaScript, LCP dapat ditingkatkan dengan mengurangi penundaan pemuatan resource, dan rendering sisi klien dari markup yang berisi elemen LCP halaman dapat terjadi lebih cepat.
• Melakukan pramuat font web yang belum digunakan oleh halaman saat ini dapat menghilangkan pergeseran tata letak. Jika font-display: swap; digunakan, periode pertukaran untuk font akan dihapus, sehingga rendering teks menjadi lebih cepat dan menghilangkan pergeseran tata letak. Jika halaman mendatang menggunakan font yang dipramuat dan elemen LCP halaman adalah blok teks yang menggunakan font web, LCP untuk elemen tersebut juga akan lebih cepat.

Mengambil bagian JavaScript on demand

Pemisahan kode paket JavaScript memungkinkan Anda awalnya hanya memuat bagian aplikasi dan memuat sisanya secara lambat. Jika menggunakan teknik ini, Anda dapat menerapkan pengambilan data sebelumnya ke rute atau komponen yang tidak segera diperlukan, tetapi kemungkinan akan segera diminta.

Misalnya, jika Anda memiliki halaman yang berisi tombol yang membuka dialog yang berisi pemilih emoji, Anda dapat membaginya menjadi tiga bagian JavaScript—beranda, dialog, dan pemilih. Beranda dan dialog dapat dimuat pada awalnya, sedangkan pemilih dapat dimuat sesuai permintaan. Alat seperti webpack memungkinkan Anda menginstruksikan browser untuk melakukan pramuat potongan on demand ini.

Cara menerapkan rel=prefetch

Cara termudah untuk menerapkan prefetch adalah dengan menambahkan tag <link> ke <head> dokumen:

<head>
  ...
  <link rel="prefetch" href="//css/styles.css">
  ...
</head>

Anda juga dapat memulai pengambilan data dengan header HTTP Link:

Link: </css/style.css>; rel=prefetch

Manfaat menentukan petunjuk pengambilan data di Header HTTP adalah browser tidak perlu mengurai dokumen untuk menemukan petunjuk resource, yang dapat menawarkan peningkatan kecil dalam beberapa kasus.

Catatan: prefetch didukung di semua browser modern kecuali Safari. Anda dapat menerapkan teknik penggantian untuk Safari dengan permintaan XHR atau Fetch API.

Mengambil modul JavaScript terlebih dahulu dengan komentar magic webpack

webpack memungkinkan Anda melakukan pengambilan data sebelumnya untuk skrip rute atau fungsi yang Anda yakini akan segera dikunjungi atau digunakan oleh pengguna.

Cuplikan kode berikut memuat fungsi pengurutan secara lambat dari library lodash untuk mengurutkan sekelompok angka yang akan dikirimkan oleh formulir:

form.addEventListener("submit", e => {
  e.preventDefault()
  import('lodash.sortby')
    .then(module => module.default)
    .then(sortInput())
    .catch(err => { alert(err) });
});

Daripada menunggu peristiwa 'kirim' terjadi untuk memuat fungsi ini, Anda dapat melakukan pramuat resource ini untuk meningkatkan peluang tersedianya resource tersebut di cache pada saat pengguna mengirimkan formulir. webpack memungkinkan hal tersebut menggunakan komentar ajaib di dalam import():

form.addEventListener("submit", e => {
   e.preventDefault()
   import(/* webpackPrefetch: true */ 'lodash.sortby')
         .then(module => module.default)
         .then(sortInput())
         .catch(err => { alert(err) });
});

Tindakan ini akan memberi tahu webpack untuk memasukkan tag <link rel="prefetch"> ke dalam dokumen HTML:

<link rel="prefetch" href="1.bundle.js">

Manfaat performa dari pengambilan data sebelumnya untuk potongan on demand sedikit berbeda, tetapi secara umum, Anda dapat mengharapkan respons yang lebih cepat terhadap interaksi yang bergantung pada potongan on demand tersebut, karena potongan tersebut akan langsung tersedia. Bergantung pada sifat interaksi, hal ini dapat memberikan manfaat pada INP halaman.

Pengambilan data secara umum juga menjadi faktor dalam prioritasisasi resource secara keseluruhan. Saat dipramuat, resource akan dilakukan dengan prioritas serendah mungkin. Dengan demikian, resource yang diambil sebelumnya tidak akan bersaing untuk mendapatkan bandwidth bagi resource yang diperlukan oleh halaman saat ini.

Pengambilan data cerdas dengan quicklink dan Guess.js

Anda juga dapat menerapkan pengambilan data yang lebih cerdas dengan library yang menggunakan prefetch di balik layar:

• quicklink menggunakan Intersection Observer API untuk mendeteksi kapan link masuk ke area pandang dan melakukan pramuat resource tertaut selama waktu tidak ada aktivitas. Bonus: quicklink memiliki ukuran kurang dari 1 KB.
• Guess.js menggunakan laporan analisis untuk membuat model prediktif yang digunakan untuk melakukan pengambilan data secara cerdas hanya untuk hal yang kemungkinan diperlukan pengguna.

quicklink dan Guess.js menggunakan Network Information API untuk menghindari pengambilan data sebelumnya jika pengguna menggunakan jaringan yang lambat atau mengaktifkan Save-Data.

Pengambilan data di balik layar

Petunjuk resource bukan merupakan petunjuk wajib dan browser dapat memutuskan apakah, dan kapan, petunjuk tersebut akan dieksekusi.

Anda dapat menggunakan pengambilan data beberapa kali di halaman yang sama. Browser mengantrekan semua petunjuk dan meminta setiap resource saat tidak ada aktivitas. Di Chrome, jika pengambilan data belum selesai dimuat dan pengguna membuka resource pengambilan data yang dituju, pemuatan yang sedang berlangsung akan diambil sebagai navigasi oleh browser (vendor browser lain mungkin menerapkannya secara berbeda).

Pengambilan data dilakukan pada prioritas 'Terendah', sehingga resource yang diambil tidak bersaing untuk mendapatkan bandwidth dengan resource yang diperlukan di halaman saat ini.

File yang diambil sebelumnya disimpan di Cache HTTP jika resource dapat di-cache. Jika tidak, file akan dihapus dan tidak akan digunakan.

Kesimpulan

Penggunaan prefetch dapat sangat meningkatkan performa web situs dengan mendownload resource yang diperlukan di masa mendatang terlebih dahulu. prefetch didukung di sebagian besar browser modern. Teknik ini memerlukan pemuatan byte tambahan yang mungkin tidak digunakan, jadi berhati-hatilah saat menggunakannya; hanya lakukan jika diperlukan, dan idealnya, hanya di jaringan yang cepat.