Googles introduction of INP as a core web vital (March 2024) is causing lighthouse issues for my Gatsby site

Hi Everyone,

I hope you can help me with an issue we’ve spotted since the introduction of Interaction to Next Paint (INP) as a core web vital metric. I manage a Gatsby site, hosted on Netlify and I’m seeing very poor INP, prior to this core metric change our lighthouse scores were green across the board. This is affecting our amount of ‘poor’ and ‘need improvement’ urls in Google search console which, in turn, will affect our organic search rankings e.g. terms where we would rank on the first page, we’re now page 5 etc.

We’ve chosen to use Gatsby in our stack partially because of how optimal the framework is for google out of the box, and how easy it’s been to optimise for speed and usability. You can see how we’ve been affected from this Google search console graph:

I’ve been optimising as much as I can, stopping just shy of implementing Gatsby Partial Hydration as this is in beta and doesn’t support styled components (Using Partial Hydration | Gatsby). We use SSR, SSG and DSG pages throughout the site and all of them score low on INP so it’s not an issue with our rendering option. I suspect it’s something to do with hydration or JS bulk.

I’ve checked other featured sites that use the Gatsby framework (found on the showcase page) and a good amount of them also have issues passing the Core Web Vitals Assessment from what I can see, e.g.:

https://www.nationalgeographic.com/ - failing on INP - 553ms
Meditation and Sleep Made Simple - Headspace - failing on INP - 220ms
https://www.affirm.com/ - failing on LCP & CLS - 3.3s and 1 respectively
https://www.servicetitan.com/ - failing on INP and CLS - 755ms and 0.19 respectively

I’m just wondering if this is something people are aware of, if there’s anything I can change to improve, or if there’s anything in the pipeline that could help improve. I know this is a Google change and not necessarily a Gatsby issue considering the Google update is so recent, but any points in the right direction will be massively appreciated.

Cheers & all the best,
Jake

Site: https://production-v2.laterooms.com/

package.json:

{
  "name": "laterooms",
  "version": "1.0.0",
  "private": true,
  "description": "laterooms",
  "author": "Jake Adams",
  "keywords": [
    "gatsby"
  ],
  "scripts": {
    "develop": "gatsby develop -H 0.0.0.0",
    "start": "gatsby develop -H 0.0.0.0",
    "build": "gatsby build",
    "serve": "gatsby serve",
    "clean": "gatsby clean"
  },
  "dependencies": {
    "@apollo/client": "^3.7.16",
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@fontsource/montserrat": "^5.0.4",
    "@mui/material": "^5.14.0",
    "@reach/router": "^1.3.4",
    "@sanity/block-content-to-react": "^3.0.0",
    "@types/mapbox-gl": "^2.7.11",
    "babel-plugin-styled-components": "^2.1.4",
    "dotenv": "^16.3.1",
    "esm": "^3.2.25",
    "gatsby": "^5.11.0",
    "gatsby-background-image": "^1.6.0",
    "gatsby-plugin-anchor-links": "^1.2.1",
    "gatsby-plugin-apollo": "^4.0.3",
    "gatsby-plugin-google-gtag": "^5.11.0",
    "gatsby-plugin-google-tagmanager": "^5.12.0",
    "gatsby-plugin-image": "^3.11.0",
    "gatsby-plugin-manifest": "^5.11.0",
    "gatsby-plugin-no-sourcemaps": "^5.13.0",
    "gatsby-plugin-react-helmet": "^6.11.0",
    "gatsby-plugin-robots-txt": "^1.8.0",
    "gatsby-plugin-sanity-image": "^0.13.4",
    "gatsby-plugin-sharp": "^5.11.0",
    "gatsby-plugin-sitemap": "^6.11.0",
    "gatsby-plugin-styled-components": "^6.11.0",
    "gatsby-source-filesystem": "^5.11.0",
    "gatsby-source-graphql": "^5.13.1",
    "gatsby-source-sanity": "^7.6.3",
    "gatsby-transformer-sharp": "^5.11.0",
    "litepicker": "^2.0.12",
    "mailcheck": "^1.1.1",
    "mapbox-gl": "^2.15.0",
    "maplibre-gl": "^3.5.2",
    "qs": "^6.11.2",
    "query-string": "^8.1.0",
    "rc-slider": "^10.2.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-facebook-login": "^4.1.1",
    "react-geocode": "^0.2.3",
    "react-google-login": "^5.2.2",
    "react-helmet": "^6.1.0",
    "react-international-phone": "^4.2.4",
    "react-intersection-observer": "^9.5.2",
    "react-lazy-load-image-component": "^1.6.0",
    "react-map-gl": "^7.0.15",
    "react-select": "^5.7.4",
    "react-slick": "^0.29.0",
    "slick-carousel": "^1.8.1",
    "styled-bootstrap-grid": "^3.1.2",
    "styled-components": "^6.0.2"
  },
  "devDependencies": {
    "gatsby-plugin-netlify": "^5.1.0",
    "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.32"
  }
}

Repo is private, but please let me know if you need any more info.

Hi Jake,

Thanks for getting in touch! This a great question. INP is a pretty new Core Web Vital metric, although there are certainly some optimizations we can look into as far as improving it on your Gatsby site.

You mentioned you suspect the issue may be due to JS bulk, and the INP docs do indeed state that unoptimized JS assets can be a key driver for a poor INP score. Can you confirm whether auditing the JS bundles on the site was part of your optimization efforts, and if so whether you saw anything that sticks out there?

Otherwise, the docs mention:

Since many websites rely on JavaScript to provide interactivity, the INP score would primarily be affected by the amount of JavaScript processed on the main thread.

The Next.js Script component helps to address issues caused due to inefficient loading of third-party scripts.

The good news is that Gatsby also has a native Script component, and (although also experimental) you can use this with the off-main-thread strategy to help reduce the JS running on the main thread and improve that score. Please let me know if you have any questions!