0

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?

migrated from serverfault.com Feb 11 '17 at 19:32

This question came from our site for system and network administrators.

  • 1
    Yes, that's called minification and it's a very common web site performance optimization. – Michael Hampton Feb 11 '17 at 19:24
  • 1
    Note that due to HTTP response (and request) headers, the actual data transferred with the 6 individual files may have exceeded 7KB. – MrWhite Feb 11 '17 at 22:36
5

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.

  • Thanks for the answer. I've optimized my JS & modularised it so that I don't need to use all of the scripts on every page, just the ones I need for that specific page. Once again thanks for the answer, mate. – user74852 Feb 11 '17 at 21:23
  • 2
    Near future? I've been using HTTP/2 on all our servers for quite a while now and the standard was finalized almost two years ago. – Rob Feb 12 '17 at 3:07
  • @Rob Fair enough. The cheap hosting I've dealt with upgrades really slowly, so I don't expect to get HTTP/2 for a year or two. – Andrew Myers Feb 14 '17 at 1:23
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy