Lazy loading is a technique that defers loading of images and other resources until they are needed. Instead of loading all images at once, the browser loads only those in the viewport and loads the rest as the user scrolls. This improves page speed, reduces initial load time, and improves Core Web Vitals. In this guide, you will learn what lazy loading is, why it matters, how to check if it is enabled, and how to fix issues.
What is lazy loading
Lazy loading is a technique where resources (images, iframes, videos) are loaded only when they are about to enter the viewport. Instead of loading everything upfront, the browser waits until the user scrolls near the element.
In HTML, lazy loading is implemented via the loading attribute:
<img src="image.jpg" loading="lazy" alt="...">
The loading attribute has two values:
lazy. The browser defers loading until the element is near the viewport.
eager. The browser loads the element immediately, regardless of position.
By default, images load eagerly. Adding loading="lazy" tells the browser to defer loading.
Check lazy loading via the lazy loading checker.
Why lazy loading matters
Three reasons.
1. Faster initial load. Images below the fold are not loaded until the user scrolls. This reduces initial page weight and speeds up the first render.
2. Better Core Web Vitals. Lazy loading improves LCP (Largest Contentful Paint) because the browser does not compete for bandwidth with off-screen images. It also improves INP by reducing main-thread work.
3. Lower bandwidth usage. Users who do not scroll to the bottom of the page never load those images. This saves bandwidth, especially on mobile.
Lazy loading is recommended for images below the fold. It should not be used for images in the viewport — those should load eagerly to avoid delaying LCP.
How to check lazy loading
Three ways.
Method 1. Lazy loading checker tool
The fastest way is to use an online lazy loading checker. The SerpMax lazy loading checker tests any URL and shows:
— which images use loading="lazy";
— which images do not;
— which images should not use lazy loading (above the fold);
— recommendations for fixing issues.
The tool works with any website.
Method 2. View page source
Open the page, right-click, and select "View page source". Search for loading=. Look for loading="lazy" and loading="eager" in image tags.
If most images do not have the loading attribute, lazy loading is not enabled.
Method 3. Chrome DevTools
Open Chrome DevTools (F12). Go to the Network tab. Filter by "Img". Reload the page.
Images below the fold that are not loaded initially are lazy loaded. If all images load at once, lazy loading is not working.
Common lazy loading issues
Five common problems.
1. Lazy loading is not enabled
The most common issue. Images do not have the loading attribute. All images load at once, slowing down the page.
How to fix: Add loading="lazy" to all images below the fold. For CMS, enable lazy loading in settings or install a plugin.
2. Lazy loading is applied to above-the-fold images
If you apply lazy loading to the main image in the viewport, it delays LCP. The browser waits to load the image until it enters the viewport — but it is already in the viewport.
How to fix: Use loading="eager" or remove the loading attribute for images in the viewport. Add fetchpriority="high" for the main LCP image.
3. JavaScript-based lazy loading without fallback
Some sites use JavaScript libraries for lazy loading. If JavaScript fails or is disabled, images may not load at all.
How to fix: Use native loading="lazy" instead of JavaScript libraries. It is supported by all modern browsers and does not require JavaScript.
4. Lazy loading not working with CMS
Some CMS do not apply lazy loading to images by default. Or the setting is buried in the configuration.
How to fix: For WordPress, use a lazy loading plugin or enable it in the theme. For other CMS, check the settings or add the attribute manually.
5. Lazy loading for iframes and videos
Lazy loading is not just for images. Iframes and videos can also be lazy loaded. If not, they add weight to the page.
How to fix: Add loading="lazy" to iframes. For videos, use preload="none" or preload="metadata".
How to enable lazy loading
Three ways.
1. Native HTML
Add loading="lazy" to images and iframes below the fold:
<img src="image.jpg" loading="lazy" alt="...">
This is the simplest and most reliable way. It works in all modern browsers without JavaScript.
2. CMS settings
Most CMS support lazy loading out of the box:
— WordPress: WordPress 5.5+ applies native lazy loading by default;
— 1C-Bitrix: enable lazy loading in performance settings;
— Joomla: use a lazy loading plugin;
— Tilda: enable lazy loading in site settings.
3. Plugins and libraries
If native lazy loading is not available, use a plugin or library. But prefer native — it is simpler and more reliable.
Lazy loading and Core Web Vitals
Lazy loading affects two Core Web Vitals.
LCP (Largest Contentful Paint). Lazy loading improves LCP by deferring off-screen images, freeing bandwidth for the LCP element. But if applied to the LCP image itself, it delays LCP.
INP (Interaction to Next Paint). Lazy loading reduces main-thread work by loading fewer resources upfront. This can improve INP, especially on mobile.
Best practice: use lazy loading for images below the fold, and eager loading for the LCP image. Add fetchpriority="high" to the LCP image to prioritize it.
How to check lazy loading across your site
Checking every page manually is slow. For a site with many pages, use the SEO Audit by SerpMax. The tool crawls all pages and shows:
— pages with images without lazy loading;
— pages with lazy loading applied incorrectly;
— recommendations for fixing issues.
This gives you a complete list of issues in one report.
How often to check lazy loading
Recommended frequency:
— Before publishing new pages with many images — check manually.
— After a redesign or CMS migration — lazy loading settings are often lost.
— Once a month — run a full site audit via SEO Audit by SerpMax.
— If you notice slower page loads — check lazy loading immediately.
Frequently Asked Questions
What is lazy loading?
Lazy loading is a technique that defers loading of images and other resources until they are about to enter the viewport. It improves page speed, reduces initial load time, and improves Core Web Vitals.
How do I check if lazy loading is enabled?
Use the lazy loading checker. Or view the page source and search for loading="lazy". Or use Chrome DevTools Network tab.
Should I use lazy loading for all images?
No. Use lazy loading for images below the fold. Do not use it for images in the viewport — those should load eagerly to avoid delaying LCP.
Does lazy loading affect SEO?
Indirectly — through Core Web Vitals. Lazy loading improves LCP and INP, which Google uses as ranking signals. Slow pages lose rankings.
What is the difference between loading=lazy and loading=eager?
loading="lazy" defers loading until the element is near the viewport. loading="eager" loads the element immediately. Use lazy for below-the-fold images, eager for above-the-fold.
Does lazy loading work without JavaScript?
Yes, native lazy loading via the loading attribute works without JavaScript. It is supported by all modern browsers. JavaScript-based lazy loading libraries are not needed.
Can I lazy load iframes and videos?
Yes. Add loading="lazy" to iframes. For videos, use preload="none" or preload="metadata" to defer loading.
How often should I check lazy loading?
Before publishing pages with many images, after redesigns or migrations, and once a month as part of a technical SEO audit. Lazy loading settings are often lost during site changes.
