Assets very slow to load in GatsbyJS project (Netlify hosted)

Question

I'm working on my first GatsbyJS project (and hosted on Netlify) and over the past few weeks have noticed that everything is very speedy during development, but when built and hosted the pages are very slow to load (particularly the images).

This is a very simple marketing site (just 6 or so pages with a few images per page), so I figured I must be doing something wrong since Gatsby is said to be "blazing-fast", and that is definitely not my experience in prod. The landing page currently takes ~40sec to load, and is only a few images and a nav bar.

I'm loading images fairly simply per the docs, but is there some optimization step that I should also be doing? Or storing assets in a particular location for Gatsby to optimize?

Most recent build: https://musing-goldstine-2f7024.netlify.com/

Thanks for any info!

Answer 1

With Netlify you can now go to the site you wish to optimize, then: Site settings > Build & deploy > Post processing.

I turned them all on and they seem to work perfectly with my GatsbyJS site, including image optimization.

Answer 2

The issue is that you are serving scaled images. A scaled image is an image that has been scaled to match the size that it is displayed.

For example, on this page:

• This cityscape is resized in HTML or CSS from 3840x1200 to 1366x600. Serving a scaled image could save 5.0MiB (82% reduction).

  • To track this: open Chrome Developer tools (CMD + OPT + I) on Mac
  • Navigate to network tab, CMD + R to refresh
  • You can sort by size, load time, etc.

Chrome Developer Tools Network Tab on this site

Another good site to analyze your page speed: https://gtmetrix.com/

To improve page load time:

• Use a photo editor (Photoshop, GIMP, etc) and resize the photo dimensions down to the maximum display size.

• After resize, compress images to improve page load time further.

Resources for compressing images:

• NPM package such as sharp
• Command line tool: ImageMagick
• In Browser: Optimizilla

Image Optimization Guidelines

• Google Page Speed Recommendations for Optimizing Images

Final step: Replace your unoptimized images with your newly optimized images. You should see a drastic improvement in page load time.