CODEWITHSUNDEEP
javascriptperformancemobile-website
Fabian Kleiser
Fabian Kleiser

Reputation: 3008

Recommended size of javascript assets on a web page

I am trying to determine the best strategy for optimizing the web page loading time concerning Javascript assets. I can think of multiple strategies:

  1. Combine all files to a single, minified file.
  2. Combine all files into multiple files to take advantage of parallel HTTP requests.
  3. Make use of AMD to lazy-load required files on demand.

Note: Of course, the files are stored in a CDN, otherwise the CDN itself would probably be the most significant performance boost.

Related Answers:
I have found some rather dated answers concerning strategy 1, generally stating that a single file with <50-200 KB is acceptable and >500KB is not good. Unfortunately the Yahoo Best Practices for speeding up websites doesn't go into specifics either.

What I am not looking for:
I know I could determine the coupling of the JS files, make up common usage scenarios, combine related files and use AMD to optimize everything to the max. While this would be the perfect solution, it is quite costly and time-consuming and as such not worth the effort (yet).

Question:
Can you recommend a practical solution (=simple to implement) as a baseline for a total (minified, uglified) JS size of 50 KB / 200 KB / 500 KB / > 500 KB? How would you approach mobile-device optimization?

Note: The stated size numbers include commonly used frameworks (e.g. jQuery, Bootstrap, ...) and custom code. If you would consider a different strategy if e.g. 20% or 80% of the size originated from commonly used frameworks, please explain.

Upvotes: 3

Views: 5903

Answers (1)

Ziv Weissman
Ziv Weissman

Reputation: 4516

There is no real solution to your question, only opinions.

With the cellular world rapidly developing--> the connectivity and speed always increases. Things that are true for today, might not be relevant for tomorrow.

With that said, I will recommend the following--> Use files with size of ~100kb. Do not try to combine frameworks, leave them as they are. The improvement of speed is not worth wasting time over it.

Make sure your custom code do not exceed that size after minified.

Alternatively, if you want the "best" solution, build yourself a program that automatically combines all your js files into separate user defined sizes, then you are flexible to do what is best for the moment. (or use existing onces, there is some info here

Upvotes: 4

Related Questions