back to thedrum.com
Every marketer knows how important it is to have a high performing website. After all, a slow or user-unfriendly website that does not meet customer expectations will cost you that customer.
But how exactly can you measure and streamline your site’s performance? That’s where Google Lighthouse comes into play.
Since its launch back in 2016, Google Lighthouse has grown to be a valuable go-to tool for marketers to improve their website performance and visibility. In this article I’ll dig into what Google Lighthouse exactly is, what the benefits are and how you can maximize your score.
Google describes Lighthouse as an “open-source, automated tool for improving the quality of web pages.” The tool runs audits for the following five key pillars:
Lighthouse tracks six metrics that capture different aspects of page load speed, such as how long it takes for the page to become fully interactive and visual load time.
The tool checks if users can access content and navigate your web page effectively. For example, does your web page contain headings, landmark regions and do background and foreground colors have a good contrast ratio?
Lighthouse also looks at SEO best practices to ensure your site is easily discoverable. Think of meta descriptions, indexing and mobile-friendliness.
It checks your web page against a set of criteria which defines PWAs, like page load on mobile networks, redirecting HTTP traffic to HTTPS and the configuration for a custom splash screen.
Last, but not least, Lighthouse inspects the overall code health of your web page to ensure you’re following best practices. For example, are your image display ratios correct, do you have an HTML doctype and are browser errors logged to the console?
Lighthouse provides a holistic overview of the quality of a user’s experience on a particular web page. The tool will generate a report with actionable recommendations and opportunities for optimization that provide detailed suggestions and examples to guide you. In short, it will give you everything you need to make improvements on your site’s performance.
Once Lighthouse has gathered the performance metrics, it maps each score for the key pillars mentioned above to a number between 0 and 100. A score of below 90 means that your web page isn’t performing well. But don’t worry! These five tips got you covered and will help you boost your score:
PWAs are all about fast, reliable and engaging web experiences. You will notice that if you score high on PWA, your performance score will automatically be high too.
Web.dev offers an online version of Lighthouse where you can test your site to see how well it performs across all audits (except PWA). Like the tool itself, web.dev generates a report through which you get insights and guidance on how to improve your site. As mentioned Lighthouse runs audits against a single page, we recommend that you prioritize your most visited and important pages such as your homepage.
Images and videos can be the culprit of a bad score, because they can significantly affect your page load time. The lazy loading technique reduces the loading time by delaying the visual load until the page is rendered and letting the visuals appear as users scroll through the page. We used this technique for one of our clients Waterstoring.nl and were able to boost the scores to 90+ during a major refactoring.
Code splitting is a technique to reduce JavaScript payload by splitting the bundle into smaller chunks and only sending what's necessary at the beginning. It minimizes the amount of script that needs to be analyzed and compiled, which results in faster page load times. Server-side rendering is a popular technique for crawlers to index your website faster.
Lighthouse CI was released last year and helps prevent regressions in your score. The tool warns you about possible problems that can lower your site’s performance and helps you identify and solve them. We believe it’s a valuable tool for testing new website releases with before pushing it live.
Website performance is a key pillar in your customer experience that should not be overlooked. Google Lighthouse is not even a question for us anymore, it’s one of our go-to tools for developing and optimizing websites. Our advice? Make it one of your go-to tools too.
Written by Bill Marks, Chief Technology Officer at DPDK Digital Agency
The original article can be found at https://dpdk.com/stories/5-tips-boost-your-google-lighthouse-score-and-improve-website-performance
