Front End – Planning and Building “a performance driven and SEO friendly website” I had worked on front end technologies a long back. When I started working again after a long gap, it was quite challenging to understand the latest developments during these years. With this post, I’m trying to share my experience and learning after working on planning and building a performance driven and SEO friendly website. Keeping various learning and teaching styles in view, I’m going to cover why, what and how of the topic of discussion.
Why and what of lazy loading?
Anyone who has website wants to rank his website among top results of search engine. That is, when someone/user performs search related to a site has to offer, the owner of the website will always want to list his site among top 10 or 100 results. This will result more traffic to the site and eventually revenue growth for the owner.
A webpage load speed impacts the search engine ranking. Also, as per widely accepted research, if a webpage loads slower, the user will hesitate to visit the site in future. There have been page speed testing tools like Google Developer Page speed insights, GTmetrix, Pingdom speed test. These tools provide detailed information on different aspects. Page speed is one significant aspect of those parameters. The reason why we have discussed this here is that a developer needs to understand these parameters during the development stage. So by now, it might have been clear that a developer can delay the loading of some components like images etc. using lazy loading technique. In other words, the images will be loaded only as and when required or user comes to view that specific image over a webpage.
How to implement lazy loading?
The steps are given below:
<script src=”/path to lazysizes script” async></script>
- It is time to use the script in our image tag as below. Please note that class=”lazyload” will cause the image to load lazily. It won’t stop the page to load.
<img src=”imagepath” class=”lazyload” />
How to verify the implementation of lazy load
Once implemented and deployed over a web server, a developer can verify the impact of lazy loading by visiting any of the above mentioned page speed test tools. There is a way to verify this even without deploying over a web server ( by using “developer tools” option available in google chrome). A screenshot is enclosed below. Click on the audit tab followed by the parameters you want to perform test on and click generate report.
Thank you so much for reading thus far. I hope, you will find this blog post useful. Please feel free to suggest your feedback in the comments section. You may also ask any query regarding implementation of the same.