Apakah petunjuk sumber daya seperti preload, prefetch, dan preconnect?

Question

Accepted Answer

**Petunjuk sumber daya** adalah tag `` yang memberitahu penyemak imbas untuk mengambil atau menyambung ke sumber daya lebih awal, mengoptimalkan prestasi muatan. Setiap satu melayani keperluan masa / keutamaan yang berbeza. ```html ``` ## Apa yang dilakukan setiap satu - **`preload`** — "Saya memerlukan ini **untuk halaman semasa**, ambilnya sekarang dengan keutamaan tinggi." Untuk sumber daya kritikal yang ditemui oleh penghurai lewat: fon, imej hero, aset dirujuk CSS. Memerlukan `as` supaya penyemak imbas menetapkan keutamaan / pengepala yang betul. - **`preconnect`** — "Saya akan menyambung ke **asal** ini tidak lama lagi; lakukan carian DNS + TCP + handshak TLS sekarang." Jimat perjalanan bulat sebelum permintaan pertama ke pihak ketiga (API, hos fon, CDN). Gunakan untuk beberapa asal kritikal. - **`dns-prefetch`** — versi lebih ringan daripada preconnect: hanya resolusi DNS. Fallback yang baik / untuk banyak asal. - **`prefetch`** — "Saya **mungkin** memerlukan ini untuk navigasi **berikutnya**; ambilnya dengan keutamaan rendah apabila terbiar." Untuk halaman / aset yang mungkin seterusnya. Disimpan dalam cache untuk masa depan, bukan untuk halaman semasa. ## Contoh sebenar biasa: fon ```html ``` Fon ditemui lewat (penyemak imbas mesti menghurai CSS lebih dahulu), jadi memuatnya terlebih dahulu mengelakkan kelewatan teks tak nampak. ## Amaran: jangan petunjuk berlebihan Memuatkan semuanya terlebih dahulu membatalkan tujuan — ia bersaing dengan sumber daya benar-benar kritikal untuk jalur lebar. Petunjuk hanya untuk beberapa yang paling penting. ## Mengapa penting Petunjuk sumber daya mengurangkan latensi laluan kritikal: `preconnect` menghilangkan kelewatan handshak untuk pihak ketiga, `preload` mengutamakan aset kritikal yang ditemui lewat (fon, imej LCP), dan `prefetch` membuat navigasi *berikutnya* terasa serta-merta. Digunakan dengan bijak, ia meningkatkan Core Web Vitals secara bermakna.