Bersiaplah menghadapi akhir cookie pihak ketiga di Chrome. Uji situs Anda sekarang untuk menemukan kerusakan apa pun.

Halaman ini diterjemahkan oleh Cloud Translation API.

Pengambilan data, pra-rendering, dan pra-cache pekerja layanan

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.

Catatan: Petunjuk resource prefetch hanyalah itu—sebuah petunjuk. Browser dapat memutuskan—berdasarkan serangkaian kondisi seputar kualitas jaringan, preferensi tingkat sistem, atau faktor lainnya—apakah akan menerima petunjuk prefetch atau tidak.

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.

Penting: Sebaiknya hindari penggunaan <link rel="prefetch"> untuk mengambil data dokumen lintas asal. Ada masalah terbuka terkait pengambilan data dokumen lintas origin yang menghasilkan permintaan duplikat. Anda juga sebaiknya menghindari pengambilan data dokumen dengan origin yang sama yang dipersonalisasi—misalnya, respons HTML yang dihasilkan secara dinamis untuk sesi yang diautentikasi—karena resource tersebut biasanya tidak di-cache dan sangat mungkin tidak digunakan, yang pada akhirnya menyia-nyiakan bandwidth.

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.

Catatan: Saat <link rel="prefetch"> mengambil data resource dan menyimpannya dalam cache HTTP, pengambilan data yang dimuat menggunakan aturan spekulasi akan diproses dan disimpan dalam cache memori, sehingga pengambilan data lebih cepat saat diperlukan.

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>

Catatan: Chrome juga mendukung <link rel="prerender" href="/page"> petunjuk resource. Namun, sejak Chrome 63, tindakan ini akan memulai NoState Prefetch yang mengambil resource yang diperlukan oleh halaman, bukan merender halaman dan mengeksekusi JavaScript.

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.

Menampilkan alur cache pekerja layanan dari halaman, ke pekerja layanan, ke cache. — Strategi khusus cache hanya mengambil resource yang memenuhi syarat dari jaringan selama penginstalan pekerja layanan. Setelah diinstal, resource yang di-cache hanya diambil dari cache pekerja layanan.

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.

Antarmuka Cache yang digunakan oleh pekerja layanan dan cache HTTP tidak sama. Antarmuka Cache adalah cache tingkat tinggi yang dikontrol oleh JavaScript, sedangkan cache HTTP adalah cache tingkat rendah yang dikontrol oleh header Cache-Control.

Menguji pengetahuan Anda

Pada prioritas apa petunjuk prefetch muncul?

Tinggi.

Coba lagi.

Sedang.

Coba lagi.

Rendah.

Benar.

Apa perbedaan antara pengambilan data dan prarendering halaman?

Meskipun pengambilan data dan pra-rendering untuk sebuah halaman mendapatkan halaman dan semua subresource-nya, pengambilan data hanya mengambil halaman tersebut dan semua resource-nya, sementara pra-rendering berjalan selangkah lebih maju dengan merender seluruh halaman latar belakang hingga pengguna bernavigasi ke sana.

Benar.

Sebagian besarnya sama, hanya pra-rendering yang mendapatkan semua subresource halaman, sedangkan pengambilan data tidak.

Coba lagi.

Cache pekerja layanan dan cache HTTP sama.

Benar

Coba lagi.

Salah

Benar.

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.