---
title: Lazy Loading
description: "Delay off-screen images and iframes until needed. It saves bandwidth, but can hurt LCP when applied in the wrong place."
canonical: https://penasihathosting.com/en/hosting-wiki/lazy-loading
type: wiki
locale: en
updated: 2026-10-29
author: Willya Randika
---
# Lazy Loading
## Overview
- **Summary:** Delay off-screen images and iframes until needed. It saves bandwidth, but can hurt LCP when applied in the wrong place.
- **Author:** Willya Randika ([profile](/penulis/willya-randika))
## Article
Lazy loading delays images, iframes, or media until they approach the viewport. The initial page becomes lighter, and below-the-fold elements do not consume connections from users who may never scroll.
## Native attributes
```html
```
`loading="lazy"` is supported by modern browsers and needs no JavaScript. Still include `width` and `height` or CSS `aspect-ratio` to prevent layout shift when the image appears.
## Do not apply it everywhere
The LCP image, main logo, or first above-the-fold image should not use lazy loading. Set `fetchpriority="high"` so the browser loads it earlier. If important elements depend on lazy loading, users on slow connections may see an empty area.
Visible carousel images also need testing. The browser may treat them as off-screen, so they load only after a slide change. For users without JavaScript, script-based lazy loading does not run. Use native attributes when possible.
## JavaScript implementation
When an element has no native support, use 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` starts loading before the image is visible. Do not make it too large, or the bandwidth saving disappears.
## WordPress and cache
WordPress 5.5 and newer add `loading="lazy"` automatically. You can exclude the hero image with the `wp_lazy_loading_enabled` filter or mark specific images. Optimization plugins often have a “skip first image” option. Inspect the generated HTML instead of trusting the label.
Lazy loading reduces initial requests, but images that have loaded still need caching. A CDN and [browser cache](/en/hosting-wiki/browser-cache) still matter.
## What people miss
Without dimensions, the page shifts and CLS gets worse. A heavy blur placeholder removes the savings. Primary content that appears only through JavaScript may also be invisible to crawlers.
Lazy loading is most effective with [image optimization](/en/hosting-wiki/image-optimization) and a [CDN](/en/hosting-wiki/cdn). Measure the impact on [Core Web Vitals](/en/hosting-wiki/core-web-vitals), not just the request count.
## FAQ
Indirectly, if the page gets faster and primary content is not hidden. Google can render JavaScript, but important content should still be in the initial HTML.
Yes, and it is strongly recommended. Video iframes are heavy. A lightweight placeholder that swaps on click saves even more.
Check whether a plugin or theme adds `loading="lazy"` above the fold. Exclude the LCP image and set `fetchpriority="high"`.
```
`loading="lazy"` is supported by modern browsers and needs no JavaScript. Still include `width` and `height` or CSS `aspect-ratio` to prevent layout shift when the image appears.
## Do not apply it everywhere
The LCP image, main logo, or first above-the-fold image should not use lazy loading. Set `fetchpriority="high"` so the browser loads it earlier. If important elements depend on lazy loading, users on slow connections may see an empty area.
Visible carousel images also need testing. The browser may treat them as off-screen, so they load only after a slide change. For users without JavaScript, script-based lazy loading does not run. Use native attributes when possible.
## JavaScript implementation
When an element has no native support, use 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` starts loading before the image is visible. Do not make it too large, or the bandwidth saving disappears.
## WordPress and cache
WordPress 5.5 and newer add `loading="lazy"` automatically. You can exclude the hero image with the `wp_lazy_loading_enabled` filter or mark specific images. Optimization plugins often have a “skip first image” option. Inspect the generated HTML instead of trusting the label.
Lazy loading reduces initial requests, but images that have loaded still need caching. A CDN and [browser cache](/en/hosting-wiki/browser-cache) still matter.
## What people miss
Without dimensions, the page shifts and CLS gets worse. A heavy blur placeholder removes the savings. Primary content that appears only through JavaScript may also be invisible to crawlers.
Lazy loading is most effective with [image optimization](/en/hosting-wiki/image-optimization) and a [CDN](/en/hosting-wiki/cdn). Measure the impact on [Core Web Vitals](/en/hosting-wiki/core-web-vitals), not just the request count.
## FAQ