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?
Lazy loading works by populating the src attribute of img tags when the image area enters the viewport. This is basically done using JavaScript. The src attribute by default is left empty or else populated with a loading image.
A simple lazy loaded HTML page example
<html>
<head>
<!-- lazyload.js can be any lazy loading library -->
<script src="lazyload.js"></script>
</head>
<body>
<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">
</body>
</html>
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
The only solution is to assign the src attribute with the original image URL. I didn’t find any lazy loading library that would lazily load images with src attribute assigned to the original image URL. Therefore I wrote my own JavaScript library called as Qazy.
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
View Demo
<html>
<head>
<title>Qazy</title>
<script> var qazy_image = "http://qnimate.com/blank.gif"; //custom placeholder </script>
<script src="https://cdn.rawgit.com/qnimate/Qazy/master/qazy.min.js"></script>
</head>
<body>
<img src="lazy-loading.jpg" data-qazy="true">
<br>
<img src="offline-web-apps.jpg" data-qazy="true">
<br>
<img src="random-color.jpg" data-qazy="true">
<br>
<img src="revel-scroll.jpg" data-qazy="true">
<br>
<img src="wordpress-fields-metaboxes.jpg" data-qazy="true">
</body>
</html>
Conclusion
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.
@narayanprusty
