One of the leading tools for gauging website performance is Lighthouse, an open-source tool released by Google that can be used to evaluate a website based on a number of criteria, including accessibility, performance, SEO best practices, and more. Chief among those criteria are what Google calls Core Web Vitals (which we’ll discuss in more detail below), which can have an impact on search results for your website. In the interest of giving your website the best possible opportunity for ranking well in Google search, it pays to use the Lighthouse tool to examine your site and see how it can be improved.
A quick and important aside: It’s impossible to understate how important quality, original content is to any website when it comes to getting good search results. Google has repeatedly stressed that their goal is to deliver the best possible quality content in response to user searches, so if your content is sub-standard, you should focus on fixing that issue first. In the words of Gatsby Technical Lead Ward Peeters, “Performance is not everything. If your website is fast – but your content is crap – good luck with your search rankings!”
- Related: More website performance resources
In the interest of giving you the most useful information related to improving website Lighthouse scores, I’ve structured this article into three sections. The first section explains a bit more about what Lighthouse is, how it works, and how you can use it. The second section provides tips and suggestions for improving your Lighthouse scores regardless of what tools, platforms, technologies, and frameworks you’re using to power your site. The final section is dedicated to providing tips and techniques specific to websites created with the Gatsby web framework and the Gatsby Cloud hosting service (which is the best way to host any Gatsby-powered website.) Let’s get started by talking about the what, why, and how of the Lighthouse tool itself.
What is Lighthouse?
Lighthouse was developed by Google (with community input and coding help) to be a tool that web developers can use to quickly evaluate the performance of their websites. The stark reality is that the performance of your website – or lack thereof – can have a huge impact on a host of vital factors, including user experience, how much traffic your website receives, and can ultimately impact sales and conversion rates. To address adverse performance impacts like those, Lighthouse is designed to help web developers make faster websites.
How to Use Lighthouse to Audit a Website
There are a number of ways to run a Lighthouse audit on your website, with the simplest being a visit to the Google PageSpeed Insights website. PageSpeed Insights is powered by Lighthouse, and is the easiest/quickest way to get a Lighthouse score for any website. Another method is to use Chrome DevTools, and you can also run Lighthouse from the command line and via shell scripts. Finally, you can also run Lighthouse as a node module.
What does Lighthouse look for in an audit?
When you perform a Lighthouse audit of a website, it generates a report that is guided by what Google calls Core Web Vitals. Here’s how Google describes Core Web Vitals:
“Core Web Vitals are the subset of Web Vitals that apply to all web pages, should be measured by all site owners, and will be surfaced across all Google tools. Each of the Core Web Vitals represents a distinct facet of the user experience, is measurable in the field, and reflects the real-world experience of a critical user-centric outcome.” (source)
Google has established three primary core web vital metrics: Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS). I’ll discuss each of these in more detail, and also provide a link to a more detailed Google technical description if you’d like more details on how each metric works.
Largest Contentful Paint (LCP): Google says that LCP measures loading performance, and that a site scoring well in this category should load faster than 2.5 seconds. (Google LCP detail)
First Input Delay (FID): The FID metric is intended to measure interactivity, and measures when a user can first begin interacting with a web page. Google suggests that pages should have an FID value of 100 milliseconds or less. (Google FID detail). Note: FID isn’t directly measured by Lighthouse, as FID requires data from real users. Instead, Lighthouse uses Total Blocking Time (TBT) as a metric to predict possible issues that could impact FID site ratings. Find out more about this metric in Google’s TBT explainer.
Cumulative Layout Shift (CLS): This final metric measures visual stability, which translates into when the full layout of the page is visible and usable, without disrupting the user experience with ads, navigation, and other page elements loading at the last minute. (Google CLS detail)
- Related: Understanding Google’s Core Web Vitals Search Update (Webinar)
Universal Lighthouse Website Optimization Tips
So what are some of the best ways to make sure your website gets a good Lighthouse score? Regardless of what your underlying webstack might be, here are some steps you can take that – if followed diligently – should improve your lighthouse rankings. This is by no means an exhaustive list, but the items listed here are a great place to start.
Please Note: Lighthouse primarily focuses on website performance. It’s important to note that the Lighthouse score you see is only a measure from performance audits. Some elements may not be directly correlated with your Lighthouse score, but there are still compelling reasons to optimize those aspects of your website to deliver the best quality experience for your site visitors. For example, following SEO best practices like using quality original content, the correct use of title tags, meta descriptions, structured page formatting, and other on-page SEO optimization may not directly contribute to your Lighthouse score, but there’s still very compelling reasons to implement those suggestions. Covering everything you can do here is outside the scope of this article, but Google has some excellent resources that are essential reading in this area, including a quickstart on Google search, SEO for beginners, and advice on advanced SEO topics.
With some basics and caveats out of the way, let’s get started by discussing some tips on how you can optimize the Lighthouse scores of any website, regardless of the underlying technology stack.
Optimize images: Using quality, original artwork, photos, and other images is a good first step, but you also need to make sure your images are optimized for web use. You should resize and compress your source images to reduce image sizes, and try to use image-related metadata consistently throughout your site, including alt descriptions and captions. You should also choose the best image file format for your specific use case; a great resource on image file type optimization is Google’s Pagespeed Insights optimize images detail page.
Reduce page bloat: Many slow websites are sluggish thanks to 3rd party scripts, tools, and other add-ons that get loaded as your website is loading for your site visitors. Having a site choked with a surplus of 3rd party advertising, unneeded or outdated plugins, and outsized HTML, CSS, or JavaScript files can add seconds to page load speeds. Note: If you’re using a modern JavaScript framework like React or Gatsby, a great deal of JavaScript minification happens within the framework itself. Here’s a list of some of the more popular utilities to help you reduce HTML, CSS, and JavaScript file sizes.
- HTML
- CSS
- JavaScript
Follow progressive web app standards: Over the last few years, the concept of the progressive web app (PWA) has emerged as a best practice in web development circles. A PWA is a mobile website that feels like an app, and primarily focuses on giving users a native app-like experience across a wide variety of devices and form factors, from (primarily) mobile phones and tablets to desktops, laptops, and smart TVs. Google has an excellent article on Progressive Web Apps that should be a must-read for any web developer looking to understand what the PWA model is all about.
Use on-demand loading (aka “Lazy Loading”): Lazy-Loading is a method whereby essential code is split from non-essential code, which reduces the initial download size of the JavaScript bundle and can help reduce the Total Blocking Time. After the initial page load is complete a second JavaScript bundle will be downloaded. You can read more about code-splitting in the React docs.
Minimize the use of custom fonts: Some website designs feature a bevy of gorgeous, custom fonts that may look fantastic on screen, but can add lots of extra time to page load speed as those extra font files have to be loaded by a site visitor’s browser. In general, it’s a good idea to limit the number of custom fonts that every page loads, and to rely primarily on standard, browser-supported fonts like Embedded Open Type (EOT), True Type Fonts (TTF), Web Open Font Format 1.0 (WOFF), and Web Open Font Format 2.0 (WOFF2) for the bulk of your page copy.
Remove unneeded site features: There’s absolute value in taking a hard look at your website, evaluating each element, and determining if it really needs to be there. Removing even the smallest of page elements can sometimes have drastic consequences for page loading speed, so it’s a good idea to take a rigorous approach to removing unneeded site elements.
Delay everything that isn’t critical: Another useful tip is to delay loading any page elements that aren’t critical to your user content. This tip is a corollary to “remove unneeded site features” listed above: If you can’t remove or eliminate a site element, then it helps – in most cases – to delay loading it.
Why Gatsby is so Fast: Native Performance Features
We’ve made performance a priority here at Gatsby, so the Gatsby framework (and Gatsby Cloud) have been designed from the outset to maximize performance. Before we get into specific steps you can take to optimize Lighthouse scores for a Gatsby website, it’s important to remember some of the coolest features that the Gatsby framework gives you right out of the box, including:
- Static Site Generation (SSG) page rendering: Gatsby has been historically very strong with SSG, a page rendering mode that minimizes JS and CSS and product HTML at build time.
- Progressive rendering: Gatsby is able to load your content on the visitor’s screen earlier thanks to employing the app shell model. In addition, Gatsby can pre-fetch above-the-fold resources. That means in the first second or so on your website, even when your site isn’t fully loaded, visitors will perceive something happening so it will feel faster.
- Prefetching internal links: Gatsby preloads critical resources attached to targets of <link>.
- Code splitting: Route-based code splitting helps Gatsby sites minimize page load times.
- Inline Critical CSS: Gatsby allows you to inline critical CSS directly into your HTML code.
- Progressive image support: Gatsby also optimizes your images during build time, which is extra valuable if you’ve already done a good job optimizing your images for web use.
We have a number of other resources that provide a deeper-dive on all of the out-of-the-box goodness that Gatsby provides to make your website faster, ranging from a Behind the Scenes: What Makes Gatsby Great blog post by Gatsby VP of Engineering Dustin Schau, and a video presentation by Gatsby co-founder Kyle Mathews that explains how you can use Gatsby to create the fastest websites in the world.
Improving Lighthouse Scores for a Gatsby Website
All of the aforementioned generic tips will also apply to a Gatsby website, but the tips listed from this point forward are specific to using the Gatsby web framework and Gatsby Cloud. Note: Some of these tips were pulled from Gatsby co-founder Sam Bhagwat’s eBook entitled Under Two-Second Page Loads: How to Use Gatsby to Dramatically Increase Your Website Conversion, which is an excellent additional resource for Gatsby-specific performance tips and tricks.
Use the Gatsby Image Plugin: In addition to build-time optimization of images that happens by default with Gatsby, the Gatsby image plugin, descriptively titled gatsby-plugin-image, offers out-of-the-box responsive images. Using gatsby-plugin-image can increase Lighthouse scores by 10-15 points for pages with large images.
Trim Bloated Bundles: Gatsby breaks your application up into Javascript chunks that are pulled into each page as necessary. In addition, Gatsby has plugins and documentation to monitor page chunk weight, visualize page weight to identify problematically heavy JavaScript chunks (such as large third-party libraries).
In addition, the tools enable prioritization by segmenting page weight into global chunks, template-specific chunks, and page-specific chunks.
Delay Script Load: Because third-party scripts can often be the most costly part of production Gatsby sites, Gatsby provides hooks to allow you to easily delay these scripts until after the rest of the page has loaded. In addition, you can inline the script and save the cost of a network call.
Modularize Global CSS: Gatsby documents the specific CSS libraries that you can use to ensure modular CSS to prevent global CSS from being pulled into each page. You can also use css styling at build time (using tailwind, css-modules, vanilla-extract) instead of css-in-js (styled-components, emotion).
Advanced Tip: Use Preact: Gatsby supports replacing React.js with Preact.js, which is a smaller javascript library. While Preact doesn’t provide full support for the React ecosystem and may not be the best option for your specific use case, it is an intriguing option for Gatsby sites as it can save approximately 30kb of JavaScript vs. using React, and is applicable/useful for most (but not all) Gatsby website use cases. Visit the Preact website for more on Preact, and grab the Gatsby Preact plugin at gatsby-plugin-preact. Please note: This is an advanced suggestion, and may not be a workable solution for every Gatsby site use case – so consider this a tip only for the most advanced Gatsby developers.
Author’s note: I’d like to thank several of my Gatsby colleagues for reviewing this article and providing invaluable tips and feedback. Many thanks to Sam Bhagwat (@calcsam), Ward Peeters (@wardpeet), Paul Scanlon (@PaulieScanlon), Dan Giordano (@itemprop_DannyG), and JD Peterson (@JD_Peterson) for their input and guidance.
We’re planning to update this article on a regular basis, so if you have any feedback or Lighthouse optimization techniques you’d like to share, please reach out to me on Twitter at @jeffjames3.
Related Reading: Gatsby-Produced Content
- Improving Site Performance
- Making the Gatsby Homepage More Performant
- Gatsby Web Performance Documentation Hub
- Improving Build Performance
Related Reading: 3rd Party Resources
- New Relic: Best practices for optimizing build times with Gatsby applications
- Google: Using Lighthouse to Improve Page Load Performance
- Bejamas: Increasing Website Performance with Gatsby Plugins
- web.dev: Lighthouse Performance Scoring