How to Configure WordPress Lazy Load to Speed Up Your Site

Key Takeaways

• Lazy loading speeds up your initial page load by deferring off-screen images and videos until the user actually scrolls to them.
• Use the native WordPress feature for basic images, or a dedicated plugin to handle heavier elements like YouTube embeds and background images.
• Always exclude “above-the-fold” content like your logo and hero banner to prevent visual delays and protect your Core Web Vitals scores.

Nobody likes a slow website. If a page takes more than a few seconds to load, most visitors hit the back button and go somewhere else. This hurts your user experience and your search engine rankings.

The biggest culprits behind slow sites are high-resolution images and heavy video files. You want your website to look great, but you also need it to perform well. This is where lazy loading comes in.

Lazy loading is a simple but effective WordPress optimization technique. Instead of forcing a browser to download every image and video on a page at once, lazy loading tells the browser to only load what the user is actually viewing. The rest loads as they scroll down.

In this guide, we will break down exactly how lazy loading works and why your WordPress site needs it. We will also cover its impact on SEO, the best practices for setting it up correctly, and the exact steps you can take to add lazy loading to your website today.

How Does Lazy Loading Work?

Lazy loading relies on the browser to make smart decisions about what to load and when. It uses the user’s viewport, which is the visible area of the web page on their screen, as the trigger.

When a user lands on a page, the browser looks at the HTML code for images and iframes. If it sees the loading="lazy" attribute on an image tag, it pauses the download for that specific item.

The browser then monitors the user’s scrolling. As they move down the page and get close to an image, the browser quickly fetches it and displays it.

This happens natively, meaning the browser handles all the calculations automatically without needing any complex external scripts or heavy code running in the background.

Don’t Let Traffic Spikes Slow You Down

Lazy loading optimizes your media, but Cloudways Autonomous optimizes your server. Get fully managed autoscaling that handles traffic surges instantly so your site never crashes.

Learn More!

Why You Should Enable Lazy Loading on Your WordPress Site

Every visitor expects a web page to load instantly. You need to find ways to improve your load times, and lazy loading is one of the best tools for the job.

Here is why you should turn it on.

Faster Initial Page Load

When a user opens a web page, the browser usually tries to download everything at once. This creates a bottleneck. By enabling lazy loading, you reduce the number of initial requests the browser has to make. The server only sends what is needed right now, which makes the page appear much faster.

Improved Core Web Vitals

Google uses a set of metrics called Core Web Vitals to measure user experience. Lazy loading directly improves two of these: Largest Contentful Paint (LCP) and Time to Interactive (TTI). By deferring off-screen images, the browser can focus its resources on rendering the main content first.

Resource Efficiency

Images and videos are heavy. If a user never scrolls down to the bottom of your page, loading those footer images is a waste of data. Lazy loading saves bandwidth for both you (the host) and your visitors, which is especially important for users on mobile data plans.

Does Lazy Loading Affect SEO?

There is a common misconception that lazy loading hides content from search engines. This is simply not true. When implemented correctly, lazy loading is completely SEO-friendly.

Search engines like Google use bots to crawl websites. These bots are now capable of processing the loading="lazy" attribute just like a modern browser. They can see that an image exists and will index it properly, even if it hasn’t loaded visually on the screen yet.

In fact, enabling lazy loading often helps your WordPress SEO performance. Since page speed is a ranking factor, a faster site generally ranks better. By improving your Core Web Vitals scores, you are sending a positive signal to Google that your page provides a good user experience.

However, implementation matters. If you use a method that relies entirely on complex scripts to swap image sources, Google might struggle to see the image content. Sticking to the native browser method or reputable WordPress plugins ensures that Googlebot can find and index your media without any issues.

How to Add Lazy Load to a WordPress Website

Lazy loading drastically reduces server response times and provides a faster page-loading experience. While choosing a fast WordPress hosting provider like Cloudways is the foundation of a fast site, enabling lazy load is the specific optimization that ensures your media doesn’t slow you down.

There are three primary ways to implement this on your site. We will start with the easiest method that requires no additional plugins.

Method 1: WordPress Core (Default)

The easiest way to enable lazy loading is to simply ensure your WordPress core is up to date. Since WordPress version 5.5, native lazy loading for images has been a built-in feature.

This means WordPress automatically adds the necessary HTML code to your images without you lifting a finger.

However, if you are running an outdated version of WordPress, you are missing out on this automatic performance boost.

Follow these steps to ensure you are updated and using native lazy load:

• Check Your Version: Log in to your WordPress admin dashboard. Look at the “At a Glance” box or scroll to the bottom right corner of the admin footer to see your version number.
• Run the Update: If a new version is available like WordPress 6.9, you will see a prompt. Click the “Update to X.X” button.

If you want more detailed steps, check our detailed guide on how to check and update to the latest WordPress version.

Once the update is complete, WordPress will automatically apply the loading="lazy" attribute to the following elements:

• Images within post content
• Post excerpts
• Post comments
• Text widgets
• Avatar images

How to Verify It Is Working: You can check if native lazy loading is active by opening any page on your site. Right-click on an image and select “Inspect“. Look at the image tag in the HTML code. You should see loading="lazy" inside the tag.

While the default WordPress method is a great starting point, it has limitations. It often misses background images, iframes, and third-party embeds. To handle these elements and gain full control over your site’s loading behavior, you need a dedicated tool.

This leads us to Method 2, where we will use a specific plugin to fill these gaps.

Method 2: Using a WordPress Plugin

This is the standard way to handle lazy loading because it covers what the default method misses. A WordPress plugin gives you control over specific elements like videos, iframes, and background images.

We’ll use a free plugin for this tutorial, but the steps work similarly for most performance plugins like WP Rocket, Perfmatters, or a3 Lazy Load.

Step 1: Install the Plugin

Navigate to your WordPress Dashboard.

• Go to Plugins > Add New.

• In the search bar, look for LazyLoad Plugin WP Media.

• Click Install Now and Activate the plugin.

Step 2: Configure the Settings

• Go to Settings > LazyLoad in your dashboard sidebar.

• You will see a very simple menu with three main checkboxes. Check the boxes based on your needs:
• Images: Check this to enable lazy loading for all images (post content, thumbnails, avatars, etc.).
• Iframes & Videos: Check this to lazy load video embeds and iframes.
• Replace YouTube videos by thumbnail: (Highly Recommended) Check this box. It replaces heavy YouTube video players with a static preview image. The video only loads when a visitor actually clicks the play button.

• Click Save Changes at the bottom.

Note: This plugin is designed to be lightweight, so it does not have an “Exclude” field in the settings. If you need to exclude specific images (like your logo), we will cover exactly how to do that in the “How to Exclude Specific Images From Lazy Loading” section later in this guide.

Method 3: The Manual HTML Attribute

Note: You only need this method for Custom HTML blocks, widgets, or hard-coded elements that plugins might miss.

If you are manually coding a banner, an ad, or a badge, you can force lazy loading by adding a simple attribute to the image tag.

Step 1: Add the Custom HTML Block

Go to Appearance > Widgets (or edit any page). Click the + button to add a new block and search for “Custom HTML.”

Step 2: Add Your Image Code

Paste your image HTML into the box. To enable lazy loading, simply add loading="lazy" inside the <img> tag, right before the closing bracket.

Code Example:

<img src="banner.jpg" alt="Sidebar Banner" width="300" height="250" loading="lazy">

Step 3: Preview and Save

Click the Preview button on the block toolbar to make sure your image shows up correctly, then click Update to save your changes.

Is Your Server Slowing Down Your Optimized Site?

Lazy loading can only do so much if your server is slow. Switch to Cloudways Managed Hosting for optimized stacks and faster TTFB that keeps your users happy.

Start Free Trial

How to Exclude Specific Images From Lazy Loading

While lazy loading is generally great for performance, there is one major exception: The top of your page.

Images that appear “above the fold” (visible immediately without scrolling), such as your logo or the main “Hero” banner, should never be lazy loaded. If they are, the user will see a blank space for a split second before the image pops in.

This hurts your user experience and negatively impacts your Largest Contentful Paint (LCP) score in Google Core Web Vitals.

Since the lightweight LazyLoad by WP Media plugin doesn’t have an “Exclude” settings menu, you need to use a manual class or a code snippet to stop specific images from lazy loading.

Method 1: The “No-Lazy” Class (Easiest)

If you can edit the HTML of the image (like an image block in a post or a Custom HTML widget), you can simply tell the plugin to ignore it by adding a specific class.

The Class: no-lazy

How to do it:

• Open your Image Block or Custom HTML widget.
• Add class=”no-lazy” to your image tag.

Code Example:

<img src="hero-image.jpg" class="no-lazy" alt="Hero Image">

Method 2: Using a Code Snippet (Advanced)

For images hard-coded into your theme (like your logo) where you can’t easily add a class, you can use a filter in your functions.php file.

Warning: We strongly recommend using a child theme for this method. If you edit your parent theme’s functions.php file directly, your changes will be lost the next time the theme updates.

Step 1: Open Your Theme Functions

Go to Appearance > Theme File Editor. Make sure your child theme is selected, then click Theme Functions (functions.php) in the right sidebar.

Step 2: Add the Exclusion Code

Paste the following snippet at the bottom of the file. You can replace the placeholder text with the actual filename of your image (e.g., logo.png).

function rocket_lazyload_exclude_images( $attributes ) {
        $attributes[] = 'src="your-logo-filename.png"';
        return $attributes;
}
add_filter( 'rocket_lazyload_excluded_attributes', 'rocket_lazyload_exclude_images' );

Step 3: Save Changes

Click Update File. The LazyLoad by WP Media plugin (which we installed in Method 2) will now detect this code snippet and automatically stop lazy loading any image that matches the filename you entered.

3 Use Cases for Lazy Loading Beyond Images

Most people think lazy loading only works for images. That’s just the start. The biggest speed gains come from delaying heavy external scripts and interactive content.

Here are three ways to use lazy loading beyond JPEGs and PNGs.

1. Videos and Iframes (YouTube & Maps)

Embedding a YouTube video or Google Map is one of the heaviest things you can add to a page. A single YouTube embed adds 500KB to 1MB of data to your initial load, even if nobody clicks play.

The Solution: The “Facade” Method

Instead of loading the full video player right away, lazy load a preview image (thumbnail) with a play button. The actual video player and its JavaScript only load when someone clicks the image.

How to do it: Most caching plugins like WP Rocket have a checkbox for “Replace YouTube iframes with preview image.”

Free Alternative: Use a plugin like Lazy Load for Videos or Presto Player.

2. Comments Sections (Disqus & Facebook)

Third-party comment systems like Disqus or Facebook Comments slow sites down badly. They load big external scripts, user avatars, and tracking pixels right when the page opens, even though comments are usually at the bottom of posts.

The Solution: Load on Scroll

Set these scripts to load only when users scroll to the comment area or click a “Show Comments” button.

How to do it: Plugins like Disqus Conditional Load or script management in Perfmatters can delay these scripts until users interact with them. This saves bandwidth for people who read the headline and leave.

3. Product Galleries (WooCommerce)

If you run an ecommerce store with categories showing 50+ products, loading all those thumbnails at once crushes your server response time.

The Solution: Infinite Scroll or Pagination

Instead of downloading 50 images at once, lazy load the product grid. New rows of products (images and prices) fade in as users scroll down the catalog.

How to do it: Many WooCommerce themes like Astra or Flatsome have built-in “Infinite Scroll” or “Load More” features. The default WordPress native lazy load (Method 1) handles images in these grids automatically, making the browser only request images as they come into view.

Lazy Loading is Just Step 1. Get the Full Speed Checklist.

Your images are optimized, but what about the rest? Download our FREE expert-curated checklist to find the hidden bottlenecks that are still slowing down your WordPress site.

I agree to the Cloudways Terms of Service & Privacy Policy

Get It Now

Thank You

Your list is on its Way to Your Inbox.

Best Practices for Implementing Lazy Loading

Just turning on lazy loading isn’t enough. Done wrong, it can hurt your Core Web Vitals and frustrate users. Follow these three rules to get maximum speed without the downsides.

1. Exclude “Above-the-Fold” Content

Never lazy load the first image users see (known as “above the fold”). This is the most important rule.

Why?

If your logo or hero banner is lazy loaded, the browser waits for JavaScript to fire before fetching the image. Users see blank white space, which hurts your Largest Contentful Paint (LCP) score.

The Fix: Always exclude your header logo, hero background, and featured images that appear at the top.

2. Specify Image Dimensions

Your <img> tags should always have width and height attributes.

Why?

Without dimensions, the browser doesn’t know how much space to reserve before the image loads. When the image appears, it pushes text down and the page layout shifts.

The Consequence: This creates a poor Cumulative Layout Shift (CLS) score, which hurts your Google ranking.

The Fix: WordPress does this automatically for standard blocks. If you’re coding manually (Method 3), always include width=”X” height=”Y”.

3. Handle Background Images Carefully

Lazy loading works natively on standard <img> tags but not on CSS background images (like a div with a background-image style).

The Challenge: Background images are often the heaviest elements on a page.

The Fix: If you have a large background section, native lazy loading won’t catch it. You’ll need a plugin like WP Rocket or Perfmatters that uses JavaScript to swap the CSS class as users scroll.

WordPress Lazy Loading: Pros & Cons

Now that you’ve read a lot about lazy load in WordPress, the question is should you use it or not? And to help you get the answer here are some pros and cons of lazy loading:

Pros	Cons
Faster Initial Page Load By delaying images that aren’t on screen, your server handles fewer requests at once, making the page interactive much faster.	Potential Layout Shifts (CLS) If you don’t define width and height attributes, the text on your page will jump around when images finally load.
Bandwidth Savings Users on mobile data plans won’t waste data downloading images at the bottom of the page that they never scroll down to see.	LCP Penalties If you accidentally lazy load the top “Hero” image, users see a blank white space for a second, hurting your Largest Contentful Paint score.
Better Core Web Vitals Google rewards pages that load quickly. Native lazy loading is a recognized best practice for passing Core Web Vitals assessments.	Buffering for Fast Scrollers Users who scroll down very quickly might see grey placeholders or blank boxes before the images have time to fetch.
Reduced Server Load Your hosting server saves resources because it only has to deliver media to engaged users who actually scroll.	Printing Issues If a user tries to print a webpage, images that haven’t loaded yet might not appear on the paper.

Wrapping Up!

Lazy loading is a no-brainer for speeding up your WordPress site. It saves bandwidth and makes your pages feel much faster because it stops off-screen images from loading until your visitors actually need them.

We walked through how to set this up using the native WordPress feature, and also how to get more control with plugins like WP Rocket.

Just remember the one big rule we talked about: always exclude your logo and top banner. If you don’t, your site might actually feel slower because users will be staring at a blank white space for a split second while the script catches up.

If you get stuck or run into issues with a specific image, just drop a comment below.