What is lazy loading? Meaning, examples and SEO impact

Your website might look great, but if it loads slowly, most visitors won’t stick around long enough to see it.

Page speed plays a huge role in how people experience your site, and how likely they are to convert. Even a one-second delay can make a noticeable difference. According to Portent, conversion rates drop from 40% at one second to 34% at two seconds, and 29% at three.

One simple way to improve load times without cutting back on content is lazy loading.

Instead of loading everything at once, lazy loading only loads what the user sees first, then loads the rest as they scroll.

In this guide, we’ll break down what lazy loading is, how it works, and when it actually makes a difference.

Lazy loading is a technique that delays loading images, videos, and other content until they’re needed (usually when they come into view on screen).

Instead of loading everything at once, the browser prioritises what the user can see first, then loads the rest as they scroll.

For example, images further down a page won’t load immediately. They only load when you get close to them, which helps the page appear faster.

This means users can start interacting with your site straight away, without waiting for every element to load in the background.

Lazy loading isn’t just about speed, it directly improves how people experience your site.

Here are the main benefits:

Lazy loading reduces the amount of content that loads upfront, which means your pages appear faster, especially on image-heavy sites.

Only loading what’s needed means less data is transferred. This is particularly helpful for mobile users or anyone on slower connections.

Page speed is a ranking factor, and lazy loading can help improve key metrics like First Contentful Paint (FCP).

When pages load faster, users are more likely to stay, which can also reduce bounce rates and improve overall search performance.

Eager loading is the opposite of lazy loading.

It loads all page resources at once, including images, scripts, and styles, as soon as the page opens.

This means everything is ready immediately, but it can slow down the initial load, especially on larger or more complex pages.

• Larger pages: Modern websites use more images, videos, and interactive elements, which increases load time
• Performance impact: Loading everything upfront can hurt Core Web Vitals like FCP and LCP
• Mobile usage: Faster initial load times matter more than ever on mobile devices

Both approaches have their place, but they work in very different ways.

In most cases, lazy loading is the better option for modern websites, as it improves performance without reducing content.

Lazy loading works by detecting when content is about to enter the user’s viewport (the visible part of the screen).

Instead of loading everything upfront, elements like images and videos are only loaded when they’re needed.

Lazy loading is usually triggered by scrolling. As the user moves down the page, the browser loads new content just before it becomes visible.

Images often start as lightweight placeholders. When the user scrolls near them, the full image loads in.

Lazy loading can also be applied to videos, iframes, and scripts, which helps reduce the overall load on the page.

Lazy loading and eager loading are two different methods of resource loading with their own set of pros and cons. However, from today’s tech perspective, Lazy Loading is considered the preferred technique for most modern websites due to its efficiency, performance benefits, and better user experience.

In this part, we’re going to show you the different ways to implement Lazy Loading on your website.

The manual way of implementing Lazy Loading is not for everyone. It’s complex, and you should at least have an intermediate coding knowledge.

To do this, you will mostly use HTML and JavaScript. Before you begin, make sure you have access to the theme files of your WordPress site and feel confident to edit HTML and JavaScript.

Here is a detailed guide to help you through the process:

Step 1: Backup your site

Always backup your WordPress site before making any changes to the theme files to avoid losing data if you make an error.

Step 2: Edit the theme’s functions.php file

• Access your WordPress site’s files (using an FTP client or File Manager in your hosting control panel).
• Navigate to /wp-content/themes/your-theme/ and find the functions.php file.
• Open functions.php for editing.

Step 3: Add the Lazy Loading script

In functions.php, add a function to enqueue a JavaScript file for Lazy Loading. Here’s a basic example:

function add_lazy_loading_script() {

 wp_enqueue_script(‘lazy-load’, get_template_directory_uri() . ‘/js/lazy-load.js’, array(‘jquery’), null, true);

}

add_action(‘wp_enqueue_scripts’, ‘add_lazy_loading_script’);

This code assumes that you have a JavaScript file named lazy-load.js in a js folder within your theme directory.

Step 4: Create the JavaScript file

• Create a new file named lazy-load.js in the js folder of your theme directory.
• Add JavaScript to handle the Lazy Loading. Here’s a basic example using IntersectionObserver:

document.addEventListener(“DOMContentLoaded”, function() {

 let lazyImages = [].slice.call(document.querySelectorAll(“img.lazy”));

 if (“IntersectionObserver” in window) {

 let lazyImageObserver = new IntersectionObserver(function(entries, observer) {

 entries.forEach(function(entry) {

 if (entry.isIntersecting) {

 let lazyImage = entry.target;

 lazyImage.src = lazyImage.dataset.src;

 lazyImage.classList.remove(“lazy”);

 lazyImageObserver.unobserve(lazyImage);

 }

 });

 });

 lazyImages.forEach(function(lazyImage) {

 lazyImageObserver.observe(lazyImage);

 });

 }

});

Step 5: Update your image tags in WordPress

Modify your image tags to support Lazy Loading. In your PHP templates or directly in your posts/pages, change your image tags as follows:

<img class=”lazy” src=”placeholder-image.jpg” data-src=”original-image.jpg” alt=”image description”>

Replace placeholder-image.jpg with a low-resolution image or a loading graphic, and original-image.jpg with the actual image URL.

Step 6: Test your changes

• If you have a caching plugin installed, make sure to clear your site’s cache.
• Then, go to your website and scroll down to the section where an image is supposed to be lazy-loaded.
• Take a moment to see if the images load smoothly as you scroll.

Notes

• Make sure to always test in a development environment first, before doing it on your live website.
• Consider creating a child theme while doing this. Updates to the theme might overwrite your changes.
• For other content types like videos or iframes, a similar approach can be used where the src attribute is replaced with a data-src attribute and loaded via JavaScript when in the viewport.

This technique is a simple way to incorporate Lazy Loading. If you have more intricate websites or specific requirements, you may want to explore a stronger solution or a plugin.

This is the easiest option, as you can use a WordPress plugin to enable lazy loading without touching any code.

There are a few plugins that offer this, but we’ll use WP-Optimize as an example. It’s a WordPress plugin designed to improve site speed and overall performance.

With WP-Optimize, you can enable lazy loading for images, videos, and iframes in just a few clicks. Once enabled, content is only loaded when it becomes visible on screen, helping your pages load faster.

Lazy loading is available as part of the WP-Optimize Premium features.

To enable the feature:

• Open the WP-Optimize > Images tab from your WordPress Admin Dashboard
• Open the Lazy Load Images sub-tab
• From here, you can enable Lazy Loading for both Images and Videos/Iframes

If you need to disable Lazy Loading for certain images, background images, videos, or iframes, just enable it from here. You can also choose to skip certain image classes.

Before and after

We tested a sample website’s speed before and after implementing Lazy Load. The website was already pretty fast, with a First Contentful Paint (FCP) load time of 1.5 seconds, according to GTMetrix.

After enabling Lazy Loading, the FCP became 344 ms, which is way faster than what we had before. The results can vary depending on how much content you have on your page, but in most cases your FCP score will improve.

Lazy loading is one of the easiest ways to improve page speed without removing content.

By loading only what users see first, it reduces initial load time, improves Core Web Vitals, and creates a smoother experience, especially on mobile.

Just don’t overuse it. Keep important, above-the-fold content loading immediately, and use lazy loading for everything else.

If you’re running a WordPress site, using a performance plugin like WP-Optimize is the fastest and safest way to get started.