Dalam codelab ini, performa halaman web berikut ditingkatkan dengan memuat dan mengambil beberapa aset terlebih dahulu:
Ukur
Ukur terlebih dahulu performa situs sebelum menambahkan pengoptimalan apa pun.
- Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Kemudian, tekan
Layar Penuh
.
Jalankan audit performa Lighthouse (Lighthouse > Options > Performance) di versi aktif Glitch Anda (lihat juga Temukan peluang performa dengan Lighthouse).
Lighthouse menampilkan audit yang gagal berikut untuk resource yang diambil terlambat:
- Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
- Klik tab Jaringan.
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 menampilkan 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.
Memuat resource penting terlebih dahulu
File main.css adalah aset penting yang diperlukan segera setelah halaman dimuat. Untuk file penting seperti resource ini yang diambil di akhir
aplikasi Anda, gunakan tag pengambilan awal link untuk memberi tahu browser agar mendownloadnya lebih awal dengan menambahkan elemen Link ke head dokumen.
Tambahkan tag pra-muat 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 memuat file stylesheet terlebih dahulu.
Muat ulang aplikasi dan lihat panel Network di DevTools.
Perhatikan cara browser mengambil file CSS sebelum JavaScript yang bertanggung jawab untuk mengambilnya selesai diuraikan. Dengan pra-muat, browser tahu untuk melakukan pengambilan awal 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 berada di root project, tetapi digunakan untuk /details route
terpisah. Untuk menunjukkan contoh cara penggunaan pramuat yang 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 Network.
Permintaan dibuat untuk mengambil details.css meskipun tidak digunakan oleh halaman web.
Chrome menampilkan peringatan di panel Console saat resource yang telah dimuat sebelumnya tidak digunakan oleh halaman dalam beberapa detik setelah dimuat.
Gunakan peringatan ini sebagai indikator untuk mengidentifikasi apakah Anda memiliki aset 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 bersama dengan
nilai yang benar yang harus digunakan untuk atribut as, lihat
artikel MDN tentang Memuat Awal.
Melakukan pengambilan data awal resource mendatang
Prefetch 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.
File CSS terpisah, details.css, berisi semua gaya yang diperlukan untuk halaman sederhana ini. Tambahkan elemen link ke index.html untuk melakukan pengambilan awal resource ini.
<head>
<!-- ... -->
<link rel="prefetch" href="details.css">
</head>
Untuk memahami cara ini memicu permintaan file, buka panel Network di DevTools dan hapus centang pada opsi Disable cache.
Muat ulang aplikasi dan perhatikan bagaimana permintaan berprioritas sangat rendah dibuat untuk
details.css setelah semua file lainnya diambil.
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.
Klik permintaan jaringan details.css di DevTools untuk melihat detailnya. Anda akan melihat bahwa file diambil dari cache disk browser.
Dengan memanfaatkan waktu tunggu browser, pengambilan data awal membuat permintaan awal untuk resource yang diperlukan untuk halaman lain. Tindakan ini mempercepat permintaan navigasi di masa mendatang dengan memungkinkan browser menyimpan aset ke dalam cache lebih awal dan menayangkannya dari cache jika diperlukan.
Melakukan pra-loading dan pengambilan data dengan webpack
Postingan Mengurangi payload JavaScript dengan pemisahan kode menjelaskan penggunaan impor dinamis untuk memisahkan paket menjadi beberapa bagian. Hal ini ditunjukkan dengan aplikasi sederhana yang mengimpor modul dari Lodash secara dinamis saat formulir dikirimkan.
Anda dapat mengakses Glitch untuk aplikasi ini di sini.
Blok kode berikut, yang ada 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
mengambil terlebih dahulu chunk yang diimpor secara dinamis. Dengan menggunakan aplikasi ini sebagai contoh, metode lodash dapat di-prefetch saat browser dalam kondisi tidak ada aktivitas; saat pengguna menekan tombol, tidak ada penundaan untuk pengambilan resource.
Gunakan parameter komentar webpackPrefetch tertentu dalam impor dinamis untuk melakukan pengambilan awal chunk tertentu.
Berikut 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 menyuntikkan tag pengambilan data awal untuk resource ke dalam head dokumen. Hal ini dapat dilihat di panel Elemen di DevTools.
Mengamati permintaan di panel Network juga menunjukkan bahwa chunk ini diambil dengan prioritas rendah setelah semua resource lain diminta.
Meskipun pengambilan data lebih awal lebih masuk akal untuk kasus penggunaan ini, webpack juga memberikan dukungan untuk memuat lebih awal potongan yang diimpor secara dinamis.
import(/* webpackPreload: true */ 'module')
Kesimpulan
Dengan codelab ini, Anda akan memiliki pemahaman yang kuat tentang cara memuat atau mengambil aset tertentu terlebih dahulu dapat meningkatkan pengalaman pengguna situs Anda. Penting untuk disebutkan bahwa teknik ini tidak boleh digunakan untuk setiap resource dan penggunaan yang salah dapat merusak performa. Hasil terbaik hanya dapat diperoleh dengan melakukan pra-pemuatan atau pengambilan data awal secara selektif.
Ringkasnya:
- Gunakan preload untuk resource yang ditemukan terlambat, tetapi penting untuk halaman saat ini.
- Gunakan prefetch untuk resource yang diperlukan untuk rute navigasi atau tindakan pengguna mendatang.
Saat ini, tidak semua browser mendukung pramuat dan pengambilan awal. Artinya, tidak semua pengguna aplikasi Anda mungkin merasakan peningkatan performa.
Jika Anda ingin mengetahui informasi selengkapnya tentang aspek tertentu terkait pengaruh pra-pemuatan dan pengambilan awal terhadap halaman web Anda, lihat artikel berikut: