---
title: Lazy Loading
description: "Menunda gambar dan iframe di luar layar sampai dibutuhkan. Menghemat bandwidth, tapi bisa merusak LCP kalau salah tempat."
canonical: https://penasihathosting.com/wikihosting/lazy-loading
type: wiki
locale: id
updated: 2026-10-29
author: Willya Randika
---
# Lazy Loading
## Overview
- **Summary:** Menunda gambar dan iframe di luar layar sampai dibutuhkan. Menghemat bandwidth, tapi bisa merusak LCP kalau salah tempat.
- **Author:** Willya Randika ([profile](/penulis/willya-randika))
## Article
Lazy loading menunda pemuatan gambar, iframe, atau media sampai elemen mendekati area pandang. Halaman awal jadi lebih ringan dan elemen di bawah fold tidak menghabiskan koneksi pengguna yang mungkin tidak akan menggulir.
## Atribut native
```html
```
`loading="lazy"` didukung browser modern dan tidak membutuhkan JavaScript. Tetap sertakan `width` dan `height` atau `aspect-ratio` di CSS untuk mencegah layout shift saat gambar muncul.
## Jangan pasang di semua tempat
Gambar LCP, logo utama, atau gambar pertama di atas fold sebaiknya tidak memakai lazy loading. Beri `fetchpriority="high"` supaya browser memuatnya lebih awal. Kalau elemen penting bergantung pada lazy loading, pengguna dengan koneksi lambat bisa melihat area kosong.
Gambar di carousel yang terlihat juga perlu diuji. Browser kadang menganggapnya di luar viewport sehingga gambar baru dimuat setelah digeser. Untuk pengguna tanpa JavaScript, lazy loading berbasis script tidak berjalan. Gunakan atribut native kalau memungkinkan.
## Implementasi JavaScript
Kalau elemen tidak mendukung atribut native, gunakan IntersectionObserver.
```js
const observer = new IntersectionObserver((entries) => {
for (const entry of entries) {
if (!entry.isIntersecting) continue;
const img = entry.target;
img.src = img.dataset.src;
observer.unobserve(img);
}
}, { rootMargin: "200px" });
document.querySelectorAll("img[data-src]").forEach((img) => observer.observe(img));
```
`rootMargin` membuat gambar mulai dimuat sebelum terlihat. Jangan terlalu besar, karena manfaat penghematan bandwidth jadi hilang.
## WordPress dan cache
WordPress 5.5 ke atas menambahkan `loading="lazy"` otomatis. Anda bisa mengecualikan gambar hero dengan filter `wp_lazy_loading_enabled` atau menandai gambar tertentu. Plugin optimasi sering punya opsi “skip first image”. Periksa HTML yang dihasilkan, jangan hanya percaya label opsinya.
Lazy loading mengurangi request awal, tapi gambar yang sudah dimuat tetap perlu di-cache. CDN dan [browser cache](/wikihosting/browser-cache) tetap penting.
## Yang sering terlewat
Tanpa dimensi, halaman bergeser dan CLS memburuk. Placeholder blur yang berat justru menghapus penghematan. Konten utama yang hanya muncul lewat JavaScript juga berisiko tidak terlihat oleh crawler.
Lazy loading paling efektif jika dikombinasikan dengan [optimasi gambar](/wikihosting/image-optimization) dan [CDN](/wikihosting/cdn). Ukur dampaknya ke [Core Web Vitals](/wikihosting/core-web-vitals), bukan hanya jumlah request.
## FAQ
Secara tidak langsung, kalau halaman jadi lebih cepat dan konten utama tidak disembunyikan. Google bisa merender JavaScript, tapi konten penting sebaiknya tetap ada di HTML awal.
Ya, dan sangat disarankan. Iframe video sering berat. Placeholder ringan yang diganti saat diklik bisa lebih hemat lagi.
Periksa apakah plugin atau tema menambahkan `loading="lazy"` di atas fold. Kecualikan gambar LCP dan beri `fetchpriority="high"`.
```
`loading="lazy"` didukung browser modern dan tidak membutuhkan JavaScript. Tetap sertakan `width` dan `height` atau `aspect-ratio` di CSS untuk mencegah layout shift saat gambar muncul.
## Jangan pasang di semua tempat
Gambar LCP, logo utama, atau gambar pertama di atas fold sebaiknya tidak memakai lazy loading. Beri `fetchpriority="high"` supaya browser memuatnya lebih awal. Kalau elemen penting bergantung pada lazy loading, pengguna dengan koneksi lambat bisa melihat area kosong.
Gambar di carousel yang terlihat juga perlu diuji. Browser kadang menganggapnya di luar viewport sehingga gambar baru dimuat setelah digeser. Untuk pengguna tanpa JavaScript, lazy loading berbasis script tidak berjalan. Gunakan atribut native kalau memungkinkan.
## Implementasi JavaScript
Kalau elemen tidak mendukung atribut native, gunakan IntersectionObserver.
```js
const observer = new IntersectionObserver((entries) => {
for (const entry of entries) {
if (!entry.isIntersecting) continue;
const img = entry.target;
img.src = img.dataset.src;
observer.unobserve(img);
}
}, { rootMargin: "200px" });
document.querySelectorAll("img[data-src]").forEach((img) => observer.observe(img));
```
`rootMargin` membuat gambar mulai dimuat sebelum terlihat. Jangan terlalu besar, karena manfaat penghematan bandwidth jadi hilang.
## WordPress dan cache
WordPress 5.5 ke atas menambahkan `loading="lazy"` otomatis. Anda bisa mengecualikan gambar hero dengan filter `wp_lazy_loading_enabled` atau menandai gambar tertentu. Plugin optimasi sering punya opsi “skip first image”. Periksa HTML yang dihasilkan, jangan hanya percaya label opsinya.
Lazy loading mengurangi request awal, tapi gambar yang sudah dimuat tetap perlu di-cache. CDN dan [browser cache](/wikihosting/browser-cache) tetap penting.
## Yang sering terlewat
Tanpa dimensi, halaman bergeser dan CLS memburuk. Placeholder blur yang berat justru menghapus penghematan. Konten utama yang hanya muncul lewat JavaScript juga berisiko tidak terlihat oleh crawler.
Lazy loading paling efektif jika dikombinasikan dengan [optimasi gambar](/wikihosting/image-optimization) dan [CDN](/wikihosting/cdn). Ukur dampaknya ke [Core Web Vitals](/wikihosting/core-web-vitals), bukan hanya jumlah request.
## FAQ