Bagian Peluang pada laporan Lighthouse Anda menandai permintaan tingkat ketiga dalam rantai permintaan penting Anda sebagai kandidat pramuat:
Cara flag Lighthouse menentukan kandidat pramuat
Misalnya, rantai permintaan penting halaman Anda terlihat seperti ini:
index.html |--app.js |--styles.css |--ui.js
File index.html
Anda mendeklarasikan <script src="app.js">
. Saat berjalan , app.js
akan memanggil
fetch()
untuk mendownload styles.css
dan ui.js
. Halaman tidak akan selesai
hingga 2 resource terakhir tersebut didownload, diurai, dan dieksekusi.
Dengan menggunakan contoh di atas, Lighthouse akan menandai styles.css
dan ui.js
sebagai kandidat.
Potensi penghematan didasarkan pada seberapa cepat browser dapat memulai permintaan jika Anda mendeklarasikan link pramuat.
Misalnya, jika app.js
membutuhkan waktu 200 md untuk mendownload, mengurai, dan mengeksekusi,
potensi penghematan untuk setiap resource adalah 200 md karena app.js
tidak lagi menjadi bottleneck untuk setiap permintaan.
Permintaan pramuat dapat membuat halaman Anda dimuat lebih cepat.
Masalah yang ada di sini adalah browser hanya mengetahui
2 resource terakhir tersebut setelah mendownload, mengurai, dan mengeksekusi app.js
.
Tetapi Anda tahu bahwa resource tersebut penting
dan harus didownload sesegera mungkin.
Mendeklarasikan link pramuat Anda
Deklarasikan link pramuat di HTML Anda untuk memerintahkan browser agar mendownload resource utama sesegera mungkin.
<head>
...
<link rel="preload" href="styles.css" as="style" />
<link rel="preload" href="ui.js" as="script" />
...
</head>
Lihat juga Melakukan pramuat aset penting untuk meningkatkan kecepatan pemuatan guna mendapatkan panduan selengkapnya.
Kompatibilitas browser
Mulai Juni 2020, pramuat didukung di browser berbasis Chromium. Lihat Kompatibilitas browser untuk mengetahui update.
Membangun dukungan alat untuk pramuat
Lihat halaman Aset Pramuat di Tooling.Report.
Panduan khusus stack
Angular
Pramuat rute terlebih dahulu untuk mempercepat navigasi.
Magento
Ubah tata letak tema
dan tambahkan tag <link rel=preload>
.