As a developer, one of the most important things to consider during development is site speed. It can make or break an entire business and is directly related to all of the operations that happen on or off site. If site speed is really important to you as a developer, you might have heard of a tool called Lighthouse. If not then let’s discover what it is and why its really important to your development practices.
What is Lighthouse?
Lighthouse is a tool that was released by Google in 2018 to help developers improve the quality of web pages. It is an open source and automated audit tool that can be run against any website whether it is public or requires authentication. It basically gives the developers insights on how a web crawler would assess their webpage so that they can optimize it for the best performance.
How it Works?
Lighthouse can be run from a command line, as a node module or directly from Chrome DevTools. A web address is provided as an input and then Lighthouse runs an audit of the complete website against 4 different metrics. It goes through the structure, tags and performance of the website to collect data and then give it a score from out of 100. This score can expose several weaknesses that might be causing a huge problem to the User experience. This way you can identify the problems and then sort them out accordingly.
Lighthouse audits your website on 4 different metrics.
This is calculated on the basis of how quickly your website loads. Lighthouse provides you a score on the basis of several categories including metrics, opportunities and diagnostics. These diagnostics allow developers to improve their site speed by various different methods such as deferring the downloading of unnecessary resources.
This test determines how clearly the website is visible to the users. This test is very important as it holds the highest number of metrics at 35. Google really cares for accessible content and puts it on high priority in Lighthouse audit as well. To score higher in this test, Lighthouse requires you to add proper tags to all of the content present in your website for it to be as descriptive as possible.
3. Best Practices
The SEO audit is targeted towards all the basic practices of Search Engine Optimization. Every website should at least follow these simple SEO rules to score a 100 and to get featured at a good number in the Google Search Algorithm. After you’re done with optimizing your website, SEO offers multiple other improvements that should definitely be explored.
Tips to improve your score
Here are some tips that you can apply for a higher Lighthouse score:
- All images should be optimized. I recommend using them in webp format for low size and better quality.
- Remove redundant or unnecessary code
- Follow the WCAG to improve accessibility throughout the design
- Don’t use any unnecessary widgets or extensions
- Load the FCP(First Contentful Paint) as fast as you can
- Add descriptions to all links
- Add images at multiple sizes so that only the minimum size is loaded
- Minify your resources
- Use ARIA or Alt tags for all images
- Go for Server Side Rendering for faster load times
Taking care of each and every one of these metrics can be quite time consuming and tedious, that’s why I recommend using code snippets from blox as they come with baked-in accessibility with best development practices so that you can save the time and focus on your productivity. Let me know what tricks you’ve used to improve the score of your webpage.
Top comments (5)
Good read and Nice descriptive article.
one correction: Use ARIA or Alt tags for all images -> ARIA tags are not required for image and alt tags are not required for the presentational images and for images which is surrounded by the text describing the image :)
Thanks for pointing it out! Rookie mistake xD
Thanks for this post as i was watching a video about lighthouse but didn't understood, but this helped me a lot.
Keep it up !
Thanks for this article. Very helpful :-)