Front End – Planning and Building “a performance driven and SEO friendly website”

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.

As mentioned in the previous post ( JavaScript Development Best Practices ), we will expand details of some of the topics like lazy loading, image handling strategy, DOM size, compressing the request and response data.

How to lazy load images, javascript or css of front end pages

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:

  1. Download the lazysizes javascript file from link . Though CDN path can also be referred in the script tag, it is better to download and keep it in your static/pulibc/scripts folder. This will avoid dependency on third party resources.
  2. Call this script from within header tag of your webpage. Please note the async attribute in the following code snippet. This will help to load the javascript file asynchronously i.e. it will not block the complete page load. In other words, page will load a little faster.

<script src=”/path to lazysizes script” async></script>

  1. 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.

Fig 1 : Audit of any webpage for various parameters

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.

Resources:

https://web.dev/use-lazysizes-to-lazyload-images/ https://github.com/aFarkas/lazysizes

2 thoughts on “Front End – Planning and Building “a performance driven and SEO friendly website”

  1. Ravinder Negi
    April 20, 2020 at 3:14 pm

    Thank you so much Faras for your encouraging words. The objective is to share gained knowledge with the community.

  2. Faras Mohan Dewal
    April 19, 2020 at 3:02 pm

    Good fact check list… a core of almost any project. Thank you, Neeraj for sharing.

Leave a Reply

Your email address will not be published. Required fields are marked *