Hi guys! I will be writing in this post regarding an impact of SEO to lazy loaded images as part of your website speed optimization especially in WordPress. If you wish to check my previous post of How to Change The URL of a Page or Post in WordPress, simply click here.
Back to lazy loading, you can simply add lazy loading images to you WordPress by installing a free Lazy Load plugin for FREE from WordPress Library Repository. Unfortunately, you will gain incremental speed improvement as well as add bad SEO impact to your site.
Therefore, I will provide the best lazy loading image solution that will improve your page speed and also removes all SEO negative impact from your website. Lazy loading has always been big discussion among the us, as a web designers but no one has got a proper solution to it. Luckily, one of my web designer friend introduce me the best solution to remove the negative SEO impact if you’re using lazy loading images.
I will explain what is lazy loading and the best solution in this post.
In addition, you may check my previous post regarding WordPress tips here;
- How to Change The URL of a Page or Post in WordPress
- Which Hosting is Better for WordPress – DigitalOcean or WP Engine?
- How to Create a Gravatar! Your Photo Will Be Appear Next To Your Blog Post
Lazy Loading? What exactly it is?
Basically, lazy loading will help to boosts page performance by delaying load of images in lengthy web pages because images outside of viewport (visible part of web page) won’t be loaded until user scrolls to them. Definitely, it will reduce your website page size (mostly images file contribute 80% to your total web page size) and load quite fast to your end-user.
Then, how does lazy loading works?
Lazy loading was done by using Javascript and it works by populating the src (source) attribute of img tags when the image area enters the viewport. The src attribute in img html element by default is left empty (no images URL) or else populated with a loading image (smaller in size as placeholder). Once user scroll to your contents, the src attribute will be populated with original images URL and appear to user’s viewport.
A simple lazy loaded HTML page example;
[testimonial]<!doctype html>
<html>
<head>
<!– lazy.js can be any lazy loading library –>
<script src=“lazy.js”></script>
</head>
<body>
<img src=“loading.gif” data-img-src=“https://zahidaramai.com/red.jpg”>
<img src=“loading.gif” data-img-src=“https://zahidaramai.com/pink.jpg”>
<img src=“loading.gif” data-img-src=“https://zahidaramai.com/blue.jpg”>
<img src=“loading.gif” data-img-src=“https://zahidaramai.com/yellow.jpg”>
</body>
</html>[/testimonial]
Above lazy.js detects when image enters your viewport screen and then assigns the data-img-src to the img src attribute.
Simple is it? That’s how lazy loading working on a website.
How does Lazy Loading give Negative SEO?
Unfortunately, search engines robot do crawl src attribute in img element in your html only. Since lazy loading will keep the original image URL inside data-img-src until user’s viewport enter the image area, lazy loading will give negative SEO impact. Therefore they are not crawled by search engines.
So, your images will never be found on any search engines.
Don’t you want your website to be found easily on the 1st page of search engine?
Then, how to mitigate this SEO negative impact from lazy loading while keeping your faster page loads.
Luckily, The Best Solution to Lazy Loading SEO Impact
The only best solution to remove bad negative SEO is to assign the img src attribute with the original URL. That’s all!
I can’t find any lazy loading script library out there especially WordPress Plugins that would allow lazy loading images with src attribute assigned to the original image URL. Therefore, I would recommend a Lazy Load JavaScript library called as Qazy by Narayan Prusty available in Github. Quickly check it out.
Finally, my conclusion would be….?
It would be better to have a website that load blazing fast with SEO friendly. I would never implement anything that can give bad negative impact to my client’s SEO website. Therefore, I always design websites in such a way that they are SEO friendly and loaded quickly in any devices around the world.
In my opinion, Qazy, lazy loading javascript is very powerful and available for free on Github. Please do contact me if you need my help on installing Qazy script to your website.
Stay tune for next tips!
Thanks for reading.
