How and Why to Use Lazy Loading on Your WordPress Website
Website developers around the world have been using lazy loading on WordPress sites ever since they realized that it could not only help improve the user experience but also prove to search engines that their site loads quickly.
However, lazy loading is exactly what it sounds like – it’s lazy when it comes to loading all of the content (images, videos, and text) on a webpage.
Before you assume the word lazy to have a negative connotation, continue reading to learn all of the benefits it has for your WordPress site.
The Pros of Lazy Loading
Lazy loading has many benefits. Instead of loading all of the content when someone visits your page, it only loads it when the visitor scrolls down to see it. This can range from simply delaying images from loading to full-blown infinite scrolling content.
As you can imagine, loading content only when it is needed can help the site load faster when people land on your homepage. This is a great way to reduce the number of visitors who leave your site due to slow loading.
When search engine bots crawl a site, they will also take note of the speed of the site. Research has found that sites with faster load speeds generally rank better on search engine results pages.
Intuitive User Experience
Visitors would no longer have to click and wait for a new webpage to load in order to view more content. With mobile web browsing on the rise, giving users the ability to naturally and continually scroll until they find what they want is almost a no-brainer.
The Cons of Lazy Loading
Though it may seem too good to be true, there are some downsides that come along with using lazy loading on your site.
Since some content may not appear until after the user scrolls, search engines such as Google may not crawl it. However, this would be no different than if you had a fixed number of posts displaying on your site. This means the search engine may not take into account some of the high quality information that exists further down in your archives.
Poor Performance on Older Browsers
Since content only loads when users scroll, some users will have trouble viewing the content due to performance issues – especially those on older web browsers or using slow internet.
You may have noticed this if you’ve ever been on a site with lazy loading and you’ve tried to scroll down the page quickly. You have to wait a second or two for the content to show.
Moreover, users will not be able to simply navigate through the content or use the browser’s back button, when looking for previous content.
The Trick: When To Use Lazy Loading
As you can see, the benefits and disadvantages of lazy loading fall into the same areas – search engine optimization and user experience.
What you should keep in mind to get the most out of lazy loading is to use it sparingly. Try using it only on your homepage or pages with large number of images, and disable it on pages that have valuable SEO content, like single posts and pages.
Experiment and check your data using Google Analytics (for site traffic/SEO), Pingdom (for site speed), and direct user feedback.
How to Add Lazy Loading to Your WordPress Website
Fortunately, you have many options and means to set up lazy loading for your WordPress site.
You could add lazy loading by creating your own functions code. In that case, you have a few options such as lazy initialization, virtual proxies, value holders, and ghost objects. This method would give you the greatest flexibility, but is definitely not recommended for non-technical users.
However, since coding isn’t for everyone’s forte, WordPress site owners often prefer to use plugins. Luckily, there are many options to choose from that make using lazy loading a breeze.
This plugin is developed in collaboration with both Automattic and 10up. It uses jQuery.sonar by Dave Artz (AOL).
This plugin will help you create the code to lazy load your images on your WordPress site.
This plugin using unveil.js to help your site’s performance.
This adds a lightweight script that is also used by WP Rocket plugin cache.
This plugin uses jQuery to make your content load as needed by the user, which speeds up your site.
If you’re looking to continually load new content on your blog page, you’ll need a bit more firepower than the lazy-loading plugins above. Check out the Infinite Scroll function in WordPress’ Jetpack plugin or try using the Ajax Load More plugin.
You have many options to implement the lazy loading on your WordPress site. After implementation, track your ranking on Google and your site’s bounce rate. Those factors will help you determine if lazy loading is beneficial to organic search and user experience. Give it a try today and test whether or not it improves your site’s performance.
Charlie is CEO of 99 Robots – a digital marketing and WordPress agency that builds cool WP plugins, Cofounder at Gabfire Themes, and Cofounder and CTO of JuiceTank, a NJ-based startup incubator. He likes random emails from people and telling better stories. Find him somewhere in his travels.
- The benefits of cross browser testing in cloud platform - 12 January, 2021
- Beginner’s Guide to Create a WordPress Staging Site - 6 January, 2021
- Best Drag & Drop WordPress Page Builder: Compared - 5 January, 2021