Optimising your Gatsby website's Lighthouse scores

Lighthouse by Google has quickly become an industry standard for testing the quality of modern websites. It's an auditing tool built directly into Google Chrome's DevTools and is also available as a CLI tool or NPM module. It measures the key elements of the modern web experience — Performance, Search Engine Optimisation, Best Practices and Progressive Web App factors.

Why does it matter?

While the numbers given by Lighthouse can only ever be a heuristic of how your site is actually perceived by visitors, they are a solid indicator of a good user experience. By ensuring that your site meets Lighthouse's stringent performance criteria you can maximise engagement (Google has found that as load times increase from 1s to just 5s, bounce rates increase by 90%). By checking against Lighthouse's accessibility guidelines your site will be available and useable by everyone and by following SEO and PWA guidelines you maximise your reach and utility on the web.

And if all of that isn't enough, Google takes the same factors that Lighthouse does into account for its own search engine rankings and there are a litany of web awards that you are eligible for just by excelling in them.

Lighthouse ❤️ Gatsby

So what does this mean for us building serverless static websites with Gatsby? It means we're already halfway to the finish line. Gatsby comes highly optimised for Lighthouse and all its best practices and is easy to further optimise across the board. That optimisation is what we're going to cover in this article.

Fine tuning performance

Gatsby is already lightening fast right of the box. By pre-rendering your site in a build step, load times are as fast as a static site. Code bundles are split and routes are lazy-loaded, important assets are pre-fetched and critical CSS is inlined for faster initial renders. But there's still further optimisations we can make to maximise Lighthouse performance metrics.

Take advantage of CDNs

Since Gatsby compiles your site to static files, it doesn't need to be hosted on a traditional server. This is already a big performance win on its own, but it also means you can deploy your whole site directly to blazing fast Content Delivery Networks (CDNs). We at Jellypepper use and recommend Netlify for its class-leading network and build pipeline, with integrations to common code repositories like Github and Bitbucket.

Serve over HTTP/2

HTTP/2 is a new standard for the web's basic networking protocol. It can drastically improve performance of complex sites by making many small requests in parallel (rather than encouraging us to bundle and make a small handful of huge requests) and 'pushing' critical assets alongside an initial request.

Most CDNs already use HTTP/2 out of the box, but ensure you check your provider. If you do deploy to Netlify, use gatsby-plugin-netlify to automatically generate preload and HTTP/2 push headers for Gatsby's core bundles.

Use Preact

Preact is a featherweight (3kb!) alternative to React which prioritises code weight and initial load times over the heavy app runtime optimisations of React. It's perfect for a majority of Gatsby websites that don't need React's extensive overheads which hurt Lighthouse's Time To Interactive (TTI) scores.

To switch to Preact simply install and include gatsby-plugin-preact in your Gastby config.

Defer loading where possible

Gatsby already code-splits our site and optimises loading by route, but you can also do more fine-grained lazy loading of large non-critical resources to further improve Lighthouses first paint and TTI scores. Use Webpack's dynamic imports to defer the loading of conditional modules (eg: polyfills) until they're needed. And ensure external scripts are marked as async or defer so they don't block rendering.

Add resource hints

Setup resource hints, like prefetching and preconnects, for any external assets and services you are using to optimise and priorities your site's network requests.

Use gatsby-plugin-preconnect to add preconnect links to URLs and use gatsby-plugin-react-helmet to add prefetch tags that are properly prerendered by Gatsby.

Use Gatsby Image

gatsby-image is a highly optimised image loading component from the core Gatsby team. It uses the popular Sharp library to process images and automatically generate a responsive, lazy-loading, non-render blocking image.

Making search engines happy

The same recommendations that apply to optimising all websites for technical SEO also apply to optimising Gatsby for Lighthouse scores. For this article we'll just cover the basics for Gatsby, read our deep dive on technical SEO for more tips.

Create a sitemap

Use gatsby-plugin-advanced-sitemap to automatically generate advanced, XSL sitemaps for your site that are both human and machine readable. For the default configuration, just include the plugin in your gatsby-config.js, or generate complex sitemaps tailored for your data by providing a query as outlined in the plugin's docs.

Check your robots.txt

Ensure your site is crawlable by search engines and has a valid robots.txt file, by including the gatsby-plugin-robots-txt plugin in your Gatsby config.

Update your metadata

Use gatsby-plugin-react-helmet, which has full Gatsby pre-rendering support, to set appropriate metadata tags for every page on your site.

Making it progressive

While Gatsby websites generally aren't apps in the conventional sense, they still highly benefit from all of the optimisations that Progressive Web Apps (PWAs) require and that Lighthouse measures for. There's a lot that can go into making a PWA and we'll just touch on the basics that Lighthouse checks for here. Check out our deep dive on making PWAs with Gatsby for more.

Add a service worker

Service workers are required by Lighthouse's PWA metrics and allow us to do some really neat things. We can persist our full interactive site offline, have periodic background syncing and even send push notifications.

Just add gatsby-plugin-offline to your Gatsby config to automatically generate service workers with sensible defaults.

Add a web manifest

Web manifests provide information about web apps to the browser and even allow users to install PWAs directly onto their devices. While we (probably) don't want users to install our Gatsby website, the information in a manifest is useful and required by Lighthouse.

Install gatsby-plugin-manifest and include it in your Gatsby config. Just make sure that gatsby-plugin-offline is included after gatsby-plugin-manifest, so the manifest is registered in your service worker.

If you've done everything above, your Gatsby site should be looking pretty good on those audits. You might even see celebration fireworks next time you run an audit!