Load assets when they are approaching use
Lazy loading delays work that is not needed for the initial view. For example, images far down a long page can be requested as the visitor approaches them instead of competing with the main content immediately. Supported browsers provide native lazy loading for images through a loading attribute.
The technique is most useful when applied selectively. Main above-the-fold images should generally be available promptly, and image dimensions should be reserved to prevent unnecessary movement. Google’s browser-level image loading guide explains the browser behaviour.
Example: a long project gallery
Consider a project page with a hero image and many detailed screenshots below it. The hero helps visitors understand the project as soon as the page opens, while the later screenshots are only needed if they continue reading. The two groups should not necessarily share the same loading settings.
Load the initial image with appropriate priority and defer the distant gallery images. Keep meaningful captions and page text available regardless of image timing. If a gallery uses tabs, confirm that switching to a hidden panel requests the correct assets and does not display an empty frame indefinitely.
Check more than the first screenshot
Test slow scrolling, fast scrolling and navigation directly to a lower-page anchor. Check that images receive enough space before they load and that essential content is not dependent on a scroll event a crawler may never trigger. Review the mobile layout because an image’s initial visibility can change with screen size.
A plugin that applies lazy loading everywhere can delay the most important image and make the page feel slower. Duplicate loading scripts can also complicate diagnosis. Use one deliberate approach where possible and inspect the actual requests. The objective is to defer unnecessary work, not to delay every visual element equally.
Common questions about lazy loading
Should the homepage hero image be lazy-loaded?
Usually not when it is prominent in the initial viewport. Delaying that image can postpone the visitor’s first meaningful view and worsen Largest Contentful Paint.
Does lazy loading reduce the size of an image?
No. It changes when the asset is requested. The file still needs suitable dimensions, compression and a format appropriate to its content.
Related definitions
- Largest Contentful Paint — A loading measure that reports when the largest visible content element is rendered. Large hero images, slow delivery and render-blocking resources can delay it.
- Cumulative Layout Shift — A measure of unexpected layout movement while a page is being used. Reserving dimensions for images and other content helps reduce disruptive shifts.
- Responsive design — A layout approach that adapts content and controls to different screen sizes, input methods and viewing conditions.
- JavaScript — A programming language used for interactive website behaviour and application logic. Essential content should remain accessible if an optional visual feature fails.
Related SEO guides
Delay off-screen assets selectively while keeping the principal visible content available promptly.
For help connecting these decisions with your website, explore our SEO services or start with an SEO audit.
Put it into practice
Explore our technical seo service or talk with Refined IT about applying this to your website or business systems.