Use a fresh browser run and watch the Network panel while you scroll. A below-the-fold image or iframe is behaving lazily when its request is absent at initial load, starts as it approaches the viewport, and renders when you reach it. Confirm the final URL in the rendered DOM, check the individual image’s complete property, and test the page under the browsers and viewport sizes that matter to your users.
What lazy loading should look like
Lazy loading defers non-critical images, videos or iframes until they are near the viewport. “Near” is intentionally not a single pixel threshold: browser heuristics, resource type, connection and implementation can change when a request starts. An early request is therefore not automatically a failure. The useful test is whether content that is well below the fold is avoided initially but arrives in time to display when the reader reaches it.
A passing check has three parts:
- The resource is not unnecessarily requested during the initial load.
- The request begins as the element approaches the viewport.
- The image, video or embed appears correctly when reached.
For search-sensitive media, also verify that the eventual URL is present in rendered HTML, not only in a JavaScript data attribute. Google’s lazy-loading guidance explains this crawlability requirement.
Test in Chrome DevTools
1. Start with a clean run
- Open the page in an incognito window, or clear the relevant cache.
- Open DevTools (
Ctrl/Cmd+Shift+I) and select Network. - Enable the device toolbar if you need a mobile viewport. Record the browser, viewport dimensions, throttling profile and page URL so another run is comparable.
- Reload with DevTools open. Enable Disable cache for the test tab; this applies while DevTools remains open.
Filter the request list to Img for images. For videos, inspect media requests; for an embedded document, use Doc or search by the iframe’s host. A warm cache can make a deferred resource appear to load instantly without a new request, which is why a clean run matters.
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minute#1 Best Overall
2. Observe before scrolling
Identify an image or iframe that is clearly below the initial viewport. Its request should not be present merely because the HTML contains an element. Initial requests for the hero image and other visible content are expected. Save a screenshot or note the request count if you are comparing implementations.
3. Scroll in controlled increments
- Scroll toward the target in small steps rather than jumping to the bottom.
- Watch for the request to appear as the element nears the viewport.
- When the element is visible, confirm the response finishes and the content is rendered.
- Repeat with another below-the-fold resource to rule out a one-off failure.
Do not demand that a request wait until the element crosses the exact viewport edge. Browsers fetch ahead so content is ready in time, and iframe distance thresholds differ between implementations. This behavior is documented in web.dev’s embed guidance.
4. Check the rendered element
In the Elements panel, select the image or iframe after it has loaded. Confirm that an image has a real src (or an equivalent responsive source selected by the browser) and that an iframe has the expected src. Some JavaScript implementations keep the URL in data-src and copy it into src only when visibility is detected. An element with a lazy attribute but no usable source is not a successful implementation.
Verify with JavaScript and the DOM
Use the image complete property
Run this in the DevTools Console, replacing the selector:
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
const image = document.querySelector('img[data-test="below-fold"]');
({
complete: image?.complete,
currentSrc: image?.currentSrc,
naturalWidth: image?.naturalWidth,
naturalHeight: image?.naturalHeight
});complete: true means the browser has finished determining the image state; it can also be true for a broken image. Treat it as one signal: pair it with a successful Network response, non-zero natural dimensions and visible output. MDN documents this caveat and the broader lazy-loading model in its lazy-loading guide.
Inspect all images and iframes
[...document.images].map((img, index) => ({
index,
loading: img.loading,
src: img.getAttribute('src'),
currentSrc: img.currentSrc,
complete: img.complete,
width: img.naturalWidth,
height: img.naturalHeight
}));
[...document.querySelectorAll('iframe')].map((frame, index) => ({
index,
loading: frame.getAttribute('loading'),
src: frame.getAttribute('src')
}));This inventory helps find elements that claim to be lazy but already have an eagerly loaded source, or elements that never receive a source.
Check rendered HTML for SEO
Open Google Search Console URL Inspection, enter the page, and inspect the rendered HTML. Confirm that important image or video URLs occur in the rendered src (or the browser-selected source), rather than requiring a user click or scroll. Google explicitly recommends visibility-triggered loading that does not depend on user actions because Google Search does not interact with a page. A resource that appears only after a click may work for a human but remain undiscoverable to crawlers.
Measure performance separately from correctness
A request timing test answers “when did it load?” It does not prove that the page became faster. Run Lighthouse and inspect the Network waterfall before and after the change. Look for fewer initial image or iframe requests, less transferred data and lower main-thread work from third-party embeds. DevTools and Lighthouse can expose provider payloads and blocking work, as described by web.dev.
Rank #3
Also watch layout stability. Give images intrinsic dimensions or an aspect-ratio box, and set iframe width and height (or an equivalent CSS size) so a late response does not push content down. Lazy media without reserved space can create cumulative layout shifts.
Cases where lazy loading is the wrong setting
Do not lazy-load the LCP or hero image
The likely Largest Contentful Paint image should be discoverable and requested promptly. web.dev’s LCP guidance states: “Never lazy-load your LCP image, as that will always lead to unnecessary resource load delay, and will have a negative impact on LCP.” Use eager loading (the default) for the hero when it is visible on entry.
Do not defer immediately visible content
Google advises against adding lazy loading to content likely to be visible when a user opens the page. A mobile layout may put an image above the fold even when the desktop layout does not, so test each important viewport.
Do not hide required content behind interaction
Visibility-based loading can be automatic; scroll- or click-only loading is risky for indexing and accessibility. Ensure keyboard users, screen readers and crawlers can reach the content without an action that only a human visitor performs.
Recommended Free Tools
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Cross-browser and repeatability checklist
- Use a cold or cache-disabled run, then repeat with a normal cache to understand real repeat visits.
- Test at representative desktop and mobile widths.
- Repeat in the browsers your audience uses; thresholds and iframe behavior vary.
- Record network conditions, viewport, scroll position and browser version.
- Confirm request, response, rendered content and layout stability for each resource type.
- Check that a failed request produces a useful fallback rather than an empty reserved box.
Troubleshooting: what a failed test means
The resource loads before scrolling
It may be inside the browser’s prefetch distance, visible at the chosen viewport, requested by a script, or served from cache. Disable cache, inspect the initiator column and repeat at a larger viewport. Early loading alone is not proof of failure.
The element never requests or renders
Inspect the console for JavaScript errors, verify that src or srcset is eventually assigned, and check the Network response status, CORS policy and content type. An Intersection Observer can also be disconnected or observing the wrong container.
The image is broken even though complete is true
Check naturalWidth, the response status and the final URL. complete also becomes true after a failed load, so it cannot replace those checks.
The page shifts when media appears
Add width and height attributes, an aspect-ratio reservation or a fixed responsive container before enabling deferral.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Scan for outdated or missing drivers - takes under a minute3Repair Windows errors before they cause bigger problemsSearch tools cannot see the image
Use URL Inspection’s rendered HTML. Move the canonical URL into rendered src/srcset, avoid click-only loading, and ensure robots rules do not block the image or its host.
Or skip the browser setup
ScreenshotNeo can capture a page after its lazy content has had an opportunity to render, without you maintaining a browser runner. Its clean-shot process accepts consent banners and removes more than 60 known consent platforms, newsletter popups and chat widgets before capture; bot checks, blank pages, timeouts, failed loads and cache hits are not billed, and response headers identify the page verdict and billing status. It also offers an MCP server with take_screenshot, get_page_info and capture_pdf for Claude, Cursor and other MCP clients.
Use the API documented at screenshotneo.com/docs/:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpYou can request full-page captures, wait for a selector, delay or network idle, load lazy images, select an element, set a viewport or device preset, and supply custom JavaScript or CSS. For repeatable visual checks, choose a cache TTL or use async jobs and signed webhooks.
The Free plan includes 1,000 screenshots per month with no card. Paid plans start at $5 for 3,000 shots; every feature is included on every plan. Create a free ScreenshotNeo account to try the check.
Python and Node.js alternatives
Python
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)Node.js
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
const data = Buffer.from(await res.arrayBuffer());
require('fs').writeFileSync('shot.webp', data);FAQ
Does loading="lazy" guarantee deferred loading?
No. It is a browser hint. Verify actual requests and rendering in the browsers and layouts you support.
Should every image below the fold be lazy-loaded?
No. Keep likely LCP and immediately visible images promptly discoverable, and balance deferral against the distance needed to load content smoothly.
Can the page load event prove lazy images finished?
No. Lazy images, iframes, video and audio may still be unloaded when that event fires. Check the specific resource instead.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
