Is it faster to request a single 7KB file faster than to request 6 files totalling 7KB?

Question

I had 6 JavaScript files that total 7KB in size.
I've just added the source for each file into a single plugins.js script and it's also 7KB in size.

Is having one 7KB file faster to load than 6 files totalling 7KB?

Answer 1

With HTTP/1, the answer is yes.

As mentioned by Michael Hampton, combining files (which prefer I call "concatenation") is a typical web site performance optimization. This is due to overhead related to requesting new resources. Every time the browser wants a new resource (a new file), it has to open a new connection to the server.

HTTP/2, however, changes how browsers interact with servers. Instead of one resource per connection, we can have multiple resources on a single connection, so a single file is no longer faster than multiple files.

Of course, HTTP/2 has its own browser support and server support issues. Not all hosting providers offer it yet.

But in the short run, you can also optimize the JavaScript loading. Do you really need all 7KB of JavaScript on every page? Do you really need all 7KB immediately? It could be better to load the most important bit and then use requestAnimationFrame to wait for an idle moment before loading the less-important parts unobtrusively.

Answer 2

Is having one 7KB file faster to load than 6 files totalling 7KB?

From a technical standpoint, the answer is also yes. To see why, I'd recommend downloading a web server (example: apache) and run it on your own computer so that you access your pages locally. Heck, you should be doing this already before publishing the pages to the web in order to minimize guest inconveniences (which include one-time slowdown during website update).

Once you have apache, set it up to accept a maximum of 6 connections and put apache in prefork mode. I understand prefork isn't the best mode but using it is the best way to understand why the accepted answer is correct.

Now make a request for a webpage that loads 7 or more resources. You will notice that six will load very quickly as there are 6 connection slots available on the server. Now if you try to load the seventh, there will be a delay until one of the first six resources have finished loading.

To understand this visually, try to make your webserver public to the world temporarily or sign up for a host where you can modify the setup (renting a dedicated server would be perfect), and then request your page through webpagetest.org or pingdom.com and you'll see a waterfall showing how each element of the page is loaded. You will notice long bars for requests beyond the limit your server can handle at once (which in the example is 6).

So the best advice is to follow the recommendations and combine the javascript and even better, strip out comments and white space.

For example: This is not optimized javascript:

//This is a function

function whatever
(
)
{

//initialize a variable
var avariable;

//set a variable
avariable=1;

//give a message
alert("x");

}

and this is the same javascript optimized for file size:

function w(){var x=1;alert("x")}

Sorry software developers, I violated conventions by not properly indenting nor declaring variables camel case style, but I was focused on space saving.