Dalam beberapa modul terakhir, Anda telah menemukan konsep seperti menunda
pemuatan JavaScript dan pemuatan lambat gambar dan elemen <iframe>.
Menunda pemuatan resource akan mengurangi penggunaan jaringan dan CPU selama proses awal
pemuatan halaman dengan mendownload
sumber daya saat dibutuhkan,
alih-alih memuatnya di awal, di mana mereka berpotensi tidak digunakan.
Hal ini dapat meningkatkan waktu muat halaman awal, tetapi interaksi berikutnya mungkin akan menimbulkan
penundaan jika sumber daya yang diperlukan untuk
memberi daya padanya belum dimuat pada saat itu
hal tersebut terjadi.
Misalnya, jika halaman berisi pemilih tanggal kustom, Anda dapat menunda tanggal tersebut resource pemilih hingga pengguna berinteraksi dengan elemen. Namun, memuat sumber daya penentu tanggal sesuai permintaan dapat mengakibatkan penundaan—mungkin sedikit, tapi mungkin tidak, tergantung pada koneksi jaringan pengguna, kemampuan perangkat, atau keduanya—hingga resource didownload, diuraikan, dan tersedia untuk dieksekusi.
Ini agak rumit—Anda tidak ingin membuang-buang {i>bandwidth<i} dengan memuat sumber daya yang dapat tidak digunakan, namun menunda interaksi dan laman berikutnya muatan mungkin juga tidak ideal. Untungnya, ada sejumlah alat yang bisa Anda untuk mencapai keseimbangan yang lebih baik di antara kedua hal ekstrem ini—dan modul ini membahas beberapa teknik yang dapat Anda gunakan untuk sampai ke sana, seperti sumber daya pengambilan data, melakukan pra-rendering seluruh halaman, dan melakukan precache resource menggunakan pekerja layanan.
Mengambil resource lebih dulu 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">. Tujuan
Petunjuk prefetch memberi tahu browser bahwa resource mungkin akan diperlukan dalam
dalam waktu dekat.
Saat petunjuk prefetch ditentukan, browser akan memulai permintaan
untuk resource tersebut dengan prioritas terendah agar tidak bersaing dengan resource
yang diperlukan untuk halaman saat ini.
Pengambilan sumber daya dapat meningkatkan pengalaman pengguna, karena pengguna tidak untuk menunggu sumber daya yang dibutuhkan dalam waktu dekat untuk diunduh, karena bisa langsung diambil dari {i> cache disk<i} 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 browser dapat mengambil data
date-picker.js dan date-picker.css setelah tidak ada aktivitas. Dimungkinkan juga untuk
mengambil resource secara dinamis saat pengguna berinteraksi dengan halaman di
pada JavaScript.
prefetch didukung di semua browser modern kecuali Safari—jika
yang tersedia di balik penanda. Jika Anda memiliki kebutuhan yang kuat untuk melakukan pemuatan awal
untuk situs Anda dengan cara yang berfungsi di semua browser—dan Anda menggunakan
pekerja layanan—lalu baca bagian selanjutnya di modul ini tentang melakukan precache
resource menggunakan pekerja layanan.
Ambil halaman lebih dahulu untuk mempercepat navigasi di masa mendatang
Anda juga dapat melakukan pengambilan data halaman dan semua subsumber dayanya dengan menentukan
Atribut as="document" saat mengarahkan ke dokumen HTML:
<link rel="prefetch" href="/page" as="document">
Saat 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 ditetapkan sebagai objek JSON disertakan dalam HTML halaman, atau ditambahkan secara dinamis melalui JavaScript:
<script type="speculationrules">
{
"prefetch": [{
"source": "list",
"urls": ["/page-a", "/page-b"]
}]
}
</script>
Objek JSON menjelaskan satu atau beberapa tindakan—saat ini hanya mendukung
prefetch dan prerender—serta daftar URL yang terkait dengan tindakan tersebut. Di beberapa
cuplikan HTML sebelumnya, browser diminta untuk mengambil data /page-a
dan /page-b. Sama seperti <link rel="prefetch">, aturan spekulasi adalah
mengisyaratkan bahwa browser dapat mengabaikannya dalam keadaan tertentu.
Library seperti Quicklink meningkatkan kualitas navigasi halaman dengan pengambilan data atau pra-rendering link ke halaman setelah terlihat dalam area pandang pengguna. Hal ini meningkatkan kemungkinan bahwa pengguna pada akhirnya menavigasi ke halaman tersebut—dibandingkan dengan pengambilan data semua link di halaman.
Halaman pra-rendering
Selain sumber daya pengambilan data, Anda juga bisa memberi petunjuk ke browser untuk melakukan pra-rendering halaman sebelum pengguna membuka halaman tersebut. Hal ini dapat menghasilkan hampir pemuatan halaman secara instan, saat halaman dan resource diambil dan diproses dalam 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
Pembuatan pra-cache pekerja layanan
Anda juga dapat melakukan pengambilan data resource secara spekulatif menggunakan pekerja layanan.
Precaching pekerja layanan dapat mengambil dan menyimpan resource menggunakan Cache API,
yang memungkinkan browser menyajikan permintaan menggunakan Cache API tanpa harus
jaringan. Precaching pekerja layanan menggunakan pekerja layanan yang sangat efektif
strategi caching, yang dikenal sebagai strategi khusus cache. Pola ini sangat
efektif karena, setelah resource ditempatkan di cache pekerja layanan,
diambil hampir seketika sesuai permintaan.
Untuk melakukan precache resource menggunakan pekerja layanan, Anda dapat menggunakan Workbox. Jika Anda lebih suka, bagaimanapun, Anda dapat menulis kode Anda sendiri untuk meng-{i>cache<i} rangkaian kode yang telah ditentukan . Apa pun itu, Anda memutuskan untuk menggunakan pekerja layanan untuk melakukan pra-cache penting untuk diketahui bahwa precaching terjadi saat layanan Worker diinstal. Setelah instalasi, sumber daya yang telah di-{i>precache<i} kemudian akan tersedia untuk diambil di halaman mana pun yang dikontrol pekerja layanan di situs Anda.
Workbox menggunakan manifes pra-cache untuk menentukan resource mana yang harus dilakukan pra-cache. Manifes pra-cache adalah daftar file dan informasi pembuatan versi yang berfungsi sebagai "sumber kebenaran" untuk resource yang akan di-pra-cache.
[{
url: 'script.ffaa4455.js',
revision: null
}, {
url: '/index.html',
revision: '518747aa'
}]
Kode sebelumnya adalah contoh manifes yang mencakup dua file:
script.ffaa4455.js dan /index.html. Jika resource berisi versi
informasi di file itu sendiri (dikenal sebagai hash file), lalu revision
dapat dibiarkan sebagai null, karena file sudah memiliki versi (misalnya,
ffaa4455 untuk resource script.ffaa4455.js dalam kode sebelumnya). Sebagai
tanpa versi, revisi dapat dibuat untuk resource tersebut pada waktu build.
Setelah disiapkan, pekerja layanan bisa digunakan untuk melakukan precache halaman statis atau subresource untuk mempercepat navigasi halaman berikutnya.
workbox.precaching.precacheAndRoute([
'/styles/product-page.ac29.css',
'/styles/product-page.39a1.js',
]);
Misalnya, di halaman listingan produk e-commerce, pekerja layanan dapat digunakan
untuk melakukan precache CSS dan JavaScript yang diperlukan untuk merender halaman detail produk,
membuat navigasi ke halaman detail produk terasa jauh lebih cepat. Di kolom
contoh sebelumnya, product-page.ac29.css dan product-page.39a1.js adalah
dilakukan pra-cache. Metode precacheAndRoute tersedia di workbox-precaching
secara otomatis mendaftarkan handler yang diperlukan untuk memastikan resource yang telah dipra-cache
akan diambil dari API pekerja layanan jika diperlukan.
Karena pekerja layanan didukung secara luas, Anda dapat menggunakan pekerja layanan {i>precaching<i} di {i>browser<i} modern apa pun yang diperlukan oleh situasi tersebut.
Menguji pengetahuan Anda
Pada prioritas apa petunjuk prefetch muncul?
Apa perbedaan antara pengambilan awal dan melakukan prarendering halaman?
Cache pekerja layanan dan cache HTTP sama.
Berikutnya: Ringkasan pekerja web
Setelah Anda mengetahui cara pengambilan data, pra-rendering, dan precaching pekerja layanan dalam hal mempercepat navigasi ke masa depan halaman, Anda berada dalam posisi untuk membuat beberapa keputusan yang tepat tentang bermanfaat bagi situs web Anda dan penggunanya.
Selanjutnya, ringkasan tentang pekerja web diberikan, dan bagaimana mereka dapat mengambil bekerja di luar utas utama dan memberikan ruang pernapasan yang lebih luas untuk utas utama interaksi pengguna. Jika Anda pernah bertanya-tanya apa yang dapat Anda lakukan untuk memberi memberikan ruang yang lebih luas, maka dua modul berikutnya sepadan dengan waktu Anda!