Pramuat permintaan utama

Bagian Peluang pada laporan Lighthouse Anda menandai permintaan tingkat ketiga dalam rantai permintaan penting Anda sebagai kandidat pramuat:

Screenshot audit permintaan kunci Lighthouse Preload

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.

Tanpa link pramuat, styles.css dan ui.js hanya diminta setelah app.js didownload, diurai, dan dieksekusi.
Tanpa link pramuat, styles.css dan ui.js hanya diminta setelah app.js didownload, diurai, dan dieksekusi.

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.

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>
Dengan link pramuat, styles.css dan ui.js diminta secara bersamaan dengan app.js.
Dengan link pramuat, styles.css dan ui.js diminta bersamaan dengan app.js.

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

Referensi