Pada beberapa modul terakhir, Anda telah menemukan konsep seperti menunda
pemuatan JavaScript serta pemuatan lambat gambar dan elemen <iframe>
.
Menunda pemuatan resource akan mengurangi penggunaan jaringan dan CPU selama pemuatan halaman awal dengan mendownload resource pada saat resource dibutuhkan, bukan memuatnya di awal, yang berpotensi tidak terpakai.
Hal ini dapat memperbaiki waktu muat halaman awal, tetapi interaksi berikutnya dapat mengalami
penundaan jika resource yang diperlukan untuk mendukungnya belum dimuat pada saat
terjadi.
Misalnya, jika halaman berisi pemilih tanggal kustom, Anda dapat menunda resource alat pilih tanggal hingga pengguna berinteraksi dengan elemen. Namun, memuat resource pemilih tanggal sesuai permintaan dapat menyebabkan penundaan—mungkin sedikit, tetapi mungkin tidak, bergantung pada koneksi jaringan pengguna, kemampuan perangkat, atau keduanya—hingga resource didownload, diuraikan, dan tersedia untuk dieksekusi.
Ini merupakan hal yang sedikit rumit. Anda tentu tidak ingin membuang-buang bandwidth dengan memuat resource yang bisa jadi tidak digunakan, tetapi menunda interaksi dan pemuatan halaman selanjutnya juga mungkin tidak ideal. Untungnya, ada sejumlah alat yang dapat Anda gunakan untuk mencapai keseimbangan yang lebih baik antara kedua hal ekstrem tersebut—dan modul ini membahas beberapa teknik yang dapat Anda gunakan untuk mencapainya, seperti mengambil data resource, melakukan pra-rendering seluruh halaman, dan mem-cache resource menggunakan pekerja layanan.
Pengambilan sumber daya yang diperlukan dalam waktu dekat dengan prioritas rendah
Anda dapat mengambil resource secara preemptive—termasuk gambar, stylesheet,
atau resource JavaScript—dengan menggunakan petunjuk resource <link rel="prefetch">
. Petunjuk
prefetch
memberi tahu browser bahwa resource mungkin diperlukan
dalam waktu dekat.
Ketika petunjuk prefetch
ditentukan, browser kemudian dapat memulai permintaan
untuk resource tersebut pada prioritas terendah agar tidak bersaing dengan resource
yang diperlukan untuk halaman saat ini.
Pengambilan resource terlebih dahulu dapat meningkatkan pengalaman pengguna, karena pengguna tidak perlu menunggu resource yang diperlukan untuk didownload dalam waktu dekat, karena resource tersebut dapat langsung diambil dari cache disk pada saat dibutuhkan.
<head>
<!-- ... -->
<link rel="prefetch" as="script" href="/date-picker.js">
<link rel="prefetch" as="style" href="/date-picker.css">
<!-- ... -->
</head>
Cuplikan HTML sebelumnya memberi tahu browser bahwa cuplikan dapat mengambil data
date-picker.js
dan date-picker.css
setelah tidak ada aktivitas. Anda juga dapat mengambil data resource secara dinamis saat pengguna berinteraksi dengan halaman di JavaScript.
prefetch
didukung di semua browser modern kecuali Safari—yang
tersedia di belakang tanda. Jika Anda sangat membutuhkan untuk memuat resource secara preemtif untuk situs dengan cara yang berfungsi di semua browser—dan Anda menggunakan pekerja layanan—baca bagian selanjutnya dalam modul ini tentang mem-cache resource menggunakan pekerja layanan.
Ambil halaman lebih dahulu untuk mempercepat navigasi di masa mendatang
Anda juga dapat mengambil data halaman dan semua subresource-nya dengan menentukan atribut
as="document"
saat mengarahkan ke dokumen HTML:
<link rel="prefetch" href="/page" as="document">
Ketika tidak ada aktivitas, browser dapat memulai permintaan prioritas rendah untuk /page
.
Di browser berbasis Chromium, Anda dapat mengambil data dokumen menggunakan Speculation Rules API. Aturan Spekulasi didefinisikan sebagai objek JSON yang disertakan dalam HTML halaman, atau ditambahkan secara dinamis melalui JavaScript:
<script type="speculationrules">
{
"prefetch": [{
"source": "list",
"urls": ["/page-a", "/page-b"]
}]
}
</script>
Objek JSON mendeskripsikan satu atau beberapa tindakan—saat ini hanya mendukung
prefetch
dan prerender
—serta daftar URL yang terkait dengan tindakan tersebut. Dalam
cuplikan HTML sebelumnya, browser diinstruksikan untuk mengambil data /page-a
dan /page-b
. Serupa dengan <link rel="prefetch">
, aturan spekulasi adalah petunjuk yang dapat diabaikan oleh browser dalam keadaan tertentu.
Library seperti Quicklink meningkatkan kualitas navigasi halaman dengan melakukan pengambilan data secara dinamis atau melakukan pra-rendering link ke halaman setelah terlihat dalam area pandang pengguna. Hal ini akan meningkatkan kemungkinan pengguna pada akhirnya membuka halaman tersebut—dibandingkan dengan mengambil data semua link di halaman.
Halaman pra-rendering
Selain mengambil data resource, Anda juga dapat memberi petunjuk kepada browser untuk melakukan pra-rendering halaman sebelum pengguna membuka halaman tersebut. Hal ini dapat memberikan pemuatan halaman hampir seketika, karena halaman dan resource-nya diambil dan diproses di latar belakang. Setelah pengguna membuka halaman, halaman tersebut akan ditempatkan di latar depan.
Pra-rendering didukung melalui Speculation Rules API:
<script type="speculationrules">
{
"prerender": [
{
"source": "list",
"urls": ["/page-a", "page-b"]
}
]
}
</script>
Demo pengambilan data dan pra-rendering
Pra-cache pekerja layanan
Anda juga dapat mengambil data resource secara spekulatif menggunakan pekerja layanan.
Precaching pekerja layanan dapat mengambil dan menyimpan resource menggunakan Cache
API,
sehingga browser dapat menayangkan permintaan menggunakan Cache
API tanpa harus
membuka jaringan. Pra-cache pekerja layanan menggunakan strategi caching pekerja layanan yang sangat efektif, yang dikenal sebagai strategi khusus cache. Pola ini sangat efektif karena, setelah ditempatkan dalam cache pekerja layanan, resource tersebut akan diambil hampir seketika berdasarkan permintaan.
Untuk melakukan pra-cache resource menggunakan pekerja layanan, Anda dapat menggunakan Workbox. Namun, jika ingin, Anda dapat menulis kode sendiri untuk meng-cache kumpulan file yang telah ditentukan. Apa pun cara yang Anda pilih untuk menggunakan pekerja layanan untuk melakukan precache resource, penting untuk diketahui bahwa precache terjadi saat pekerja layanan diinstal. Setelah penginstalan, resource yang di-cache akan tersedia untuk diambil di halaman mana pun yang dikontrol pekerja layanan di situs Anda.
Workbox menggunakan manifes precache untuk menentukan resource mana yang harus di-precache. Manifes precache adalah daftar file dan informasi pembuatan versi yang berfungsi sebagai "sumber kebenaran" untuk resource yang akan di-precache.
[{
url: 'script.ffaa4455.js',
revision: null
}, {
url: '/index.html',
revision: '518747aa'
}]
Kode sebelumnya adalah contoh manifes yang menyertakan dua file:
script.ffaa4455.js
dan /index.html
. Jika resource berisi informasi
versi dalam file itu sendiri (dikenal sebagai hash file), properti revision
dapat dibiarkan sebagai null
, karena file sudah memiliki versi (misalnya,
ffaa4455
untuk resource script.ffaa4455.js
dalam kode sebelumnya). Untuk
resource yang tidak berversi, revisi dapat dibuat untuk resource tersebut pada waktu build.
Setelah disiapkan, pekerja layanan dapat digunakan untuk melakukan pra-cache halaman statis atau subresource guna mempercepat navigasi halaman berikutnya.
workbox.precaching.precacheAndRoute([
'/styles/product-page.ac29.css',
'/styles/product-page.39a1.js',
]);
Misalnya, pada halaman listingan produk e-commerce, pekerja layanan dapat digunakan untuk melakukan precache CSS dan JavaScript yang diperlukan untuk merender halaman detail produk, sehingga navigasi ke halaman detail produk terasa jauh lebih cepat. Pada
contoh sebelumnya, product-page.ac29.css
dan product-page.39a1.js
telah
di-cache sebelumnya. Metode precacheAndRoute
yang tersedia di workbox-precaching
akan otomatis mendaftarkan pengendali yang diperlukan untuk memastikan resource yang di-precache
diambil dari API pekerja layanan jika diperlukan.
Karena pekerja layanan didukung secara luas, Anda dapat menggunakan precache pekerja layanan di browser modern apa pun ketika situasi mengharuskannya.
Menguji pengetahuan Anda
Pada prioritas apa petunjuk prefetch
muncul?
Apa perbedaan antara pengambilan data dan prarendering halaman?
Cache pekerja layanan dan cache HTTP sama.
Berikutnya: Ringkasan pekerja web
Setelah mengetahui manfaat pengambilan data, pra-rendering, dan pra-cache pekerja layanan dalam hal mempercepat navigasi ke halaman mendatang, Anda dapat mengambil beberapa keputusan yang tepat tentang bagaimana hal ini dapat bermanfaat bagi situs dan penggunanya.
Selanjutnya, diberikan ringkasan tentang pekerja web, dan cara mereka dapat mengambil pekerjaan yang mahal dari thread utama dan memberikan ruang yang lebih luas ke thread utama untuk interaksi pengguna. Jika Anda pernah bertanya-tanya apa yang dapat dilakukan untuk memberi thread utama ruang yang lebih luas, dua modul berikutnya adalah sepadan untuk Anda.