Codelab: Pramuat aset penting untuk meningkatkan kecepatan pemuatan

Dalam codelab ini, performa halaman web berikut ditingkatkan dengan melakukan pramuat dan pra-ambil beberapa resource:

Screenshot Aplikasi

Ukur

Pertama, ukur performa situs sebelum menambahkan pengoptimalan apa pun.

  • Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Kemudian tekan Layar Penuh layar penuh.

Jalankan audit performa Lighthouse (Lighthouse > Options > Performance) di versi live Glitch Anda (lihat juga Menemukan peluang performa dengan Lighthouse).

Lighthouse menampilkan audit yang gagal berikut untuk resource yang diambil terlambat:

Lighthouse: Audit pramuat permintaan kunci
  • Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
  • Klik tab Jaringan.
Panel jaringan dengan resource yang ditemukan terlambat

File main.css tidak diambil oleh elemen Link (<link>) yang ditempatkan dalam dokumen HTML, tetapi file JavaScript terpisah, fetch-css.js, melampirkan elemen Link ke DOM setelah peristiwa window.onLoad. Artinya, file hanya diambil setelah browser selesai mengurai dan mengeksekusi file JS. Demikian pula, font web (K2D.woff2) yang ditentukan dalam main.css hanya diambil setelah file CSS selesai didownload.

Rantai permintaan penting mewakili urutan resource yang diprioritaskan dan diambil oleh browser. Untuk halaman web ini, saat ini terlihat seperti ini:

├─┬ / (initial HTML file)
  └── fetch-css.js
    └── main.css
      └── K2D.woff2

Karena file CSS berada di tingkat ketiga rantai permintaan, Lighthouse telah mengidentifikasinya sebagai resource yang ditemukan terlambat.

Melakukan pramuat resource penting

File main.css adalah aset penting yang segera diperlukan segera setelah halaman dimuat. Untuk file penting seperti resource ini yang diambil terlambat di aplikasi Anda, gunakan tag pramuat link untuk memberi tahu browser agar mendownloadnya lebih cepat dengan menambahkan elemen Link ke header dokumen.

Tambahkan tag pramuat untuk aplikasi ini:

<head>
  <!-- ... -->
  <link rel="preload" href="main.css" as="style">
</head>

Atribut as digunakan untuk mengidentifikasi jenis resource yang diambil, dan as="style" digunakan untuk memuat ulang file stylesheet.

Muat ulang aplikasi dan lihat panel Network di DevTools.

Panel jaringan dengan resource yang dimuat sebelumnya

Perhatikan bagaimana browser mengambil file CSS sebelum JavaScript yang bertanggung jawab untuk mengambilnya selesai diuraikan. Dengan pramuat, browser akan mengetahui untuk melakukan pengambilan preemptive untuk resource dengan asumsi bahwa resource tersebut penting untuk halaman web.

Jika tidak digunakan dengan benar, pramuat dapat membahayakan performa dengan membuat permintaan yang tidak perlu untuk resource yang tidak digunakan. Dalam aplikasi ini, details.css adalah file CSS lain yang terletak di root project, tetapi digunakan untuk /details route terpisah. Untuk menunjukkan contoh cara pramuat dapat digunakan secara salah, tambahkan petunjuk pramuat untuk resource ini juga.

<head>
  <!-- ... -->
  <link rel="preload" href="main.css" as="style">
  <link rel="preload" href="details.css" as="style">
</head>

Muat ulang aplikasi dan lihat panel Jaringan. Permintaan dibuat untuk mengambil details.css meskipun tidak digunakan oleh halaman web.

Panel jaringan dengan pramuat yang tidak perlu

Chrome menampilkan peringatan di panel Konsol saat resource yang dipramuat tidak digunakan oleh halaman dalam beberapa detik setelah dimuat.

Peringatan pramuat di konsol

Gunakan peringatan ini sebagai indikator untuk mengidentifikasi apakah Anda memiliki resource yang dimuat sebelumnya yang tidak langsung digunakan oleh halaman web Anda. Sekarang Anda dapat menghapus link pramuat yang tidak diperlukan untuk halaman ini.

<head>
  <!-- ... -->
  <link rel="preload" href="main.css" as="style">
  <link rel="preload" href="details.css" as="style">
</head>

Untuk mengetahui daftar semua jenis resource yang dapat diambil beserta nilai yang benar yang harus digunakan untuk atribut as, lihat artikel MDN tentang Pemuatan Awal.

Mengambil resource mendatang

Pengambilan data adalah petunjuk browser lain yang dapat digunakan untuk membuat permintaan aset yang digunakan untuk rute navigasi yang berbeda, tetapi dengan prioritas yang lebih rendah daripada aset penting lainnya yang diperlukan untuk halaman saat ini.

Di situs ini, mengklik gambar akan mengarahkan Anda ke rute details/ terpisah.

Rute detail

File CSS terpisah, details.css, berisi semua gaya yang diperlukan untuk halaman sederhana ini. Tambahkan elemen link ke index.html untuk melakukan pengambilan data sebelumnya pada resource ini.

<head>
  <!-- ... -->
  <link rel="prefetch" href="details.css">
</head>

Untuk memahami cara memicu permintaan file, buka panel Jaringan di DevTools dan hapus centang pada opsi Nonaktifkan cache.

Menonaktifkan cache di Chrome DevTools

Muat ulang aplikasi dan perhatikan bagaimana permintaan prioritas sangat rendah dibuat untuk details.css setelah semua file lainnya diambil.

Panel jaringan dengan resource yang diambil sebelumnya

Dengan DevTools terbuka, klik gambar di situs untuk membuka halaman details. Karena elemen link digunakan di details.html untuk mengambil details.css, permintaan dibuat untuk resource seperti yang diharapkan.

Permintaan jaringan halaman detail

Klik permintaan jaringan details.css di DevTools untuk melihat detailnya. Anda akan melihat bahwa file diambil dari cache disk browser.

Permintaan detail diambil dari cache disk

Dengan memanfaatkan waktu tidak ada aktivitas browser, pengambilan data membuat permintaan awal untuk resource yang diperlukan untuk halaman lain. Hal ini mempercepat permintaan navigasi mendatang dengan memungkinkan browser menyimpan aset lebih awal ke dalam cache dan menayangkannya dari cache saat diperlukan.

Pramuat dan pengambilan data dengan webpack

Postingan Mengurangi payload JavaScript dengan pemisahan kode mempelajari penggunaan impor dinamis untuk membagi paket menjadi beberapa bagian. Hal ini ditunjukkan dengan aplikasi sederhana yang secara dinamis mengimpor modul dari Lodash saat formulir dikirim.

Aplikasi Magic Sorter yang menunjukkan pemisahan kode

Anda dapat mengakses Glitch untuk aplikasi ini di sini.

Blok kode berikut, yang berada di src/index.js,, bertanggung jawab untuk mengimpor metode secara dinamis saat tombol diklik.

form.addEventListener("submit", e => {
  e.preventDefault()
  import('lodash.sortby')
    .then(module => module.default)
    .then(sortInput())
    .catch(err => { alert(err) });
});

Memisahkan paket akan meningkatkan waktu pemuatan halaman dengan mengurangi ukuran awalnya. Webpack versi 4.6.0 menyediakan dukungan untuk memuat atau mem-prefetch bagian yang diimpor secara dinamis. Dengan menggunakan aplikasi ini sebagai contoh, metode lodash dapat diambil sebelumnya pada waktu tidak ada aktivitas browser; saat pengguna menekan tombol, tidak ada penundaan untuk mengambil resource.

Gunakan parameter komentar webpackPrefetch tertentu dalam impor dinamis untuk melakukan pengambilan data sebelumnya pada bagian tertentu. Berikut adalah tampilannya dengan aplikasi tertentu ini.

form.addEventListener("submit", e => {
  e.preventDefault()
  import(/* webpackPrefetch: true */ 'lodash.sortby')
    .then(module => module.default)
    .then(sortInput())
    .catch(err => { alert(err) });
});

Setelah aplikasi dimuat ulang, webpack akan memasukkan tag pengambilan data untuk resource ke bagian header dokumen. Hal ini dapat dilihat di panel Elemen di DevTools.

Panel elemen dengan tag pengambilan data sebelumnya

Mengamati permintaan di panel Jaringan juga menunjukkan bahwa bagian ini diambil dengan prioritas rendah setelah semua resource lainnya diminta.

Panel jaringan dengan permintaan yang diambil sebelumnya

Meskipun pengambilan data lebih sesuai untuk kasus penggunaan ini, webpack juga menyediakan dukungan untuk memuat ulang bagian yang diimpor secara dinamis.

import(/* webpackPreload: true */ 'module')

Kesimpulan

Dengan codelab ini, Anda akan memiliki pemahaman yang kuat tentang bagaimana melakukan pramuat atau pramuat aset tertentu dapat meningkatkan pengalaman pengguna situs Anda. Perlu disebutkan bahwa teknik ini tidak boleh digunakan untuk setiap resource dan penggunaan yang salah dapat membahayakan performa. Hasil terbaik akan terlihat hanya dengan melakukan pramuat atau pra-ambil secara selektif.

Ringkasnya:

  • Gunakan pramuat untuk resource yang ditemukan terlambat, tetapi penting untuk halaman saat ini.
  • Gunakan pengambilan data untuk resource yang diperlukan untuk rute navigasi atau tindakan pengguna di masa mendatang.

Saat ini, tidak semua browser mendukung pramuat dan praambil. Artinya, tidak semua pengguna aplikasi Anda mungkin melihat peningkatan performa.

Jika Anda ingin mengetahui informasi selengkapnya tentang aspek tertentu dari pengaruh pramuat dan pramuat terhadap halaman web Anda, lihat artikel berikut: