Pelajari petunjuk resource rel=fetching dan cara menggunakannya.
Penelitian 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 dengan cara yang 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 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 sumber daya ketika Anda yakin 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 diambil data sebelumnya. Yang paling sederhana adalah mengambil data tautan pertama atau beberapa tautan pertama pada halaman saat ini. Ada juga library yang menggunakan pendekatan lebih canggih, yang akan dijelaskan nanti dalam postingan ini.
Kasus penggunaan
Mengambil halaman berikutnya
Mengambil dokumen HTML ketika halaman berikutnya dapat diprediksi, sehingga ketika link diklik, halaman akan dimuat secara instan.
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—pada halaman keranjang belanja, kemungkinan pengguna mengunjungi halaman checkout biasanya tinggi yang menjadikannya kandidat yang baik untuk pengambilan data.
Meskipun resource pengambilan data menggunakan bandwidth tambahan, hal ini dapat meningkatkan sebagian besar metrik performa. Time to First Byte (TTFB) sering kali jauh lebih rendah, karena permintaan dokumen menyebabkan cache ditemukan. Karena TTFB akan lebih rendah, metrik berbasis waktu berikutnya juga akan sering lebih rendah, termasuk Largest Contentful Paint (LCP) dan First Contentful Paint (FCP).
Pengambilan aset statis
Mengambil aset statis, 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 yang logout, untuk mengambil data React, yang akan digunakan setelah pengguna login. Berkat hal ini, mereka mengurangi Waktu untuk Interaktif sebesar 30% untuk navigasi mendatang.
Efek dari pengambilan data aset statis pada metrik performa bergantung pada resource yang sedang pengambilan data:
- Pengambilan gambar dapat mengurangi waktu LCP secara signifikan untuk elemen gambar LCP.
- Pengambilan stylesheet 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 juga akan diambil datanya sebagai resource dependen dari stylesheet yang diambil sebelumnya. - Pengambilan JavaScript akan memungkinkan pemrosesan skrip pengambilan data terjadi jauh lebih cepat daripada jika 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 penukaran untuk font akan dihilangkan, sehingga rendering teks menjadi lebih cepat dan menghilangkan pergeseran tata letak. Jika halaman berikutnya menggunakan font yang telah diambil sebelumnya dan elemen LCP halaman adalah blok teks yang menggunakan font web, LCP untuk elemen tersebut juga akan lebih cepat.
Mengambil 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 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 memerintahkan browser untuk mengambil potongan sesuai 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 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 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.
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 dari library lodash secara lambat 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 'submit' yang Anda lakukan untuk memuat fungsi ini, Anda dapat mengambil data sumber daya ini untuk meningkatkan kemungkinannya tersedia di cache pada 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 pengambilan data 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 pemprioritasan resource secara keseluruhan. Saat pengambilan data resource, dilakukan dengan prioritas serendah mungkin. Dengan demikian, resource pengambilan data apa pun tidak akan bersaing untuk bandwidth untuk resource yang dibutuhkan oleh halaman saat ini.
Pengambilan data cerdas dengan quicklink dan Guess.js
Anda juga dapat mengimplementasikan pengambilan data yang lebih cerdas dengan library yang menggunakan prefetch di balik layar:
- link cepat menggunakan Intersection Observer API untuk mendeteksi saat link masuk ke area pandang dan mengambil data resource tertaut selama waktu tidak ada aktivitas. Bonus: quicklink memiliki berat kurang dari 1 KB!
- Guess.js menggunakan laporan analisis untuk membuat model prediktif yang digunakan hanya untuk pengambilan data secara cerdas, yang hanya mungkin dibutuhkan pengguna.
Quicklink dan Guess.js menggunakan Network Information API untuk menghindari pengambilan data jika pengguna berada di jaringan yang lambat atau mengaktifkan Save-Data.
Mengambil 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 ditentukan, pemuatan saat ini akan diambil karena navigasi oleh browser (vendor browser lain mungkin menerapkannya secara berbeda).
Pengambilan data berlangsung pada 'Terendah' prioritas, 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, resource Chrome disimpan selama lima menit, setelah itu aturan Cache-Control normal untuk resource tersebut akan berlaku.
Kesimpulan
Menggunakan prefetch dapat meningkatkan waktu muat navigasi mendatang secara signifikan dan bahkan membuat halaman tampak dimuat dengan cepat. prefetch didukung secara luas di browser modern, yang menjadikannya teknik yang menarik untuk meningkatkan pengalaman navigasi bagi banyak pengguna. Teknik ini membutuhkan pemuatan {i>byte<i} tambahan yang mungkin tidak digunakan, jadi berhati-hatilah saat Anda menggunakannya; lakukan hanya jika diperlukan, dan idealnya, hanya pada jaringan yang cepat.