why is my site slow? bundle size is small

this is the website

it comes in with a decent score on pingdom. And the page size is just 1.1MB. But the "wait" phase is nearly 15 seconds.

And I can't work out why. Perhaps an old version of webpack / node config problem?

This is a link to my github =>

The project is really simple, so webpack / server.js files are possibly the ones. I'm using old webpack.

Massive thanks.

I am no expert but maybe it has to do with all those images. For me, the "wait" phase was 7 seconds and it was due to those images if I read correctly from the graph below.

Interesting thanks. IDK though. The total page size (with all images) is just 1.1mb. Which isn't much.

I don't know much either, but that shouldn't take 7 secs to load

Try to find issues. Here's a direct link…

Solve those issues & check again. Also the Github link is not working maybe bcz Github is down right now or your link must be pointing wrongly. I dont think its an image issue though.

Also, put those 2 script tags in body rather than head even though you've put async or defer, its usually a good practice to place it in body. Also you've put your head tag wrong. It wraps on body so that might be the issue as well 😂

  1. Minify CSS, JS, HTML.
  2. Paste your CSS and JS inline.
  3. Optimize images and make a sprite. Right now you load like 20 or 30 images and even more, not from your server (not sure how aws3 fast, tho, but I would better load them from your server). With sprite you will download only 1 single image instead of all these 20 or 30. Here you can read about it -

Some more tips -…

It seems like you are serving a couple dozen images from Amazon S3.

While S3 is great for hosting assets, it seems rather slow for serving assets. I think one of the reasons the images load so slowly is because S3 uses HTTP 1.1 which, unlike HTTP 2, doesn't support serving multiple requests in parallel. This means the browser can't start loading all images at once, but has to wait for image 1 to be finished, before it can download image 2, etc, etc.

Full disclosure: I'm not 100% sure that's the correct technical explanation, but based on my limited knowledge on the topic that's my best guess.

Okay, so what is the solution? Add a CDN like Amazon CloudFront to the mix. CDNs are optimized for serving assets like these. You will still host the images on S3, but let Amazon CloudFront take care of serving them to the browser.