Users despise slow sites and would rather bounce to faster sites than wait for your page to load.
This is why fast websites are more efficient in gaining users’ attention. So you must optimize your site’s images and videos properly to improve responsiveness and reduce loading times.
And Lazy Load allows you to do exactly that!
This blog explains the basics of lazy load and how it enhances your website’s performance. And I will also demonstrate how to add lazy load to a WordPress site.
What Is Lazy Loading?
The lazy loading HTML attribute is a technique web pages use to optimize the load time. So when the lazy load is activated, the web page only loads the content the user is consuming at that time. This delays the loading of the media that the user is yet to see, enhancing the overall performance and decreasing loading times.
How Does Lazy Loading Work?
- Firstly, Lazy loading puts a reference src attribute to the lazily loaded web page resources (image, video, etc.).
- Then, it adds another attribute to the original content.
- After this, it detects the visitors’ scroll position on a page using JavaScript.
- As the user reaches the reference object, the lazy load replaces the reference src attribute with the actual src and loads the content.
This implies that if a visitor opens a web page and leaves it immediately, then nothing beyond the top portion of a web page is loaded.
Still Slow Despite Lazy Load? You Need More.
Download our FREE expert-curated checklist to find out the hacks to boost your WordPress site’s speed performance to its fullest.
Thank You
Your list is on its Way to Your Inbox.
Why Should We Add Lazy Load?
Every visitor expects a web page to load in the blink of an eye. So you must find ways to improve your web page’s load times, and lazy loading is one of the best ways for this job.
Generally, when a user opens a web page, the entire page’s contents start downloading and rendering, annoying the users to bounce from the page. However, by enabling Lazy Load, you can prevent this by giving the users exactly what they need – Loaded content!
Also, loading assets on runtime reduces the number of requests a page sends to the server for the initial load, resulting in faster and minimal communication between the WordPress server and the visitor in one go.
To see the practical results, we will test the impact of lazy load on a site’s performance. And for that, we will use GTMetrix to test the performance metrics before and after activating the lazy load plugin. You can also use any other speed test tool for evaluating the website’s performance.
Website Performance Before and After Activating Lazy Load Plugin
GTMetrix Grade
The image below shows the website’s GTMetrix grade before and after lazy load.
We noticed the following results:
- The grade moved from C to B, demonstrating an upgrade in ranking and Core Web Vitals.
- The performance also increased from 70% to 90%
- The structure decreased from 91% to 90%
Note: The performance and structure aren’t just affected by the website’s speed. Many other factors, like image optimization plugins and lightweight themes, also play their part.
Check how to improve your Google PageSpeed Insight scores to learn more about enhancing website performance!
Speed Visualization
A website’s loading time is an important parameter to judge the impact of the lazy load plugin.
Here are the stats before and after using the lazy load plugin:
- The time taken to load First Contentful Paint reduced from 3s to 2.0s
- The time to interact reduced from 6s to 2.4s
- The time taken to load the Largest Contentful Paint reduced from 7s to 2.3s
- The onload time was reduced from 1s to 2.8s
- The fully loaded time was reduced from 9s to 3.1s
This shows that using the lazy load plugin increases your site’s speed and creates a seamless and uninterrupted user experience.
No More Speed & Scaling Issues with Autonomous
Manage your WordPress site with ease on Cloudways Autonomous. Get fast, secure hosting that scales with your traffic—all without any setup headaches.
How to Add Lazy Load to a WordPress Website
Lazy loading reduces server response time resulting in a faster page-loading experience. Apart from choosing a fast WordPress hosting provider, enabling this plugin also impacts the site speed.
Note: Find out the optimum hosting provider for your business based on your monthly spending and traffic numbers. Try our FREE web hosting pricing calculator for instant results.
Implementing lazy load in WordPress content is not that technical, thanks to the WordPress Community for their contributions.
I am assuming you already have a functional WordPress site. If you don’t, set up now using Cloudways managed hosting platform.
There are 3 ways to add lazy loading to your WordPress Website:
Method 1: Upgrade to WordPress 5.4 or Higher
The latest WordPress versions (5.4 or higher) include the feature of lazy-load images by default. This means you can enable lazy loading by updating your WordPress site.
So if you’re using a WordPress version older than 5.4, upgrade it now. To do that,
- Go to your WordPress Dashboard > Update
- If you’re on the older version, you’ll get a prompt to upgrade to a newer version.
While this method is the easiest, it gives you the least control over what images to lazy-load. So the developers might not consider it a reliable option.
Another thing to note here is that with every new version, the lazy loading capacity changes. So, to enjoy the maximum benefits of this feature, it is recommended that you use the latest WordPress version.
Method 2: Using Browser to Enable Native Lazy Loading
You can also enable lazy loading through browsers. All you need to do is to set the image loading attribute to lazy.
- This is how you can do it;
<img src="image.jpg" alt="Description" loading="lazy">
- If you want to lazy load the iframes, you need to add the same attribute to the <iframe> tag. This is how you can do this;
<iframe src="video.html" loading="lazy"></iframe>
Method 3: Using WordPress Plugin
You can add lazy load to your WordPress site through plugins.
Follow the steps below to add lazy load to a WordPress website:
- Go to your WordPress Dashboard > Plugins > Add New
- Search for the A3 Lazy Load Plugin
- Install and Activate the plugin
- After you’ve activated the plugin, click settings
- Now you’ll be redirected to the settings screen. Open each set to customize it as per your needs.
Usually, WordPress automatically inserts the loading attribute to all the images, texts, URIs, videos, iframes, and other elements on the website as a part of its default settings. However, you can play with the toggle buttons for further customization.
For example, you can apply the lazy load effect to speed up the website’s core.
WordPress Lazy Load Images
You can lazy load images using the a3 Lazy Load plugin.
Images are resource-intensive and consume a lot of bandwidth and storage space. Not only this, but the lazy loading feature for images also lets you control where it should work, including:
- Post, pages, and custom post types (all content areas)
- Widgets (sidebar, header, and footer)
- Apply to post thumbnails
- Apply to Gravatars
WordPress Lazy Load Videos and iFrames
a3 Lazy Load is not limited to images but also allows you to lazy load video content. It supports all WordPress video embeds that use iFrames to load videos on the initial load. It contains toggles for ON/OFF. When turned on, you can control the below-mentioned areas:
- Videos embedded by URL in posts and pages (all content areas)
- Videos in widget types, text widgets, and HTML widgets
- Fully Compatible with the popular YouTube Embed Plugin
WordPress Lazy Load Comments
Many WordPress users use WordPress comment plugins. And most of them support lazy loading via WordPress lazy load plugins.
You can use:
- Lazy Load for Comments for default WordPress comments
- Disqus Conditional Load for Disqus comments
- Lazy Facebook Comments for Facebook comments
- Click Save changes once you’ve played with the lazy load’s settings.
- Finally, reload your website to see the results.
More Lazy Loading Plugins for WordPress
Besides a3 Lazy Load, there are a number of useful plugins for lazy load in the WordPress plugin repository that you may consider:
- BJ Lazy Load
- WordPress Infinite Scroll – Ajax Load More
- Lazy Load by WP Rocket
- Load More Products for WooCommerce
- Lazy Load for Comments
- Disqus Conditional Load
- Lazy Load for Videos
3 Use Cases of Lazy Load
Optimizing images on a WordPress website is crucial as it can impact the website’s loading time. This is why the lazy load is mainly used for images and other media elements. You can use it to integrate with videos, comments, scripts, etc.
All popular sites use lazy loading images in one way or another. Here are a few of them:
- Medium
If you have visited Medium, you must have observed that it displays a blurred placeholder for lazy load images until the actual high-resolution image has been fully loaded, so visitors know that an image is loading.
This improves the user experience by showing some initially loaded content to keep their attention.
2. YouTube
By default, the first thing YouTube shows is the video you intend to watch and does not initially load comments and thumbnails of other suggested videos. When you start scrolling, the lazily loaded items like thumbnails and comments start loading.
This way, the visitor doesn’t wait for an entire page to load and can start watching the video immediately.
3. Google Images
When you search for an image on Google, it replaces placeholder images with thumbnails and loads more images later.
Google uses a unique approach by combining infinite scrolling and lazy loading to improve its search results.
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 |
Improves page load times | Users can experience slight delays with visuals. |
Reduces the use of bandwidth | It has a JavaScript dependency |
Reduces the number of requests made to the server | It has the potential for increased CPU usage. |
Effectively consumes the resources | Hard to customize. |
Improves the user experience |
Does Lazy Load Affect SEO?
Lazy Load is not SEO-Friendly. Since the content (Images, Videos, Comments, etc.) aren’t loaded initially for visitors, the same flow is for search engine crawlers. There is a possibility that the Lazy Loaded content (image, videos) may not index in the Google images/video section, which is not good from the SEO perspective.
The workarounds do exist, like adding links to your Lazy Loaded content. This way, Google will take it as a standard web page and index the content accordingly.
However, the visitors will still see a web page as Lazy Loaded.
Google is working and preparing the help documents around how one can take advantage of Lazy Loading and get the Lazy Loaded content discoverable by GoogleBot.
Conclusion
The human attention span is incredibly short. Therefore, if you wish to have more users on your web page, you must ensure to give them a seamless user experience and don’t keep them waiting.
And you can do this by activating Lazy Load on your WordPress website. It will optimize your website’s performance, increase the loading speed of the content and improve user experience.
Frequently Asked Questions
Q. What is lazy loading in WordPress?
Lazy loading in WordPress helps the web page load faster. It loads the images and other media elements only when the user reaches that section.
Q. Is lazy loading good?
Yes, lazy loading can improve website performance by reducing loading times, optimizing data usage, and enhancing the user experience.
However, overusing lazy loading can have a negative impact on a website’s performance.
Q. How does lazy loading work?
Lazy loading does not load the image on the web page unless it is not visible to the user. It defers the loading of an image to improve the loading time.
Q. How do you test lazy loading?
To test the lazy loading functionality, browse the web page and observe the behavior of images. If the image starts to load when you see it and not before that, then the lazy loading is working.
Q. How to disable lazy load in WordPress?
You can disable lazy load in WordPress by adding the relevant filter into the functions.php file. However, this can be risky.
Therefore, we will disable lazy load by following these simple steps;
- Step 1: Install the Code Snippet plugin
- Step 2: Implement the following code:
“add_filter( 'wp_lazy_loading_enabled', '__return_false' );
- Step 3: Activate the code snippet.
Sarim Javaid
Sarim Javaid is a Sr. Content Marketing Manager at Cloudways, where his role involves shaping compelling narratives and strategic content. Skilled at crafting cohesive stories from a flurry of ideas, Sarim's writing is driven by curiosity and a deep fascination with Google's evolving algorithms. Beyond the professional sphere, he's a music and art admirer and an overly-excited person.