11 seconds to load my index page using Gatsby

[catboxer]

I am fairly new to Gatsby and only a year in on coding so perhaps I have something misconfigured but I have no idea how to even start trying to fix this issue.

When I run a performance check it gives me a gray bar for 6408.9ms seconds where it just shows a grey bar. And, then the JSON loads for another 2 seconds. Can you tell me what is causing this delay or what I might try to do to get it to load up before people fall asleep? https://artout.netlify.app

Many thanks!

[LekoArts]

Hi, thanks for using Gatsby!

Your browser (no matter if Chrome, Firefox or something else) has some powerful capabilities that can help you debug such issues. You can use them once you open the Developer Tools of those.

I'm also assuming that this is the repository for the site: https://github.com/catboxer/outsider-art

Investigation

In my instance I'm using Chrome and opened the Developer Tools with F12. The Network tab will help you understand what takes so long:

2021_08_11_23ea88e9.mp4

Once you sort by size you see this giant 3MB JSON file: https://artout.netlify.app/page-data/sq/d/3297910368.json
And then a couple of page-data.json files.

The page-data.json file is the data for each specific site, e.g.:

The /page-data/sq/d/3297910368.json file is a Static Query (you can recognize this from the sq in the path).

Problems

The way I understand it you're overfetching data (fetching unnecessary and more data than you actually use).

This is the static query:
https://github.com/catboxer/outsider-art/blob/main/src/components/Slider.js

While you're querying for localFiles later down in the code you only use localFiles[0] -- so all the other entries are fetched but not actually used.

Same goes for the individual pages of the artists:
https://github.com/catboxer/outsider-art/blob/main/src/pages/artists/%7BAirtable.data__name%7D.js

It seems you're also querying localFiles there and only using localFiles[0].

Docs

The tutorial you followed (https://github.com/john-smilga/gatsby-v3-tutorial-recipes) does some things differently, specifically it only seems to get the images you actually need.

We have some docs about auditing and improving performance. You can give them a read afterwards if you want:

• https://www.gatsbyjs.com/docs/how-to/performance/improving-site-performance/
• https://www.gatsbyjs.com/docs/how-to/performance/audit-with-lighthouse/
• https://www.gatsbyjs.com/docs/profiling-site-performance-with-react-profiler/

[catboxer]

@LekoArts
Hi Lennart, Thank you so much for taking the time to try and help me. The explanation you give is very clear.

The query you are referring to from Slider.js for cover_img (below) that uses the localFiles[0] would only ever have have one item in the array so I assumed it would not be over fetching data and only fetching that one entry. Is that an incorrect assumption?

cover_img { localFiles { childImageSharp { gatsbyImageData( Only One Entry placeholder: BLURRED layout: CONSTRAINED ) } } }

The only other localFiles query (gallery) uses all the items in the array so I did need to fetch all those items.

[herecydev]

The problem is that all the localFiles in gallery are being requested, despite not being used (or at least not that I can see):

I think the issue is in the AllArtists component, despite not being actually used you're indirectly referencing it from /src/components/index.

As Lennart pointed out, using the tooling is the easiest way to find these sort of offenders. There's probably more but hope that helps you get started.

[catboxer]

Oh jeez, I completely forgot about that indirect reference to AllArtists. I really appreciate all the help and education on how to find the heavy queries using these tools. I learned a lot. Thank you!