New to WIP?

We're a group of makers shipping together. We help each other stay accountable and reach our goals.

Apply for access
Topics
👨‍💻 Developers 🔧 Dev Ops
Other questions
🤔 What do you do for marketing? Be the first to reply
🎨 Freelance designers. When and how. 2 answers
What steps are included in your CI pipeline you should have added sooner? 11 answers
AI to work with a lot of data (two usecases) 8 answers
Back
 Question
Asked

why is my site slow? bundle size is small

this is the website https://bound2.app

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 => https://github.com/crowdform/bound2web

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

Massive thanks.

Harry Dry
@harrydry

👋 Join WIP to participate

Avi Aryan
@aviaryan

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.

 Reply
Harry Dry
@harrydry

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

Reply

Try blinkloader.com to find issues. Here's a direct link blinkloader.com/test/?q=null&…

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 😂

 Reply
Maksim
@SilencerWeb
  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 - css-tricks.com/css-sprites/

Some more tips - developers.google.com/speed/p…

 Reply

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.

 Reply