Ambil resource lebih awal untuk mempercepat navigasi di masa mendatang

Pelajari petunjuk resource rel=fetch dan cara menggunakannya.

Demián Renzulli
Demián Renzulli
X GitHub Gangguan
Jeremy Wagner

Penelitian menunjukkan bahwa waktu pemuatan yang lebih cepat menghasilkan rasio konversi yang lebih tinggi dan pengalaman pengguna yang lebih baik. Jika memiliki insight tentang bagaimana pengguna bergerak di situs Anda dan halaman mana yang mungkin akan mereka kunjungi, Anda dapat mempercepat waktu pemuatan navigasi di masa mendatang dengan mendownload referensi untuk halaman tersebut sebelumnya.

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

Tingkatkan 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 langsung diperlukan, sehingga teknik ini harus diterapkan dengan cermat; hanya ambil data resource saat Anda yakin bahwa pengguna akan memerlukannya. Pertimbangkan untuk tidak melakukan pengambilan data saat pengguna menggunakan koneksi yang lambat. Anda dapat mendeteksinya dengan Network Information API.

Ada berbagai cara untuk menentukan link mana yang akan diambil data-nya. Yang paling sederhana adalah dengan mengambil data 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

Melakukan pra-pengambilan halaman berikutnya

Ambil dokumen HTML lebih dulu saat halaman berikutnya dapat diprediksi, sehingga saat link diklik, halaman akan langsung dimuat.

Misalnya, di halaman listingan produk, Anda dapat mengambil data 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 yang menjadikannya kandidat yang baik untuk pengambilan data.

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

Melakukan pra-pengambilan aset statis

Ambil aset statis, seperti skrip atau stylesheet, saat bagian berikutnya yang mungkin dikunjungi pengguna dapat diprediksi. Hal ini sangat berguna ketika aset tersebut dibagikan di banyak halaman.

Misalnya, Netflix memanfaatkan waktu yang dihabiskan pengguna di halaman logout, untuk mengambil data React, yang akan digunakan setelah pengguna login. Berkat fitur ini, mereka mengurangi Waktu untuk Interaktif sebesar 30% untuk navigasi mendatang.

Efek dari pengambilan data aset statis pada metrik performa bergantung pada resource yang diambil terlebih dahulu:

  • Pengambilan gambar dapat mengurangi waktu LCP secara signifikan untuk elemen gambar LCP.
  • Pengambilan stylesheet yang diambil sebelumnya dapat meningkatkan FCP dan LCP, karena waktu jaringan untuk mendownload stylesheet akan dihilangkan. Karena stylesheet adalah pemblokiran render, stylesheet dapat mengurangi LCP saat pengambilan data. Jika elemen LCP halaman berikutnya adalah gambar latar CSS yang diminta melalui properti background-image, gambar juga akan diambil terlebih dahulu sebagai resource dependen dari stylesheet yang diambil terlebih dahulu.
  • Prefetching JavaScript akan memungkinkan pemrosesan skrip yang telah di-pengambilan data terjadi lebih cepat dibandingkan jika harus diambil oleh jaringan terlebih dahulu selama navigasi. Hal ini dapat memengaruhi metrik responsivitas seperti Penundaan Input Pertama (FID) dan Interaction to Next Paint (INP). Jika markup dirender di klien melalui JavaScript, LCP dapat ditingkatkan melalui pengurangan penundaan pemuatan resource, dan rendering 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 penukaran untuk font akan dihilangkan, sehingga rendering teks menjadi lebih cepat dan menghilangkan pergeseran tata letak. Jika halaman mendatang menggunakan font yang telah diambil data dan elemen LCP halamannya adalah blok teks yang menggunakan font web, LCP untuk elemen tersebut juga akan lebih cepat.

Pengambilan potongan JavaScript sesuai permintaan

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

Misalnya, jika memiliki halaman berisi tombol yang membuka kotak dialog yang berisi pemilih emoji, Anda dapat membaginya menjadi tiga bagian JavaScript, yaitu beranda, dialog, dan pemilih. Beranda dan dialog dapat dimuat di awal, sedangkan pemilih dapat dimuat sesuai permintaan. Alat seperti webpack memungkinkan Anda memerintahkan {i>browser<i} untuk mengambil potongan data berdasarkan permintaan ini.

Cara menerapkan rel=prefetch

Cara paling sederhana untuk menerapkan prefetch adalah menambahkan tag <link> ke <head> dokumen:

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

Atribut as membantu browser menyetel header yang tepat, dan menentukan apakah resource sudah ada dalam cache. Contoh nilai untuk atribut ini meliputi: document, script, style, font, image, dan others.

Anda juga dapat memulai pengambilan data melalui header HTTP Link:

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

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

Melakukan pra-pengambilan modul JavaScript dengan komentar ajaib webpack

webpack memungkinkan Anda mengambil skrip untuk rute atau fungsi yang cukup yakin akan dikunjungi atau digunakan segera oleh pengguna.

Cuplikan kode berikut memuat fungsi pengurutan dari library lodash secara lambat untuk mengurutkan grup angka yang akan dikirim melalui 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 mengambil data resource ini untuk meningkatkan kemungkinan tersedianya di cache saat pengguna mengirimkan formulir. webpack memungkinkan penggunaan 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 melakukan pengambilan data potongan on-demand sedikit berbeda, tetapi secara umum, Anda akan melihat respons yang lebih cepat terhadap interaksi yang bergantung pada potongan on-demand tersebut, karena akan segera tersedia. Bergantung pada sifat interaksi, hal ini dapat memberikan manfaat bagi INP halaman.

Pengambilan data secara umum juga memengaruhi prioritas resource secara keseluruhan. Saat resource diambil data, hal ini dilakukan dengan prioritas serendah mungkin. Dengan demikian, resource yang diambil data tidak akan bersaing dengan bandwidth untuk resource yang dibutuhkan 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

Resource petunjuk bukan merupakan instruksi wajib dan terserah 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 ditetapkan, pemuatan yang sedang berlangsung akan diambil sebagai navigasi oleh browser (vendor browser lain mungkin menerapkannya secara berbeda).

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

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

Kesimpulan

Menggunakan prefetch dapat mempercepat waktu muat navigasi di masa mendatang dan bahkan membuat halaman tampak dimuat seketika. prefetch didukung secara luas dalam browser modern, yang menjadikannya teknik 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.