Geting a ? Performance score in page insights
So I've got 2 Gatsbyjs sites
The one was getting around 40.
My second one I built recently scored '?'
And then when i updated the first to improve its performance it got a '?' As well.
The 2 sites are:
Pixelfriendly.co.za
Bee-projects.co.za
Something on your website is causing Page Speed Insights to throw an error.
If you look at the "Lab Data" section you will see a part that says "Largest Contentful Paint" says "Error" for both of the sites.
This is almost certainly something to do with your animations.
You see Largest Contentful Paint is looking for the biggest item drawn on the screen. Now it is only monitoring this until a couple of seconds after the CPU goes quiet and all assets are loaded, at which point the test ends.
The problem is your animations take so long to "complete" that they do not finish before the test ends. So PSI has no idea what is the Largest Contentful Paint and throws an error.
What can you do to fix it?
If you want to keep the animations, nothing, you won't be able to use Lighthouse (in Google Chrome Developer Tools) or Page Speed Insights (as it is powered by Lighthouse).
However I would suggest you massively reduce how long your "opening animations" take on both sites. People make very quick decisions about whether a page is correct for them and waiting up to 5 seconds before it looks ready is too much. By all means keep the animations but reduce their time by at least half, if not by two thirds.
If you do this it will benefit your site by reducing bounce rate but will also make your site testable again as an added bonus.
- In Visual Studio Code, why are src/pages linked together or appear together?
- Change Gatsby Link Behaviour - Stop Scroll Animation on Page Change
- Gatsby's plugin generated sitemap.xml returning 404 error
- How to limit the number of characters by range in `yaml` file in netlify-cms Gatsby starter
- Gatsby build fails when using spline
- Hugo with React?
- Error: Cannot use GraphQLObjectType "__Directive" from another module or realm
- Problem with configuring Netlify CMS with Git Gateway
- Gatsby MDX not rendering properly
- Component Not Rendering in .map Function
- Make headings start at h2 in Gatsby markdown
- Contentful GraphQL Destructuring Fragments in Array
- An error, "failed to solve with frontend dockerfile.v0"
- contentful rich text not rendering
- This type of error comes:- Cannot find module 'sharp'
- Visual Studio Code doesn't recognize file types in directory named "templates"
- Your wordpress server appears to be overloaded. [Gatsby]
- I want to create a pagination in gatsby and strapi but im failing miserably
- How to fix Gatsby JS Link component retaining scroll position and not resetting to top
- Noindex File page on Gatsby?
- How to get values of the first element of fetch reponse
- Performing an async function before form post submission
- gatsby + netlify cms images not loading
- How to unpublish a gatsby page without deleting it?
- Gatsby 5+ and gatsby-plugin-preact error "renderToPipeableStream is not a function"
- Gatsby - Bootstrap Error: util.js:68 Uncaught TypeError: Cannot read property 'fn' of undefined
- Gatsby Shadowing CSS file is not being reflected
- gatsby-plugin-preact does not work with Gatsby 5+
- Remove nodes from Gatsby
- Getting error upon deleting gatsby node of a type owned by another plugin