Dalam codelab ini, performa halaman web berikut ditingkatkan dengan melakukan pramuat dan pengambilan data beberapa resource:
Ukur
Pertama, ukur 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 live Glitch Anda (lihat juga Menemukan 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 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 level ketiga rantai permintaan, Lighthouse telah mengidentifikasinya sebagai resource yang baru ditemukan.
Pramuat resource penting
File main.css adalah aset penting yang 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.
Perhatikan bagaimana browser mengambil file CSS sebelum JavaScript yang bertanggung jawab untuk mengambilnya selesai diuraikan. Dengan pramuat, browser akan mengetahui cara melakukan pengambilan preemptive untuk resource dengan asumsi bahwa hal 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 bagaimana pramuat dapat digunakan dengan tidak benar, 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.
Chrome menampilkan peringatan di panel Konsol saat 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 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.
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.
Muat ulang aplikasi dan perhatikan bagaimana permintaan berprioritas sangat rendah dibuat untuk
details.css setelah semua file lain 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 tidak ada aktivitas browser, pengambilan data membuat permintaan awal untuk resource yang diperlukan untuk halaman lain. Hal ini akan mempercepat permintaan navigasi di masa mendatang dengan memungkinkan browser meng-cache aset lebih cepat dan menayangkannya dari cache jika 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.
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 melakukan pramuat atau
pengambilan data 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 melakukan pengambilan data sebelumnya pada bagian 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 header dokumen. Ini dapat dilihat di panel Elemen di DevTools.
Mengamati permintaan di panel Jaringan juga menunjukkan bahwa bagian ini diambil dengan prioritas rendah setelah semua resource lainnya diminta.
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 pra-ambil 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 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 praambil. Artinya, tidak semua pengguna aplikasi Anda mungkin melihat peningkatan performa.
Jika Anda ingin informasi selengkapnya tentang aspek tertentu tentang pengaruh pramuat dan pengambilan data terhadap halaman web Anda, lihat artikel berikut: