Ambil resource lebih awal untuk mempercepat navigasi di masa mendatang

Pelajari petunjuk resource rel=fetching dan cara menggunakannya.

Demián Renzulli

Jeremy Wagner

Riset menunjukkan bahwa waktu pemuatan yang lebih cepat menghasilkan rasio konversi yang lebih tinggi dan pengalaman pengguna yang lebih baik. Jika Anda memiliki wawasan tentang bagaimana pengguna bergerak melalui situs web Anda dan halaman mana yang kemungkinan akan mereka kunjungi berikutnya, Anda dapat memperbaiki waktu muat navigasi mendatang dengan mendownload sumber daya untuk halaman tersebut sebelumnya.

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

Meningkatkan navigasi dengan rel=prefetch

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

<link rel="prefetch" href="/articles/" as="document">

Petunjuk prefetch menggunakan byte tambahan untuk resource yang tidak segera diperlukan, sehingga teknik ini perlu diterapkan dengan cermat; hanya mengambil resource pengambilan data saat 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.

Ada berbagai cara untuk menentukan link mana yang akan dipramuat. Cara termudah adalah dengan melakukan pramuat link pertama atau beberapa link pertama di halaman saat ini. Ada juga library yang menggunakan pendekatan yang lebih canggih, yang akan dijelaskan nanti dalam postingan ini.

Kasus penggunaan

Mengambil data halaman berikutnya

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

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—pada halaman keranjang belanja, kemungkinan pengguna mengunjungi halaman checkout biasanya tinggi yang menjadikannya kandidat yang baik untuk pengambilan data.

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, hal 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 lebih rendah, termasuk Largest Contentful Paint (LCP) dan First Contentful Paint (FCP).

Mengambil aset statis terlebih dahulu

Mengambil aset statis terlebih dahulu, seperti skrip atau stylesheet, saat bagian berikutnya yang mungkin dikunjungi pengguna dapat diprediksi. Hal ini sangat berguna saat 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:

• Pengambilan gambar dapat mengurangi waktu LCP secara signifikan untuk elemen gambar LCP.
• Mengambil stylesheet terlebih dahulu 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 CSS yang diminta melalui properti background-image, gambar tersebut juga akan dipramuat sebagai resource dependen dari stylesheet 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 pada klien melalui JavaScript, LCP dapat ditingkatkan melalui pengurangan penundaan pemuatan resource, dan rendering sisi klien untuk markup yang berisi elemen LCP halaman dapat terjadi lebih cepat.
• Mengambil 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 data potongan JavaScript on demand

Memisahkan kode paket JavaScript memungkinkan Anda untuk awalnya hanya memuat bagian aplikasi dan lambat memuat sisanya. 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 kotak dialog yang berisi pemilih emoji, Anda dapat membaginya menjadi tiga bagian JavaScript—home, dialog, dan picker. Beranda dan dialog dapat dimuat terlebih dahulu, sedangkan pemilih dapat dimuat secara on demand. 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="/articles/" as="document">
  ...
</head>

Atribut as membantu browser menetapkan header yang tepat, dan menentukan apakah resource sudah ada di cache. Contoh nilai untuk atribut ini mencakup: document, script, style, font, image, dan lainnya.

Anda juga dapat memulai pengambilan data sebelumnya melalui header HTTP Link:

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

Manfaat menentukan petunjuk pengambilan data di Header HTTP adalah bahwa 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 ajaib webpack

webpack memungkinkan Anda melakukan pengambilan data skrip untuk rute atau fungsi yang Anda yakini akan segera dikunjungi atau digunakan 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" as="script" href="1.bundle.js">

Manfaat performa 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 interaksinya, hal ini dapat memberikan manfaat bagi INP halaman.

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

Pengambilan data awal yang cerdas dengan quicklink dan Guess.js

Anda juga dapat mengimplementasikan 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 hanya untuk pengambilan data secara cerdas, yang hanya mungkin diperlukan pengguna.

Quicklink dan Guess.js menggunakan Network Information API untuk menghindari pengambilan data jika pengguna berada di 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 pengambilan data tidak bersaing mendapatkan bandwidth dengan resource yang diperlukan di halaman saat ini.

File yang diambil sebelumnya disimpan di Cache HTTP, atau cache memori (bergantung pada apakah resource dapat di-cache atau tidak), selama jangka waktu yang bervariasi menurut browser. Misalnya, di Chrome, resource disimpan selama lima menit, setelah itu aturan Cache-Control normal untuk resource akan diterapkan.

Kesimpulan

Penggunaan prefetch dapat sangat meningkatkan waktu pemuatan navigasi mendatang dan bahkan membuat halaman tampak dimuat secara instan. prefetch didukung secara luas di browser modern, sehingga menjadikannya teknik yang menarik untuk meningkatkan pengalaman navigasi bagi banyak pengguna. 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.