Introduction to testing web apps using Lighthouse
Introduction:
I already have an article up on how I have improved page load times of projects shortening it by 100% - 200% by writing minimum code and by finding code being called the most number of times to find out choke points in the server code and the database.
But for now, I would take a look back on how we can do the same optimization now. As a saying goes, in literature go for the oldest while in technology go for the latest. Many browsers especially Chrome now better cater to developers and have provided tools to monitor application performance and provide detailed instructions on how to improve your applications both for speed and accessibility.
I recently launched my personal website www.ashutoshysingh.com and was curious to see how I could I improve it's speed. Luckily, Google Chrome comes with step by step instructions on how to better the metrics. I have improved upon most of the metrics but will continue to look into others to see where I can affect maximum gain for my time. Also, in my journey, I got to learn a lot about service workers and best practices which is of immeasurable value.
Tooling:
Chrome comes with powerful tools like Lighthouse baked in which can audit web applications. As an engineer, I like metrics and want to make my decisions based on them rather than some vague notions of best practices. Hence I am always on the lookout for tools which I can use and when your browser comes fitted with most of the tools, there is nothing better. Previously, I used websites like PageSpeed Insights and WebPageTest to test. But now it is easier to use tools like Jenkins and Grunt to build a CI pipeline to run these tests automatically to prevent regression.
Things I worked upon -
1. Performance: This is the most important of all the audits. Many users now use mobile to open websites and suffer from poor quality network connections. Lighthouse can simulate a 3G connection and slow CPU to test performance on mobile. It captures cool metrics and provides steps on what to improve. As is a best practice, I load all scripts in the body and all styles in the head. But the audit led me to look at images I loaded above the page fold and at the next-gen formats which reduced the size even further.
2. Progressive Web App: PWA is a way of making user experience on the website similar to a native mobile app. This was a topic which I knew the least I took my time to understand service workers and how and when to use them. I decided to create one for my website. I saved everything in the cache and load it from there if the server is not accessible. I also created a web manifest to improve the functionality of website on mobile.
3. Accessibility: Accessibility is a topic least focused on but is very important to ensure that users with impairments can have a good experience. This typically involves making sure that websites can be accessible to screen readers and can be operated by just a keyboard. But the audit showed other factors such as improving color contrast and making the font bigger.
4. Best practices: This section showed best practices that should be followed. I was shocked to see scripts on my site were vulnerable to security issues. This is a very important metric because it is difficult to keep track of continuously, Lighthouse uses Synk to do this. I tried updating libraries to the latest versions but because of the dependency chain and lack of support in all browsers, I could not use the latest version of all the libraries. I will keep tracking this issue and replace some or all of these libraries without sacrificing either functionality or design.
5. SEO: This test checks for meta tags and if certain pages are blocked by robots.txt. I found out that I had already optimized the site for best SEO by putting appropriate meta tags. But since performance is also a factor in SEO (See Website Speed Impact on SEO), improving performance will directly impact SEO.
Site metrics by Lighthouse on my PC for my website:
Note: Depending on your network speed and the environment, if you re-run these tests, the performance metrics may be slightly different.
Lighthouse can be run from Chrome Developer tools, as an extension and from the command line as part of CI pipeline. To learn more about using Lighthouse see Using Lighthouse To Improve Page Load Performance.
Your comments and likes are invaluable to me and encourages me to improve! Please comment on how you use performance tools and what tools you use in your development pipeline.
Edit:
- After finishing this article, I came across and completed a Website Performance Optimization course on Udacity. This is highly recommended and will explain an important concept, Critical Rendering Path.
- I have added service worker to my website and made a few changes to my website.After these changes, the stats of these tests can be viewed at https://drive.google.com/open?id=18M3J6Pg38cwNEgqh_dDIoSF5H4xIy69N.