Images are crucial for every website and application today. Whether marketing banners, product images, or logos, images are indispensable on any website. Unfortunately, these visual objects are very large, so they take up the largest share of the page size.
According to the latest data from the HTTP Archive, the average page size on desktops is 1511 KB. Images account for almost 650 KB of this, or about 45% of the total page size. Since we cannot do without images, we must ensure that our web pages load quickly.
This guide is about "lazy loading" of images, a technique that reduces page load time and page size while preserving all images on the page.
Lazy loading is a technique where certain parts of a webpage—especially images—are loaded only when needed. Instead of loading everything at once, known as "eager loading," the browser requests specific resources only when users interact with the site in a way that requires them. When implemented correctly, lazy loading can reduce page load times.
This type of loading is called "lazy" because it makes a web browser hesitate. When a lazy-loading website is displayed, the browser is essentially saying:
"I'm waiting to download these pictures until I really need them."
When a website is displayed that is loading rapidly, the browser adopts the opposite attitude:
"I will take care of everything immediately!"
While procrastination sometimes has a negative connotation in the real world, in this case it is often more efficient.
For example, a blog post might contain an image at the top of the page and a diagram at the bottom. If someone is reading the blog post, they might not reach the end of the text for several minutes, so the browser waits to load the diagram until the reader scrolls to that section. This way, the page loads faster initially because the browser only loads one image instead of two.
There are two factors you should keep in mind:
Lazy load is a SEOA compatible format, as it keeps the src property visible to search engines. In fact, the src attribute is essential for search engines to check and index the images.
The other image attribute to consider is the `srcset` property, which not all search engines can read. Therefore, it's best practice to add a `src` attribute as a fallback. This ensures that lazy loading doesn't negatively impact image indexing.
To ensure that search engines correctly index your images (regardless of whether they are "lazy-loaded" or not), you should also use an image sitemap.
Some search engines, like Google, may trigger JavaScript when crawling a page. These search engines work well with JavaScript-driven lazy loading and native lazy loading. It also works well with WP Rocket's Lady-Lord feature.
On the other hand, there are search engines that don't trigger JavaScript when crawling pages. To cover these, you should wrap the regular image with the src tag filled in a Insert a -tag (which is readable when JavaScript is disabled in browsers).
Overall, "lazy loading" is a good practice for search engine optimization and, if implemented correctly, has no negative impact on SEO.
Lazy loading postpones the loading of images that aren't immediately needed on the page. An image that isn't visible to users when the page loads will load later, when users scroll and the image becomes visible. If users never scroll, an image that isn't visible to them will never load.
This has two main advantages.
This is the most important one for you as a website administrator – better performance and loading time.
Lazy loading reduces the number of images that need to be loaded onto the page first.
Fewer resource requests mean fewer bytes to download and less competition for the limited network bandwidth available to users. This ensures that the device can download and process the remaining resources much faster. Therefore, the page loads much faster than a page without lazy loading.
The second advantage for you lies in the delivery costs. The delivery of images or other assets is usually calculated based on the number of bytes transferred.
As mentioned previously, an image that is not visible will not be loaded during lazy loading. This reduces the total number of bytes transferred on the page, especially for users who bounce or only interact with the top part of the page.
This reduction in the number of bytes transferred by your delivery network lowers delivery costs. This will become even clearer when we look more closely at lazy loading.
Under otherwise identical conditions, websites with smaller file sizes load faster. Lazy loading involves initially loading a website in a smaller size than its full size, thus speeding up the loading process.
Faster web performance has numerous advantages, including better search engine optimization, higher conversion rates, and an improved user experience.
Suppose a page loads several images located below the fold-out area, but the user leaves the page before they can scroll down. In such a case, the bandwidth used to deliver the images and the time the browser spent requesting and rendering them were essentially wasted.
In contrast, "lazy loading" ensures that these images are only loaded when needed. This saves time and processing power, and can save website owners money because less bandwidth is consumed.
For example, if users scroll quickly down a page, they may have to wait for the images to load. This can negatively impact usability.
Instead of requesting the entire page content at once, the browser may need to send multiple content requests to the website's servers when users interact with the page.
Using a Content Delivery Network (CDN) minimizes this potential disadvantage, as the images are cached by the CDN and the browser does not need to send a request to the origin server to retrieve them.
When the development team adds several lines of JavaScript to a website to tell the browser how to load the page's resources slowly, this increases the amount of code that the browser has to load and process.
If this is done inefficiently, this slight additional loading and processing time can outweigh the time saved by lazy loading.
When used carefully, slow image and video loading can significantly reduce the initial load time and page payload on your website, including Core Web Vitals.
Users are not burdened with unnecessary network activity – including network conflicts on slower connections – and processing costs for media resources they may never see, but can still view these resources if they wish.
Regarding performance improvement techniques, lazy loading is relatively uncontroversial. If you have many inline images on your website, this is a good way to avoid unnecessary downloads. Your website users and project stakeholders will appreciate it.
© 2012-2025, MIK Group GmbH | General Terms and Conditions | Imprint | Privacy policy
