Ambil resource lebih awal untuk mempercepat navigasi di masa mendatang

Pelajari petunjuk resource rel=prefetch dan cara menggunakannya.

Demián Renzulli
Demián Renzulli
X GitHub Gangguan
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">

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 mengambil data 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 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, saat 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 yang logout, untuk mengambil data React, 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 adalah pemblokiran render, gaya tersebut dapat mengurangi LCP saat pengambilan data. 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.
  • 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—home, dialog, dan picker. 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 dengan komentar ajaib webpack

webpack memungkinkan Anda mengambil skrip pengambilan untuk rute atau fungsi yang secara wajar pasti akan 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" as="script" href="1.bundle.js">

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

Pengambilan data secara umum juga menjadi faktor dalam prioritasisasi resource secara keseluruhan. Saat pengambilan data resource, dilakukan 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 jika pengguna berada di jaringan yang lambat atau mengaktifkan Save-Data.

Pengambilan data di balik layar

Petunjuk resource bukanlah instruksi wajib dan bergantung pada browser untuk memutuskan apakah, dan kapan, 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, resource Chrome disimpan selama lima menit, setelah itu aturan Cache-Control normal untuk resource tersebut akan berlaku.

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