Why do you speed up WordPress website loading when Lazy Load? - A fast loading site is more sustainable and is often more effective at attracting more users to find what they need quickly and easily. But, if images are not properly optimized, they can also result in significant loading that can slow down page loads, responsiveness and more.
Not only that, the search engine giant, Google, also likes websites that load quickly in under 2-3 seconds.
Usually, a website or a WordPress post / page includes many page content including HTML, CSS, JavaScript, images, videos, comments, etc.In general, there are several ways to speed up a WordPress website. , but most techniques range from code reduction to Lazy Load techniques on WordPress.
In this tutorial, we'll explain Lazy Load, its advantages / disadvantages, use cases, and then show you. way Lazy Load images, videos, comments WordPress and use infinite scroll
What is Lazy Load?
When a visitor opens a web page, the entire contents of the page begin to download and display, regardless of how heavy the content is. It is more likely that a visitor closes a webpage after viewing it for the first time.
Accessing a page consumes bandwidth and uses memory to store cached data. Exiting a page very quickly can result in wasted memory and bandwidth. Here's where Lazy Load works: Quick loading is a technique for loading web content when needed, not all at once.
By using the Lazy Load technique, page content is only loaded when they are displayed in the view (screen).
How does fast loading work?
Basically, Lazy Load sets properties src reference the website resource that loads Lazy Load (images, videos, etc.) and add another attribute to the original content, then use JavaScript to detect the scrolling position of visitors of the page. When the scroll position is closest to a reference object, it replaces the attribute src referenced by src Actual and content download.
For example, if a visitor opens a web page and leaves immediately, then nothing but the top of the page is loaded.
Loading assets at runtime reduces the number of requests that a page must send to the server for initial loading, resulting in faster and minimal communication between the WordPress host server and one-time visitors.
Does Lazy Load affect SEO?
Lazy Load is not SEO friendly (at least at the time of writing this tutorial). Because the content (Images, Videos, Comments, etc.) is not initially downloaded to the visitor, the same stream is for search engines. It is possible that some Lazy Loaded content (images, videos) may not be indexed in Google's images / videos section, which is not good from an SEO perspective.
Workarounds do exist, like adding links to your Lazy Loaded content. In this way, Google will take it as a standard website and index the content accordingly. However, visitors will still see a site called Lazy Loaded.
The search engine giant, Google is working and preparing help materials around how people can take advantage of Lazy Loading and download Lazy Loaded content that GoogleBot can explore.
Images and videos are part of the site's web content elements. Therefore, Yes, affects load time.
The heavier the web page size, the longer it will take to load.
Therefore, it is always recommended 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 an image size, like if you have an image of 1000 × 1000 px but you've shrunk it to 100 × 100 px, the browser will load ten times as much as needed. Also, avoid complicated file formats like TIFF, BMP, etc., as 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 a flash. You need to keep looking for ways to improve page load time and Lazy Loadi is one way to do that.
With the strong growth of mobile users, more than 52% Traffic around the world is served via smartphone. One should definitely consider mobile users while optimizing a WordPress site.
3 cases of slow loading
Most of the time, 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. Internet giants have used Lazy Load in one way or another. Here are a few of them:
Medium
If you've ever visited Medium, you have to observe that it displays a dim placeholder for Lazy Load images until the high resolution images are actually fully loaded, so visitors expect that the image is being loaded. This improves the user experience by displaying some of the content initially loaded to keep visitors' attention.
YouTube
By default, the first thing YouTube displays is the video you plan to watch and not download comments and thumbnails of other suggested videos on the initial load. When you start scrolling, it will start loading Lazy Load items as thumbnails and comments. This way, visitors don't have to wait for the entire page to load. He can start watching the video right away.
Google images
You may have observed that, when you search for an image on Google, it will replace the placeholder image with a thumbnail and after displaying some images will load more images. Google uses a different approach to combine infinite scrolling and Lazy Load to improve its search results.
Add Lazy Load to WordPress website
You can reduce the number of requests by implementing the Lazy Load technique in the WordPress website to help reduce server response time leading to a faster page loading experience.
The implementation of Lazy Load in WordPress content is not technical, thanks to the WordPress Community for their contributions.
Lazy Load WordPress Plugin
If you search, Lazy Load in WordPress plugin directory, you will come across some plugins. But for this tutorial, I choose a3 Lazy Load , one of the most popular, feature-rich and widely used plugins to implement Lazy Load technique in WordPress website.
WordPress Lazy Load
Images consume a lot of resources and consume a lot of bandwidth and storage space. With the a3 Lazy Load plugin, you can switch between ON / OFF. Not only this, when Lazy Load for images is turned on, you can control where it will work including:
- Post, page and custom post type (all content areas)
- Widgets (sidebar, title and footer)
- Apply to post thumbnails
- Applies to Gravatars
WordPress downloads videos and iFrames
a3 Lazy Load is not limited to the lazy loading mode, it also allows you to lazy download videos. It supports all WordPress embedded videos that use iFrames to download videos on initial downloads. Again, it contains on / off buttons. If enabled, you can control the areas mentioned below:
- Video embedded by URL in post and page (all content areas)
- Videos in gadget types, text widgets, and HTML widgets
- Fully compatible with the popular YouTube Embedded Plugin
Download Lazy Load WordPress
There are several WordPress commenting plugins used by most WordPress users. Lazy Load can be applied to many of them by using various Lazy Load plugins of WordPress:
- For WordPress default comments, you can use Lazy Load for Comments
- For comments about Disqus, you can use Condqus Conditional Download
- For comments on Facebook, you can use Facebook Comments Lazy Load
The plugin loads faster for WordPress
Besides a3 Lazy Load, there are some useful plugins to consider:
- a3 Download is slow
- Download Lazy Load
- WordPress Infinite Scroll - Ajax Download more
- Lazy Load by WP Rocket
- Download more products for WooC Commerce
- Load slowly for comments
- Disqus Conditional Load
- Lazy Load for video
As the name suggests, infinite scrolling will automatically add the next page saving your time from a full page to load at once. For example, you may have experienced it in Facebook Newsfeed. Just keep scrolling down and the feed will automatically be updated instead of the entire page load.
In WordPress, you can do this by using the Download WordPress Infinite Scroll - Ajax Load More plugin. It is used for Lazy Load to load posts, single posts, pages, comments and more with queries provided by AJAX.
Not only this, but it is also useful for endless scrolling with popular ecommerce plugins like WooC Commerce and Easy Digital Download displaying thousands of products without downloading the entire site.
Google Chrome can integrate Lazy Load by default
Google is working to make content loaded in a Lazy Load more accessible. It is also testing capabilities to add support for Lazy Load in Google Chrome. So it will only load parts of the page currently displayed on the screen and everything else below the fold will load when you scroll down.
It is currently available for testing on Google Chrome Canary, early release for developers and early adopters. To try it out, download Canary, then enter it below in the address bar:
- chrome: // flags / # enable-lazy-image-load
- chrome: // flags / # enable-lazy-frame-load
When these flags work, Google Chrome will not load any images or iFrams that are not currently displayed on the screen. It will help load web pages faster in Google Chrome and will reduce bandwidth usage, making it an especially useful feature for mobile browsers. Go ahead and serve your mobile visitors in a better way!
0 Comments