menu
announcement

Spectrum is now read-only. Learn more about the decision in our official announcement.

Gatsby

Fast in every way that matters. Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps.

Channels
Team

Too slow

June 26, 2020 at 7:33am
I've made recently website for my brother's band: https://potock.pl/ (it's very good album BTW, folk rock genre).
But I'm wondering why the website is so slow. The cover image is only 625kB but loads on my 480MB fiber for 4.79s. Is it due to server latency? I'm based in Poland, and I've read somewhere that the nearest Netlify server is in Frankfurt, Germany (Poland's neighbour), so the latency shouldn't be a big issue here.
What would you recommend to look into in the first place? Should I change hosting to AWS or Google Firebase? Or maybe proxy throught Cloudflare?

June 26, 2020 at 8:31am
Your website is not that slow.
lots of images and javascript though.
Sure, thanks, but I want to make it blazing fast, as Gatsby promise. Images are very important in this design, but there is only one image on the homepage. I've already switched to Cloudflare, so ithere is very little of latency now, at least for me. I had pings over 170ms before, now I have 10ms. Cloudflare should cache all the images, so should be much faster, but still it loads like 2.5s for image 625kB. I think I should be able to make it below 1s, but not sure how to achieve that.
your website is very image heavy. And I can see that images are lazy loaded already.
It seems your image isn't 625kb. If I inspect your site, it says it's 2.9mb. I would use some tool to resize/optimize the image before using it (from my experience, I would say gatsby optimizer doesn't work too well). This tool (https://ezgif.com/optiwebp) , for example, will work for webp images and if you decrease its quality to 60% for example, it will reduce the image to about 1MB. Also, when you have big high res images and and use base64 as the blurred one, it turns quite slow because the JS object containing it is pretty heavy.
like-fill
1

July 2, 2020 at 12:31am
Image heavy website should take care of sizes primarily. I will suggest you http://tinypng.com/ for optimising the image sizes. BTY website is cool. Happy Coding.
like-fill
1

July 2, 2020 at 9:21am
thanks for the tips, I'll look into it and try to resize it in the first place.