Ambil resource lebih awal untuk mempercepat navigasi di masa mendatang

Pelajari petunjuk resource rel=prefetch dan cara menggunakannya.

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>, 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 diperlukan pengguna di masa mendatang:

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

Diagram yang menunjukkan cara kerja pengambilan data link.

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.

Ada berbagai cara untuk menentukan link mana yang akan dipramuat. Cara yang paling sederhana 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—di halaman keranjang belanja, kemungkinan pengguna mengunjungi halaman checkout biasanya tinggi sehingga menjadikannya kandidat yang baik untuk pengambilan data sebelumnya.

Meskipun memuat awal resource 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, 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.

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 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 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 di klien melalui 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 data potongan JavaScript on demand

Pemisahan kode paket JavaScript memungkinkan Anda untuk awalnya hanya memuat sebagian 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 kotak 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="/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 browser tidak perlu mengurai dokumen untuk menemukan petunjuk resource, yang dapat menawarkan peningkatan kecil dalam beberapa kasus.

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 pengambilan data sebelumnya untuk meningkatkan peluang tersedianya resource ini 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 chunk on demand sedikit berbeda, tetapi secara umum, Anda dapat mengharapkan respons yang lebih cepat terhadap interaksi yang bergantung pada chunk on demand tersebut, karena chunk 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 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.

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

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