Why load more data than we can display?
A fast website is more sustainable and generally more efficient in attracting more users who can find what they need quickly and easily. But, if the images are not optimized properly, they can also result in a significant load that can slow down page load, responsiveness, and more.
According to Akamai, 47 percent of the visitors expect a web page to load within two seconds or less. If a page takes more than 3 seconds to load, 40 percent of the visitors will leave the website. Furthermore, a 1-second delay can cost a 7 percent decline in sales. Because:
No one wants to “wait” for a web page to load.
Not only this, the search engine giant, Google, also prefers websites that have fast loading times of less than 2-3 seconds.
Typically, a web or a WordPress post/page consists of multiple page contents that include HTML, CSS, JavaScript, images, videos, comments etc. Generally, there are a number of ways to speed up a WordPress website, but most of the techniques range from minimizing the code to lazy load technique on WordPress.
In this guide, we will explain lazy loading, its advantages/disadvantages, use cases, and then show you how to lazy load WordPress images, videos, comments and use infinite scroll.
What Is a Lazy Load?
When a visitor opens a web page, the entire page’s contents start downloading and rendering, no matter, how heavy the content it has. There are chances that a visitor closes a web page after viewing the first fold only.
Visiting a page consumes bandwidth and uses memory to save the cached data. Quitting the page very quickly may result in wasted memory and bandwidth. This is where lazy load jumps in:
Lazy loading is a technique for loading web content when it’s needed rather than all at once.
By using lazy loading technique, the page contents are loaded only as they become visible in the viewport (screen).
How Does Lazy Loading Work?
Basically, lazy loading put a reference src attribute to the lazily loaded web page resources (image, video, etc.), and add another attribute for the original content, then uses JavaScript to detect the visitors’ scroll position of a page. When the scroll position is nearest to a reference object, it replaces the reference src attribute with the actual src and loads the content.
For instance, if a visitor opens a web page and leaves it immediately, then nothing beyond the top portion of a web page is loaded.
Loading assets on runtime reduce the number of requests a page has to send to the server for the initial load, resulting, faster and minimal communication between the hosting server and the visitor on a one go.
Does Lazy Load Affect SEO?
The Lazy Load is not SEO-Friendly (at least as of the time of writing this guide). Since the content (Images, Videos, Comments etc) aren’t loaded initially for visitors, the same flow is for search engine spiders. There is a possibility that a few of the Lazy Loaded content (image, videos) may not index in 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.
The search engine giant, 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 the GoogleBot.
Does Media Slow Down Websites?
Images and videos are part of the web content elements of a web page. Thus, Yes, the impact on the loading time.
The heavier a web page size is, the more time it will take to load.
Therefore, it is always suggested to optimize images before uploading them to a WordPress site. You can use WP Compress, ShortPixel, WP Smush It etc. to reduce the image size.
Also, specify the image dimensions, like if you have an image of 1000×1000 px but you scaled it to 100×100 px, the browser will load ten times more than necessary. Additionally, avoid the complex file formats like TIFF, BMP etc, because the browsers can load JPG, PNG, and GIF images quickly.
Should You Use Lazy Load?
This is the era of speed!
Every visitor expects a web page to load in the blink of an eye. You need to keep finding ways to improve page load times and lazy loading is one of the ways to do so.
With the massive growth of mobile users, more than 52% of the worldwide traffic is served via smartphones. One should definitely consider mobile users while optimizing a WordPress website.
3 Use Cases of Lazy Load
Most of the times, the lazy load is used for images, but this is not limited to images only. It can be used to integrate with videos, comments, scripts, etc. The Internet giants are already using lazy load in one way or other. Here are a few of them:
-
Medium
If you have ever 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 expect that an image is loading. This improves the user experience by showing some of the initially loaded contents to keep visitor’s attention.
-
YouTube
By default, the very first thing YouTube shows is the video you intend to watch and does not load comments and thumbnails of other suggested videos on the initial load. When you start scrolling, it will start loading the lazily loaded items like thumbnails and comments. This way, the visitor does not have to wait for an entire page to load. He can start watching the video right away.
-
Google Images
You might have observed that, when you search for an image on Google, it replaces placeholder images with thumbnails, and after displaying a number of images loads more images. Google uses a different approach to combining infinite scrolling and lazy loading to improve its search results.
Add Lazy Load to a WordPress Website
You can reduce the number of requests by implementing a lazy loading technique in a WordPress website that helps reduce server response time resulting in faster page loading experience.
Implementing lazy load in WordPress content is not that technical, thanks to the WordPress Community for their contributions.
-
WordPress Lazy Load Plugins
If you search “lazy load” in the WordPress plugins directory, you will come across a number of plugins. But for this guide, I choose a3 Lazy Load, one of the most popular, feature-rich, and widely used plugins to implement lazy load technique in a WordPress website.
-
WordPress Lazy Load Images
Images are resource-intensive and consume a lot of bandwidth and storage space. With a3 Lazy Load plugin, you can toggle between the ON/OFF. Not only this, when the lazy load for images is turned on you can control where it should work that includes:
- 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 lazy load images only, it also allows you to lazy load videos too. It supports all WordPress video embeds that use iFrames to load videos on the initial load. Again, it contains toggles for ON/OFF. If 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 widget, and HTML widgets
- Fully Compatible with the popular YouTube Embed Plugin
-
WordPress Lazy Load Comments
There are a number of WordPress comment plugins that are used by most of the WordPress users. Lazy loading can be applied to many of them by using different WordPress lazy load plugins:
-
-
More Lazy Load Plugins for WordPress
-
Besides a3 Lazy Load, there are a number of useful plugins which can consider:
- a3 Lazy Load
- 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
WordPress Infinite Scroll
As the name suggests, infinite scroll automatically adds the next page saving your time from a full page to load at once. For example, you have likely experienced it in Facebook Newsfeed. You just keep scrolling down and the feed automatically gets updated rather than the entire page load.
In WordPress, you can implement this by using Download WordPress Infinite Scroll – Ajax Load More plugin. It is used to lazy load posts, single posts, pages, comments and more with AJAX-powered queries.
Not only this, but it is also useful for endless scrolling with popular ecommerce plugins such as WooCommerce and Easy Digital Downloads that display thousands of products without loading the entire web page.
Google Chrome May Integrate Lazy Load by Default
Google is working to make lazily loaded content more accessible. It is also experimenting with the possibilities to add support for lazy load in Google Chrome. So it will only load the parts of pages that are currently displayed on the screen and everything “below the fold” will be loaded as you scroll down.
Currently, it is available to test on Google Chrome Canary, an early-release version intended for developers and early adopters. To give it a try, download Canary, then enter below in the address bar:
- chrome://flags/#enable-lazy-image-loading
- chrome://flags/#enable-lazy-frame-loading
When these flags are active, Google Chrome won’t load any images or iFrames that aren’t currently visible on the screen. It will help to load web pages faster in Google Chrome and will reduce the bandwidth use, making it a particularly useful feature for mobile browsers. Go ahead and serve your mobile visitors in a more better way!
Frequently Asked Questions
Q. What is lazy loading in WordPress?
Lazy loading in WordPress helps the web page to load faster. It loads the images only when the user reaches that section and not before that.
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; browser 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 Lazy Load Images in WordPress?
Lazy loading only loads the images inside the viewport and not all the images on a web page to help reduce the initial load time.
Start Growing with Cloudways Today!
We never compromise on performance, security, and support.
Mustaasam Saleem
Mustaasam is the WordPress Community Manager at Cloudways – A Managed WordPress Hosting Platform, where he actively works and loves sharing his knowledge with the WordPress Community. When he is not working, you can find him playing squash with his friends, or defending in Football, and listening to music. You can email him at [email protected]
Keep reading the article at The Official Cloudways Blog. The article was originally written by Mustaasam Saleem on 2020-02-21 01:22:55.
The article was hand-picked and curated for you by the Editorial Team of WP Archives.