Serving static files taking up to 30s

Hi, I’ve just migrated juanalonso.blog from Firebase to Netlify to use NetlifyCMS with my Hugo website, but a day after setting things up, I keep getting very slow download times from Netlify’s servers. Example requests:

http://juanalonso.blog/
x-nf-request-id: b3242fa0-0d47-4ef5-a7ec-54a738b9f903-2536217
Serve time (according to Chrome’s Network tab): 17s

"https://juanalonso.blog/img/2019/2019-04-packed.jpg
x-nf-request-id: b3242fa0-0d47-4ef5-a7ec-54a738b9f903-2543812
Serve time: 9.9s

I’ve checked Netlify’s docs but I’m not sure what am I doing wrong. Could you please help me understand why the download times are so slow? I’m pretty sure I’ve misconfigured something.

Thanks

One thing I’d consider doing right up front is dropping the size of your network requests. As an example, the first image on your blog is at a resolution of 2976x2717 but being served at 235x215 (7.9% of the original file).

Screen Shot 2020-02-16 at 2.27.25 PM

Most of the other images on your homepage also are very near or over 1MB which is significant considering the size they’re being displayed at. Once the page has loaded, I’m actually seeing a load time of about 1s on subsequent loads due to your resources now being cached. Disabling the cache though kicks the page load time back to 9s or more and this is browsing with a pretty snappy connection to the internet.

Something else I noticed was the deferment of menu.js due to the size of the resources that come before it (see screenshot below). It is best practice to place scripts at the bottom of the page so they don’t block the page from rendering, but because 7.2MB of resources need to download in parallel before main.js can be loaded in this case your script is being deferred from loading due to large network requests.

Netlify can run some post-processing for you at the conclusion of your build (see: https://docs.netlify.com/site-deploys/post-processing/) as well as transform large images for you via their large file service (see: https://docs.netlify.com/large-media/transform-images/#request-transformations) but ultimately you’ll want to size down images yourself to improve load times.

1 Like

Thanks a lot Noel, compressing the images fixed the issue. :slight_smile:

1 Like

Glad it worked! Happy to help.

1 Like