HTML Academy · Pelajaran

Preload Prefetch dan Preconnect

Berikan petunjuk kepada peramban untuk mengambil sumber daya penting lebih awal.

Preload Prefetch dan Preconnect adalah pelajaran HTML Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar HTML Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus HTML Academy mencakup 4 pelajaran total.

Mengapa Petunjuk Sumber Daya?

Peramban modern menemukan sumber daya hanya saat mengurai HTML. Petunjuk sumber daya (atribut rel pada link di <head>) memungkinkan Anda memberi tahu peramban, "Saya akan segera membutuhkan ini", sehingga permintaan jaringan dimulai lebih awal daripada yang biasanya dimungkinkan oleh proses penemuan.

preload Memuat Sekarang

<link rel="preload" as="..." href="..."> memberi tahu peramban untuk segera mengambil sumber daya dengan prioritas yang sesuai untuk jenis as tersebut. Gunakan ini untuk aset yang pasti diperlukan halaman: gambar utama, font penting, dan JavaScript tingkat rute.

<link rel="preload" as="font" type="font/woff2" href="/inter.woff2" crossorigin>

Atribut as

Selalu atur as—atribut ini menentukan prioritas permintaan, header Accept, dan penerapan CSP. Nilai umum: "script", "style", "font", "image", "fetch". Tanpa as, peramban mengabaikan preload dan mencatat peringatan.

crossorigin untuk Font

Preload font memerlukan crossorigin meskipun font berasal dari asal yang sama. Tanpanya, peramban mengambil font dalam mode CORS untuk penggunaan sebenarnya, tetapi dalam mode anonim untuk preload, sehingga unduhan menjadi dua kali lipat—kesalahan kinerja yang umum tetapi sulit terlihat.

prefetch Memuat Nanti

<link rel="prefetch" href="..."> memberi petunjuk bahwa suatu sumber daya akan diperlukan untuk navigasi mendatang. Peramban mengambilnya dengan prioritas paling rendah selama waktu senggang, lalu menyimpannya dalam cache agar halaman berikutnya dapat ditampilkan seketika.

<link rel="prefetch" href="/next-page.html">

preconnect Mempersiapkan Koneksi

<link rel="preconnect" href="https://api.example.com"> memberi tahu peramban untuk melakukan pencarian DNS serta jabat tangan TCP dan TLS ke asal pihak ketiga sebelum permintaan pertama tiba. Gunakan ini untuk host API dan CDN yang akan diakses halaman Anda.

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

dns-prefetch adalah Kerabat yang Lebih Ringan

<link rel="dns-prefetch"> hanya melakukan pencarian DNS—lebih ringan daripada preconnect. Gunakan ini untuk banyak host pihak ketiga ketika Anda tidak dapat melakukan preconnect penuh ke masing-masing host; pasangkan preconnect dengan beberapa asal yang paling penting.

Batasi Petunjuk

Terlalu banyak preload bersaing memperebutkan bandwidth yang sama dan memperlambat halaman. Lakukan preload hanya pada sumber daya yang menghambat jalur perenderan kritis—biasanya satu gambar utama dan satu atau dua font penting. Sumber daya lainnya dapat ditemukan secara normal.

modulepreload untuk Modul ES

<link rel="modulepreload" href="/app.js"> melakukan preload bukan hanya pada berkas modul, tetapi juga pada pohon dependensinya. Hal ini menghindari efek berantai pengunduhan yang biasanya terjadi pada modul ES native, ketika setiap impor menunggu impor sebelumnya selesai diurai.

Mengukur Dampak

Gunakan kolom Pemicu pada panel Jaringan untuk memastikan bahwa sumber daya yang di-preload benar-benar diambil lebih awal, dan gunakan audit Lighthouse "Lakukan preconnect ke asal yang diperlukan" untuk menemukan peluang yang terlewat. Menghapus preload yang lambat tetapi tidak digunakan sering kali memberikan manfaat sebesar menambahkan preload yang baik.

Keunikan Setiap Petunjuk

preload mencatat peringatan di konsol jika sumber dayanya tidak digunakan dalam waktu sekitar 3 detik. prefetch dapat dibatalkan oleh peramban saat berada di bawah tekanan jaringan atau memori. Koneksi preconnect ditutup setelah sekitar 10 detik tidak aktif—gunakan untuk sumber daya yang akan segera diminta.

Pemeriksaan Pengetahuan

Apa yang dilakukan preconnect tetapi tidak dilakukan dns-prefetch?

Ringkasan

preload mengambil sumber daya penting sekarang (dengan as dan crossorigin jika diperlukan). prefetch menyimpan dalam cache sumber daya yang kemungkinan diperlukan untuk navigasi berikutnya selama waktu senggang. preconnect (TCP+TLS) dan dns-prefetch (DNS saja) mempersiapkan koneksi ke asal pihak ketiga. modulepreload memperluas preload ke pohon dependensi modul ES. Gunakan seperlunya dan lakukan pengukuran.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Preload Prefetch dan Preconnect” gratis?

Ya — teks lengkap “Preload Prefetch dan Preconnect” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus HTML Academy, upgrade ke CoddyKit PRO. Kursus HTML Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Preload Prefetch dan Preconnect”?

Berikan petunjuk kepada peramban untuk mengambil sumber daya penting lebih awal. Kamu berlatih HTML Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai HTML Academy?

Tidak diperlukan pengalaman sebelumnya. HTML Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “Preload Prefetch dan Preconnect” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran HTML Academy ini?

Ya. Setiap pelajaran HTML Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke HTML Academy