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.