Halaman ini diterjemahkan oleh Cloud Translation API.

Codelab: Pramuat aset penting untuk meningkatkan kecepatan pemuatan

Houssein Djirdeh

Dalam codelab ini, performa halaman web berikut ditingkatkan dengan melakukan pramuat dan pengambilan data beberapa resource:

Screenshot Aplikasi

Ukur

Pertama, ukur performa situs sebelum menambahkan pengoptimalan apa pun.

Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Lalu tekan Layar Penuh .

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

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

Lighthouse: Pramuat audit permintaan kunci

Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
Klik tab Network

Panel jaringan dengan resource yang terakhir ditemukan

File main.css tidak diambil oleh elemen Link (<link>) yang ditempatkan di 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 menunjukkan urutan resource yang diprioritaskan dan diambil oleh browser. Untuk halaman web ini, tampilannya saat ini terlihat seperti ini:

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

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

Pramuat resource penting

File main.css adalah aset penting yang segera diperlukan setelah halaman dimuat. Untuk file penting seperti resource ini yang diambil terlambat dalam aplikasi Anda, gunakan tag pramuat link untuk memberi tahu browser agar mendownloadnya lebih cepat dengan menambahkan elemen Link ke bagian head 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 sedang diambil, dan as="style" digunakan untuk melakukan pramuat file stylesheet.

Muat ulang aplikasi dan lihat panel Network di DevTools.

Perhatikan cara browser mengambil file CSS sebelum JavaScript yang bertanggung jawab untuk mengambilnya bahkan telah selesai diuraikan. Dengan pramuat, browser dapat melakukan pengambilan preemtif untuk resource dengan asumsi bahwa pengambilan tersebut penting untuk halaman web.

Catatan: Jika ini adalah aplikasi produksi sebenarnya, akan lebih masuk akal jika Anda cukup menempatkan elemen <link> di index.html untuk mengambil file CSS, daripada menggunakan JavaScript untuk menambahkannya. Browser tahu cara mengambil file CSS yang ditentukan di bagian kepala dokumen HTML dengan prioritas tinggi sesegera mungkin. Namun, pramuat digunakan dalam codelab ini untuk mendemonstrasikan tindakan terbaik untuk file yang diambil di akhir rantai permintaan. Untuk aplikasi besar, hal ini bisa sering terjadi.

Jika tidak digunakan dengan benar, pramuat dapat mengganggu 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 bagaimana pramuat dapat digunakan dengan tidak benar, tambahkan petunjuk pramuat untuk resource ini.

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

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

Panel jaringan dengan pramuat yang tidak perlu

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

Gunakan peringatan ini sebagai indikator untuk mengidentifikasi apakah Anda memiliki resource bawaan 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 dan harus digunakan untuk atribut as, lihat artikel MDN tentang Pramuat.

Catatan: Resource lintas origin juga dapat dipramuat menggunakan atribut crossorigin. Selain itu, resource font origin yang sama harus diambil menggunakan CORS mode anonim, itulah sebabnya atribut crossorigin juga digunakan dalam tag pramuat ini. Panduan Cross Origin Resource Sharing menjelaskan topik permintaan dengan origin yang sama dan lintas origin secara lebih mendetail.

Ambil 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 lebih rendah daripada aset penting lain yang diperlukan untuk halaman saat ini.

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

Rute detail

File CSS yang terpisah, details.css, berisi semua gaya yang dibutuhkan untuk halaman sederhana ini. Tambahkan elemen link ke index.html untuk mengambil data resource ini.

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

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

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

Panel jaringan dengan resource pengambilan data

Saat 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.

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

Permintaan detail diambil dari cache disk

Dengan memanfaatkan waktu tidak ada aktivitas browser, pengambilan data akan membuat permintaan awal untuk resource yang diperlukan untuk halaman yang berbeda. Hal ini akan mempercepat permintaan navigasi di masa mendatang dengan memungkinkan browser menyimpan aset dalam cache lebih cepat dan menayangkannya dari cache jika diperlukan.

Melakukan 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 dikirimkan.

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 mempercepat waktu pemuatan halaman dengan mengurangi ukuran awalnya. Webpack versi 4.6.0 memberikan dukungan untuk melakukan pramuat atau pengambilan data potongan yang diimpor secara dinamis. Dengan menggunakan aplikasi ini sebagai contoh, metode lodash dapat mengambil data pada waktu tidak ada aktivitas browser; saat pengguna menekan tombol, tidak ada penundaan untuk pengambilan resource.

Gunakan parameter komentar webpackPrefetch tertentu dalam impor dinamis untuk mengambil data potongan tertentu. Berikut adalah tampilannya dengan aplikasi khusus 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 head dokumen. Hal ini dapat dilihat di panel Elements di DevTools.

Panel elemen dengan tag pengambilan data

Mengamati permintaan di panel Network juga akan menunjukkan bahwa potongan ini diambil dengan prioritas rendah setelah semua resource lain diminta.

Panel jaringan dengan permintaan pengambilan data

Meskipun pengambilan data lebih masuk akal untuk kasus penggunaan ini, webpack juga menyediakan dukungan untuk melakukan pramuat bagian yang diimpor secara dinamis.

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

Kesimpulan

Dengan codelab ini, Anda harus memiliki pemahaman yang kuat tentang bagaimana pramuat atau pengambilan data aset tertentu dapat meningkatkan pengalaman pengguna di situs Anda. Penting untuk diketahui bahwa teknik ini sebaiknya tidak digunakan untuk setiap resource, dan penggunaannya yang tidak tepat dapat mengganggu performa. Hasil terbaik dapat dilihat dengan hanya melakukan pramuat atau pengambilan data secara selektif.

Ringkasnya:

Gunakan pramuat untuk resource yang terlambat ditemukan, tetapi sangat 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 pengambilan data. Artinya, tidak semua pengguna aplikasi Anda mungkin melihat peningkatan performa.

Jika Anda ingin mengetahui informasi selengkapnya tentang aspek tertentu terkait pengaruh pramuat dan pengambilan data pada halaman web Anda, lihat artikel ini: