Netlify Build issue?

[shiffman]

Hi @runemadsen! Running into an error where the build is "taking too long" and timing out on Netlify. See #261

I'm presently in the middle of a local build and will update here if it finished successfully.

Could this be an issue now that the site has many more pages? Is running npm run clean for every single deployment a problem?

Maybe we can address this over dessert?

[shiffman]

The local build completed but the page queries did take 904 seconds!

[runemadsen]

Looking at this now! I'm going to try to upgrade to Gatsby v4, and then take a look at whether we need to downsize some of the images / add build caching to Netlify.

[shiffman]

Thank you @runemadsen!!!

[runemadsen]

@shiffman No problemo. I'm testing the new build in this PR: #268. If that works, I'll try merging my branch into the branch that fails on build to see if it solves the problem.

[runemadsen]

After looking into this yesterday, there's a number of factors leading to this happening:

• The build time on Netlify (+30m) is significantly higher than on my local machine (5m). This must be caused by Netlify's build machines having much less power than my local one
• Many images were above 1mb. This is an issue since every build resizes the images, and larger images seem to have an exponential effect on the build time. Netlify should in theory cache the image resize results and use them in the next build if they didn't change, but that doesn't seem to be happening despite updated the Netlify Gatsby plugin.
• Gatsby will automatically create 3 sizes of each image to use for responsive designs. We might be able to run through the site and tweak that functionality for images that are just shown in small such as the showcase images

@shiffman Here's what I suggest for next steps:

• Contact Netlify and ask if they can increase the build time (@shiffman)
• Run through the repo and resize all showcase images to 800-100px max (?)
• Check the gatsby setup when resizing responsive images and see if there are any performance gains (@runemadsen)

Does that sound okay to you?

[shiffman]

@runemadsen yes, this sounds like a great plan! Could the fact that I am running npm run clean && npm run build be the issue related to the image resize results not caching? I added npm run clean when some aspects of the site weren't updating properly after a build, but we might have only thought this was happening due to a longer build time!

I can try removing that and see.

Yay!

[runemadsen]

Excellent. As long as you're just running clean on your local machine, it shouldn't be able to affect the build process on Netlify. But it will slow down your local build time.

[shiffman]

Ah, but I am running it on Netlify itself! (not locally). I'm going to take that out now and see if that improves anything.

[runemadsen]

Ah yes, definitely try to remove that! The first build after that should be slow, but then the following builds should hopefully be faster.

[jlengstorf]

Hi!

A couple quick things:

1. I have requested a build limit increase, so the timeout should stop.
2. Running clean removes the cache, so it drastically increases the build time.
3. Image optimization is one of the biggest culprits in long Gatsby builds. Resizing those images down the the largest size you need them (keep 2x density in mind!) will make a big difference.

Does this site run the Netlify Gatsby plugin when it builds? That will further speed up builds if it’s not already in place. Search “Gatsby” here to install: https://app.netlify.com/plugins

Let me know if I can help with anything else!

[runemadsen]

Thanks @jlengstorf!

We just upgraded to version 3 of the Netlify Gatsby plugin last week, and I think that helped a bit. We'll downsize images and see how fast we can get it to build :)

Rune

[shiffman]

I don't want to jinx it build the build has doubled in speed and is now coming in around 15 minutes. . will keep this thread open for a bit longer but as of now it is all good by me!