I am trying to determine the best strategy for optimizing the web page loading time concerning Javascript assets. I can think of multiple strategies:
- Combine all files to a single, minified file.
- Combine all files into multiple files to take advantage of parallel HTTP requests.
- 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.