Pemuatan Malas iframe
Tunda pemuatan iframe di luar layar dengan loading=lazy.
Pemuatan Malas iframe adalah pelajaran HTML Academy gratis di CoddyKit. Ini adalah pelajaran 4 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.
Apa Itu Pemuatan Tertunda?
Pemuatan tertunda menunda pemuatan sumber daya sampai diperlukan—saat elemen berada dekat atau di dalam area pandang. Untuk iframe, ini berarti dokumen yang disematkan, skripnya, CSS, dan asetnya tidak diunduh sampai pengguna menggulir mendekati iframe.
Atribut loading
Tambahkan loading="lazy" ke iframe: <iframe src="embed.html" loading="lazy">. Peramban menentukan kapan mulai memuat berdasarkan heuristiknya sendiri (biasanya 1000-2500px sebelum iframe memasuki area pandang). Tidak diperlukan JavaScript.
Dampak Performa
Iframe dapat memuat sumber daya yang besar (YouTube memuat sekitar 500KB JavaScript). Pemuatan tertunda pada penyematan video di bawah area tampilan awal mengurangi pemuatan awal halaman sebesar jumlah tersebut—secara langsung meningkatkan LCP dan Waktu hingga Interaktif untuk konten di atas area tampilan awal.
loading="eager"
loading="eager" memuat iframe segera tanpa memedulikan posisinya. Ini adalah perilaku bawaan. Menambahkan eager secara eksplisit berguna dalam konteks yang secara bawaan menggunakan pemuatan tertunda (seperti kerangka kerja yang menambahkan pemuatan tertunda secara global) ketika iframe tertentu harus segera dimuat.
Alternatif IntersectionObserver
Untuk logika pemuatan tertunda yang kompleks (memuat saat diklik, memuat berdasarkan kualitas koneksi), gunakan IntersectionObserver: observe wadah iframe, tetapkan src hanya saat wadah memasuki area pandang. Ini memberi kendali penuh atas kapan dan apakah iframe dimuat.
const observer = new IntersectionObserver(entries => {
if (entries[0].isIntersecting) {
iframe.src = iframe.dataset.src;
observer.disconnect();
}
});
observer.observe(iframe);Pola Fasad
Tampilkan gambar mini statis, bukan iframe, secara bawaan. Tambahkan tombol putar di atasnya. Saat diklik, ganti gambar mini dengan iframe sebenarnya. Pola fasad YouTube: tampilkan gambar mini video, muat iframe hanya saat pengguna mengeklik putar—menghemat biaya pemuatan penyematan YouTube secara keseluruhan.
Pola Klik untuk Memuat
Untuk penyematan sosial (linimasa Twitter, kiriman Instagram) yang memuat banyak JavaScript: tampilkan tombol "Muat komentar". Saat diklik, masukkan iframe. Pengguna yang tidak berinteraksi tidak pernah menanggung biaya pemuatan. Ini adalah peningkatan progresif untuk konten sosial yang disematkan.
Dukungan Peramban
loading="lazy" untuk iframe didukung di Chrome 77+ dan Firefox 121+. Safari tidak mendukung pemuatan tertunda untuk iframe (per 2024). Untuk pemuatan tertunda lintas peramban, gunakan IntersectionObserver sebagai cadangan yang andal—cara ini berfungsi di semua peramban modern.
Mencegah CLS
Sediakan ruang untuk iframe yang dimuat tertunda dengan CSS width, height, dan aspect-ratio eksplisit guna mencegah Pergeseran Tata Letak Kumulatif (CLS). Saat iframe dimuat dan menjadi terlihat, ruangnya sudah dialokasikan—tidak ada konten di sekitarnya yang bergeser untuk menyesuaikan.
Pelacakan Analitik
Iframe yang dimuat tertunda dapat memengaruhi analitik: jika iframe untuk piksel pelacakan atau penyematan analitik dimuat tertunda, iframe itu mungkin tidak dijalankan bagi pengguna yang tidak menggulir ke arahnya. Pastikan iframe analitik penting dan pelacakan konversi dimuat segera atau berada di atas area tampilan awal.
Menggabungkan Pemuatan Tertunda dan sandbox
Gunakan pemuatan tertunda dan sandbox bersama-sama: <iframe src="embed.html" loading="lazy" sandbox="allow-scripts">. Kedua atribut bekerja secara independen—pemuatan tertunda mengontrol kapan, sedangkan sandbox mengontrol apa yang dapat dilakukan iframe. Gabungkan keduanya untuk penyematan pihak ketiga yang efisien dan aman.
Uji Pengetahuan
Apa pola fasad untuk pemuatan lambat bingkai tersemat?
Ringkasan
Pemuatan lambat bingkai tersemat dengan loading="lazy" menunda pemuatan sumber daya hingga mendekati area pandang—secara signifikan mengurangi pemuatan awal halaman untuk sematan berat. Pola fasad dan pemuatan melalui klik memperluas pendekatan ini dengan hanya memuat bingkai tersemat saat pengguna berinteraksi. IntersectionObserver menyediakan kendali lintas-browser untuk skenario pemuatan lambat yang kompleks. Tetapkan dimensi bingkai tersemat untuk mencegah CLS.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Pemuatan Malas iframe” gratis?
Ya — teks lengkap “Pemuatan Malas iframe” 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 “Pemuatan Malas iframe”?
Tunda pemuatan iframe di luar layar dengan loading=lazy. 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 4 dari 4.
Berapa lama pelajaran “Pemuatan Malas iframe” 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
- Elemen iframe src dan sandbox
- Keamanan iframe Clickjacking dan X-Frame-Options
- Elemen embed dan object
- Pemuatan Malas iframe