Improving website performance, and how to get a score of 100 in Lighthouse and Pagespeed reports
I spent couple of hours this weekend trying to optimise finotes.com. Objective was to achieve a decent performance and SEO score in lighthouse report.
Finotes.com is a simple product website that was initially built using Wordpress. While wordpress is an excellent framework for building websites, we decided our’s does not need most of the capabilities Wordpress offered. Also it demanded more time and effort in optimising the performance. Of course we are not Wordpress experts.
So we moved our blog https://blog.finotes.com to Wix. The finotes.com website was rebuilt using HTML, CSS, Javascript, Bootstrap and JQuery. Yes, it is the old way of doing websites.
This weekend I decided to focus on getting a good lighthouse score. Here are the important things that I did.
1. Combined all CSS files
In our case, we had custom CSS and Bootstrap. Combined both into one CSS file with Bootstrap code as the first section and custom CSS next. That way you can keep adding the custom CSS to the end of the file.
Number of HTTP requests down by one.
2. Combined all Javascript files
We use JQuery, some Bootstrap related scripts and custom scripts. Combined all three into one file with JQuery as the first section, Bootstrap next and custom script last.
Number of HTTP requests down by another two.
3. Used SVG sprites for icons
Our website uses 54 SVG icons to denote various items. We combined all of them to create a single SVG sprite. This helped in reducing that many number of http requests required to fetch the icons. There are many sprite creators available online. We used https://svgsprit.es.
4. Lazy loading of images
All the images are loaded lazily as the scroll reaches near the image. This helped in reducing the initial load time and network transfer.
5. Minimised script and CSS files, GZIP
We minified both the Javascript file and the CSS file. This saved much bandwidth. Also all the content are GZIPed.
6. Delay loading of third party scripts till visitor accepts cookie policy
We use Google Analytics (through Google tag manager), Google reCaptcha V3 and Chatwoot. All of them uses cookies as soon as they are loaded. So it makes sense to load them only after the visitor accepted the cookie policy. We made sure all such scripts are loaded only in such fashion. This helped to reduce the initial loading time and initial script execution time.
7. No complex frameworks
Other than Bootstrap and JQuery, finotes.com is not based on any website framework. This means the site is lightweight. I understand that this may not work for most websites as building using vanilla HTML, CSS and javascript comes with its own challenges, especially if it is a complex website.
8. Stick to HTML 5 Spec and follow best practices
This is very important. To the best of our knowledge we adhered to the HTML5 spec. This included proper alt tags for images, ensuring accessibility and following best practices. You will get an idea if you take a look at the lighthouse report before you start working on optimisations.
Performance improved, and scored a perfect 100 in lighthouse report.
The result was beyond what we expected. Performance improved and the site is now loading in a fraction of a second. Here are the reports from various website performance analysis tools.
- Scored 100 in Lighthouse report
2. Scored 100 for Desktop in Pagespeed
3. Scored 100 for mobile in Pagespeed
4. Grade A in GTMetrix
Conclusion
I am not an expert in SEO or website performance. But if there is one thing I learned from this activity, it is that we do not need to be one. Focusing on standards and specs will help much in improving the performance and SEO score of the websites.
Go for it. It’s fun.
