What is the recommended JS kb limit for a web app? [closed]

Question

Just wondering if anyone more experienced out there could suggest a recommended limit for total JS resources in a web app. I want to make sure I'm not overloading my bandwidth.

I'm currently around 350 - 400kb spread between two .js files (unminified). This is not including jQuery & jQuery UI from Google CDN.

Thanks!

Binni

Answer 1

I suppose there isn't really a recommended "file size" per-say.

More a recommended length of time for your entire page to load, including all css, images, javascript, rendering time etc. Too long and people are going to loose interest, but it really depends on your content i.e. if it's very specific content that people are after, then they will wait for longer, but if your running an e-commerce site and your competition is only a click away, then page-load times are very important.

I suppose the answer is make your files as small as possible and your site load as fast as possible. But this is going to be a classic return on investment question, if your running an e-commerce site, a faster loading site could lead to more sales?

But to try and answer your question, 400KB seems a little heavy to me. As a general rule of thumb, you want to aim for sub 10 second for a sub 2 second load time of the page beginning to be visible - to at least give a response to your user.

Here are Yahoo's Best Practices for Speeding Up Your Web Site

You can also run Y-Slow a firebug add-on, or numerous other speed tests to analyse and give recommendations.

Google's Page Speed site is a more contemporary approach to page speed.

Bicyclic

Why the down vote? Albeit it is a rather old answer now! – Bicyclic

Just a brief 2018 update, the 10 second load time was 2011 advice (albeit the general principals I've outlined are still valid), look here for contemporary advice: developers.google.com/speed in particular it's not about "load time" for the whole page, but load time for making a use-able experience. – Bicyclic

2024 update: from The Performance Inequality Gap, 2024: "If we set the target to a much more reasonable three seconds, the budget shrinks to ~730KiB [of HTML/CSS/JS/images/fonts], with no more than 365KiB of compressed JavaScript." – Remarkable

Thanks for the contemporary update @Remarkable – Bicyclic

Answer 2

I believe it's around 500kb, at which point you start taking serious performance hits.

Nguyetni

Answer 3

It is not clear if you are looking for page rendering performance or cost for your hosting advise...

For both: all your static files (CSS, JS, images) should be minified and served compressed (in case of images make sure you choose smallest acceptable size) if you are expecting site to be high traffic. Setting correct caching headers is important too.

Page rendering - see Alex Key's answer.

Cost of hosting - you are the one to figure out what is acceptatble. It is relatively easy to estimate - number of users per period of time multiplied by average download size from your site wil give you the number. You can also consider putting static content on some CDN.

Existential