Terima kasih telah menonton Google I/O. Tonton konten secara on-demand.

Halaman ini diterjemahkan oleh Cloud Translation API.

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

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.

Catatan: Petunjuk resource prefetch hanyalah itu—petunjuk. Browser dapat memutuskan—berdasarkan serangkaian kondisi sekitar kualitas jaringan, preferensi tingkat sistem, atau faktor lainnya—baik tidak ikuti petunjuk prefetch.

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.

Penting: Umumnya disarankan untuk menghindari penggunaan <link rel="prefetch"> untuk mengambil data lintas origin yang informatif serta dipersonalisasi. Terdapat masalah terbuka terkait dengan pengambilan data dokumen lintas origin yang menghasilkan duplikat permintaan. Anda juga harus menghindari pengambilan data dokumen origin yang sama yang dipersonalisasi—misalnya, tanggapan HTML dihasilkan secara dinamis untuk sesi yang diautentikasi—karena sumber daya tersebut biasanya tidak di-{i>cache<i} dan disimpan sangat mungkin untuk tidak digunakan, yang pada akhirnya membuang {i>bandwidth<i}.

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.

Catatan: Meskipun <link rel="prefetch"> mengambil data resource dan menyimpannya di cache HTTP, pengambilan data yang dimuat menggunakan aturan spekulasi diproses dan disimpan dalam {i>cache<i} memori, yang membuatnya lebih cepat untuk diambil jika diperlukan.

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>

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

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.

Menampilkan aliran cache pekerja layanan dari halaman, ke pekerja layanan, ke cache. — Strategi khusus cache hanya mengambil resource yang memenuhi syarat dari jaringan selama instalasi pekerja layanan. Setelah diinstal, cache resource hanya akan diambil dari cache pekerja layanan.

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.

Tujuan Cache antarmuka yang digunakan oleh pekerja layanan dan cache HTTP tidak sama. Antarmuka Cache adalah cache tingkat tinggi yang dikontrol oleh JavaScript, sedangkan {i>cache<i} HTTP adalah {i> cache<i} tingkat rendah yang dikontrol oleh Cache-Control header.

Menguji pengetahuan Anda

Pada prioritas apa petunjuk prefetch muncul?

Tinggi.

Coba lagi.

Sedang.

Coba lagi.

Rendah.

Benar.

Apa perbedaan antara pengambilan awal dan melakukan prarendering halaman?

Meskipun pengambilan data dan pra-rendering untuk halaman mendapatkan halaman dan semua subsumber dayanya, pengambilan data hanya mengambil laman dan semua sumber daya sementara pra-rendering selangkah lebih maju dengan merender seluruh halaman latar belakang hingga pengguna menavigasi ke sana.

Benar.

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

Coba lagi.

Cache pekerja layanan dan cache HTTP sama.

Benar

Coba lagi.

Salah

Benar.

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!