How many javascript files is too many

When javascript gets more and more bigger in the client side you should really think about maintenance. I would suggest you to use some kind of MVC library in the client side like Backbone. You could use minification frameworks that helps to combine all the javascript into single file. The ASP. Having one large javascript file is not a problem, in fact it is desired. By placing the majority of your javascript in one file the browser can cache this file and on subsequent page loads will not need to fetch the javascript from the server resulting in faster page loads.

You may still want to split your javascript files but for maintenance reasons. To setup the individual event handlers in the document ready event you could include inline javascript in the page load which will allow you to set the actual control id if server generated e. This code may just call the appropriate function in your main js file. If your application is quite large, organizing it by functional area will probably make sense although if you find you have a lot of little js files I'd suggest you place them together.

That being said, there are some great tools that can minimize and group different javascript files together live or as a part of a build process and even monitor changes. They both can even translate. The general wizdom is that if you have one js file that gets loaded on the first page view it gets cached for subsequent page views.

This is generally why you may want to serve one file for all of them although you can keep them separated as you develop. Stack Overflow for Teams — Collaborate and share knowledge with a private group. Create a free Team What is Teams? Collectives on Stack Overflow.

Learn more. Too many javascript files Ask Question. Asked 9 years, 5 months ago. Caching can be done several ways and is inter-related with some of the functionality of service workers.

What caching allows you to do is determine the rules for when a browser should download a resource from the server instead of getting it much faster, no download required, from the cache. Caching can substantially reduce load times and delivery costs to the page and should be utilized for JavaScript in almost every circumstance. Using features of modern frameworks makes JavaScript more maintainable than ever.

While at first glance it can seem convoluted, there are just a couple of goals JavaScript best practices aim for:. In this post, we cover the first two, which are interconnected. Smaller page sizes are possible when you reduce the amount of code you deliver to your users, thereby delivering them faster.

As always, make sure to test any changes before you implement them, and then see how they affect your user base with real user monitoring. And check back for the next post, which will cover the third aim for JavaScript performance — more efficient JavaScript processing.

Training Manager at Blue Triangle. The leader in digital experience management. Reducing the impact of JS delivery So how can we reduce how much page loading time is associated with JavaScript delivery? There are two ways, with best practices for each: Make JS load faster in the browser. Reduce how much JS you use to build your page. Minify all JS resources, and use minified third-party JS. Self-host third-party JS or use a service worker. Compress JS.

Use push and preload for critical JS. Eliminate dead JS code. Split JS files to deliver essential components. Load non-critical JS components asynchronously. Cache JS. User Perception Of Performance Delays 0 to 16ms Users are exceptionally good at tracking motion, and they dislike it when animations aren't smooth. Use minified JS files Minification strips out unnecessary punctuation, white space, and new line characters. Compress JS Server-side compression of text files can reduce file size substantially.

Use push and preload for critical JS Server push and preload can both be used to deliver files that are critical to rendering the page earlier in the page load than normal. Deliver essential components with route-based chunking, or code splitting Route-based chunking, or code splitting, applies to websites that load single-page applications, progressive web applications, or any other framework that requires a large JS bundle to build the first page that a user sees.

There are a few types of code splitting: Vendor splitting separates your JS from JS provided by your framework vendor, like React or Vue. Vendor splitting prevents reloading a larger bundle when a feature in either code source is changed. Vendor splitting should be done in every web application. Splitting with entry points separates your code based on where in your code webpack starts to identify dependencies in your application. If your site does not use client-side routing, e. Dynamic code splitting works well with applications that use client-side routing, like single-page applications, because not all users will use every piece of functionality on a page.

I wanted to check the temperature in my local area. So I browse to the website of my local television news station. The website loads slowly. So I check the source and count over 30 javascript files being included. What happened to usability? What happened to the emphasis on speed and not making users wait over 15 seconds to view a web page?

What kind of developer thinks it is a good idea to have that many javascript files included in a web page? The number of Javascript files I counted was 32 including analytics scripts.

When I view that second website, if I disable Javascript it loads pretty quickly. Is it slow for you, too? At least it is for me.