DEV Community

Cover image for Improve your Lighthouse Score today

Posted on


Improve your Lighthouse Score today

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?

Google LighthouseLighthouse 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.

Audit Metrics

Lighthouse audits your website on 4 different metrics.

1. Performance

Google Lighthouse Performance scoreThis 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.

2. Accessibility

Google Lighthouse Accessibility ScoreThis 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

Google Lighthouse Best Practices ScoreThere are a total of 16 metrics that are included in Best Practices and are targeted towards Website Security and the modern standards of Web Development. In order to score higher in this, developers need to stay up to date with all the modern development practices and avoid using resources from unsecure resources and not leaving the javascript libraries vulnerable.

4. SEO

Google Lighthouse SEO ScoreThe 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.

Happy Developing!

Top comments (5)

hellonehha profile image
Neha Sharma

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 :)

harishash profile image

Thanks for pointing it out! Rookie mistake xD

spandan profile image

Thanks for this post as i was watching a video about lighthouse but didn't understood, but this helped me a lot.
Nice Post
Keep it up !

harishash profile image

Thanks man!

fredericdasilva profile image

Thanks for this article. Very helpful :-)

Super Useful CSS Resources

A collection of 70 hand-picked, web-based tools which are actually useful.
Each will generate pure CSS without the need for JS or any external libraries.