In this post I will provide the best lazy loading solution that maximizes page speed and also removes all SEO negative impact. Lazy loading has always been a discussion among the web designers but no one has got a proper solution to it. I will present the best solution to lazy loading in this post.
What is Lazy Loading?
Lazy loading boosts performance delaying loading of images in long web pages because images outside of viewport (visible part of web page) won’t be loaded until the user scrolls to them.
How does lazy loading works?
A simple lazy loaded HTML page example
<!-- lazyload.js can be any lazy loading library -->
<img src="blank.gif" data-img-src="http://qnimate.com/1.png">
<img src="blank.gif" data-img-src="http://qnimate.com/2.png">
<img src="blank.gif" data-img-src="http://qnimate.com/3.png">
<img src="blank.gif" data-img-src="http://qnimate.com/4.png">
Here lazyload.js detects when image enters viewport and then assigns the data-img-src to the img src attribute.
SEO Impact of Lazy Loading
Lazy loading has a negative SEO impact. Lazily loaded images are not crawled by search engines. Search engines look for image URLs in the src attribute, but here the src attribute is not assigned with the original image url therefore they are not crawled.
Therefore your images will never found on any search engines.
Solution To Lazy Loading SEO Impact
How does Qazy Works?
Qazy stops browser from fetching images until the images enters the viewport. Qazy script needs to be loaded as soon as possible in the webpage so that it can start tracking the images and load them lazily.
Here is example code on how to use Qazy
<script> var qazy_image = "http://qnimate.com/blank.gif"; //custom placeholder </script>
<img src="lazy-loading.jpg" data-qazy="true">
<img src="offline-web-apps.jpg" data-qazy="true">
<img src="random-color.jpg" data-qazy="true">
<img src="revel-scroll.jpg" data-qazy="true">
<img src="wordpress-fields-metaboxes.jpg" data-qazy="true">
Its always better to make your websites SEO friendly. I always design websites in such a way that they are SEO friends and provide a awesome user experience in multi devices. For me Qazy is very helpful. Thanks for reading. Please Like and Share.