What Is Lazy Loading?
Lazy loading is a technique that delays loading non-critical resources, most often images and videos, until they are about to appear on screen as the visitor scrolls. Instead of downloading everything upfront, the browser fetches assets just in time. This reduces initial page weight, speeds up the first paint, and saves bandwidth, which especially helps image-heavy pages and mobile visitors. Modern browsers support it natively with a simple loading attribute.
- Native syntax
- loading="lazy" attribute on img and iframe (HTML standard)
- Best used for
- Below-the-fold images, videos, and iframes (industry-typical)
- Never lazy-load
- The LCP hero image or above-the-fold content (web.dev)
- Main benefit
- Smaller initial payload and faster first render (industry-typical)
How does lazy loading work? #
Lazy loading changes when assets are downloaded rather than whether they are downloaded. Normally, when a browser parses a page, it immediately requests every image, video, and iframe it finds, even the ones far down the page a visitor may never reach. Lazy loading defers those requests: the browser only fetches an off-screen asset when the visitor scrolls close enough that it is about to enter the viewport. Historically this required JavaScript that watched scroll position or used the Intersection Observer API to detect when elements neared the screen. Today, browsers support it natively through a simple loading="lazy" attribute, so no custom code is needed for basic cases. The result is that the page loads only what is visible first, then streams in the rest as needed. For a restaurant menu with dozens of dish photos or a gallery on a landscaper's site, this can cut the initial download by megabytes. We implement it as standard practice in /services/web-design and tune it further in /services/speed-optimization for the best loading metrics.
What are the benefits of lazy loading? #
The primary benefit is a lighter initial page load. By skipping off-screen assets, the browser downloads far less data before showing the first screen, which speeds up the first meaningful paint and improves how quickly the page feels usable. This matters most on image-heavy pages and on mobile, where bandwidth and processing power are limited. Lazy loading also saves bandwidth for both the visitor and your server, because assets a user never scrolls to are never downloaded at all, cutting data costs and origin load. It reduces contention for the network, letting critical resources like the hero image and stylesheets arrive faster since they are not competing with a dozen below-the-fold photos. On long pages this can meaningfully improve Largest Contentful Paint by prioritizing what is actually visible. For local businesses with photo galleries, portfolios, or long service pages, these gains are substantial. See how it fits the wider strategy in /wiki/website-speed-guide, and how we measure the impact with /tools/website-grader.
Native lazy loading versus JavaScript #
There are two ways to implement lazy loading, and the modern approach is far simpler. Native lazy loading uses the browser's built-in loading="lazy" attribute on image and iframe elements. It requires no libraries, works in all current major browsers, and the browser intelligently decides when to fetch each asset based on scroll position and connection speed. This is now the recommended default for most sites. JavaScript-based lazy loading predates native support and uses scripts, typically the Intersection Observer API, to watch elements and swap in real image sources as they approach the viewport. It offers finer control and can lazy-load background images and other elements the native attribute does not cover, but it adds code, can conflict with other scripts, and may cause problems if JavaScript fails to load. For most local business sites, native lazy loading handles the job cleanly. We reach for JavaScript approaches only for complex galleries or background images. Our /services/wordpress-development and /services/web-app-development teams choose the right method per project.
<!-- Hero image: load eagerly, it is the LCP element -->
<img src="/img/hero.webp" alt="Team at work" width="1200" height="600">
<!-- Below-the-fold gallery images: lazy load -->
<img src="/img/gallery-1.webp" alt="Finished patio"
loading="lazy" width="800" height="600">
<img src="/img/gallery-2.webp" alt="New driveway"
loading="lazy" width="800" height="600">
<!-- Embedded map: lazy load the iframe -->
<iframe src="https://maps.example.com/embed"
loading="lazy" width="600" height="400"></iframe>What should you never lazy-load? #
The single most important rule is never lazy-load your Largest Contentful Paint element or anything visible above the fold. Lazy loading an image the visitor sees immediately delays its download, which pushes back the first paint and hurts LCP, the opposite of your goal. This mistake is common when a plugin lazy-loads every image indiscriminately, including the hero banner. Always load above-the-fold images eagerly, either by omitting the lazy attribute or explicitly marking them to load immediately. You should also avoid lazy-loading critical logos and anything essential to the first impression. For the LCP image specifically, the best practice is to load it as early as possible, sometimes with a preload hint to speed it up further. Everything below the fold, images, videos, and embedded maps or players, is a good candidate for lazy loading. Getting this boundary right is the difference between lazy loading helping and hurting your scores. Our /services/speed-optimization audits catch over-aggressive lazy loading, a frequent issue we find in /services/website-rescue projects.
Lazy loading and layout shift #
Lazy loading interacts with Cumulative Layout Shift (CLS), and done carelessly it can cause problems. When an image loads late, if the browser does not know its dimensions, the surrounding content jumps to make room as it appears, creating a jarring layout shift. This hurts CLS, one of the three Core Web Vitals. The fix is simple: always specify width and height attributes on images, or use CSS aspect-ratio, so the browser reserves the correct space before the image arrives. With reserved space, the image fades in without moving anything, keeping CLS low. This is why lazy loading and dimension attributes go hand in hand; you should never do one without the other. On WordPress and page builders, ensure your theme outputs image dimensions, which most modern ones do. For videos and embeds, wrap them in a container with a fixed aspect ratio. We enforce this pattern in every /services/web-design build so lazy loading improves speed without sacrificing visual stability. Learn more about stability in /wiki/website-speed-guide.
Lazy loading videos and iframes #
Images are not the only heavy assets that benefit from lazy loading; videos and embedded iframes are often even larger. A single embedded video player or map can pull in hundreds of kilobytes of scripts and assets before the visitor ever interacts with it. The native loading="lazy" attribute works on iframes, so embedded maps, video players, and third-party widgets can be deferred until they scroll into view. For self-hosted videos, you can set the preload behavior so the browser fetches only metadata until the user presses play. A popular pattern for embedded video is the facade technique: show a lightweight thumbnail image first and only load the full player when the visitor clicks, saving significant weight on pages that embed content most visitors never play. This is especially valuable for local businesses embedding a promotional video or a Google Map on every page. We implement these patterns in /services/speed-optimization and /services/web-design, ensuring embeds never drag down the initial load. Third-party embeds are among the heaviest offenders, so deferring them is high-impact.
Common lazy loading mistakes #
Several mistakes turn lazy loading from a benefit into a liability. The most damaging is lazy-loading above-the-fold and LCP images, which delays the first paint. Another is omitting image dimensions, causing layout shift as deferred images pop in. Over-lazy-loading everything, including tiny icons and critical logos, adds overhead without meaningful benefit and can make a page feel like it loads in fits and starts. Relying solely on JavaScript lazy loading risks blank images if the script fails or is blocked. Some plugins apply lazy loading so aggressively they break sliders, print views, or images that should appear instantly. There is also a subtle SEO consideration: search engine crawlers must be able to discover lazy-loaded images, which native lazy loading handles well but poorly built JavaScript versions may not, hiding images from image search. The remedy is a considered approach: eager-load what is visible, lazy-load what is not, always set dimensions, and test on real pages. Our /services/speed-optimization and /tools/website-grader identify these missteps quickly.
How do you add lazy loading to your site? #
Adding lazy loading is easier than ever. On a hand-coded or custom site, add loading="lazy" to below-the-fold image and iframe tags and leave above-the-fold images eager, always including width and height. On WordPress, native lazy loading has been applied automatically to images since version 5.5, though you should confirm your theme is not lazy-loading the hero and that dimensions are present; performance plugins add finer control and video facades. On page builders, check the image or module settings for a lazy-load toggle and disable it for banners. After implementing, verify with a tool: load the page, watch the network panel, and confirm off-screen images load only on scroll while the hero loads immediately. Check Core Web Vitals afterward to ensure LCP improved and CLS did not regress. For most local businesses, the cleanest path is having it configured correctly during a build or optimization pass. Our /services/wordpress-development and /services/speed-optimization services set this up properly, and /tools/website-grader confirms the gains.
FAQ
What is lazy loading in simple terms?
Lazy loading delays downloading images, videos, and other non-critical content until the visitor scrolls near it, instead of loading everything at once. This makes the first screen appear faster and saves bandwidth, since assets a visitor never reaches are never downloaded. Modern browsers support it with a simple loading="lazy" attribute.
Should I lazy-load all my images?
No. Never lazy-load images visible above the fold, especially your Largest Contentful Paint hero image, because delaying it slows the first paint and hurts Core Web Vitals. Load above-the-fold images eagerly and apply lazy loading only to content below the fold that the visitor must scroll to reach.
Does lazy loading help SEO?
Indirectly, yes. By speeding up loading and improving Core Web Vitals, lazy loading supports the page experience signals Google uses. Native lazy loading lets crawlers still discover images. Poorly built JavaScript versions can hide images from search, so use the native attribute or a well-tested implementation.
Can lazy loading cause layout shift?
It can if image dimensions are missing, because content jumps to make room as deferred images appear, hurting Cumulative Layout Shift. The fix is to always set width and height attributes or a CSS aspect-ratio so the browser reserves the correct space before the image loads. Never lazy-load without dimensions.
Is native lazy loading better than a plugin?
For most sites, native lazy loading using the browser's loading attribute is simplest and reliable, needing no extra code. Plugins add value for finer control, background images, and video facades. WordPress applies native lazy loading automatically, so a plugin is only needed for advanced cases or to prevent lazy-loading the hero.
Does lazy loading work for videos?
Yes. The native loading="lazy" attribute works on iframes, so embedded video players and maps can be deferred until they scroll into view. A facade pattern, showing a thumbnail and loading the full player only on click, saves even more weight for videos most visitors never play, which is ideal for promotional embeds.
Was this helpful?