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.