What is the gain of "unifying" the resources . css and . js of a site?

Asked

Viewed 186 times

3

Scenario: A website X has 5 . css files and 5 . js files all with 5KB, a website Y has the same HTML that the site X but its resources . css and . js are linked together (.js with . js and . css with . css).

Question: What is the load time difference between the two pages (can be in percentage, gross value, the goal is to see if there is gain in unify all resources and when gain starts)? there is/what the overhead of multiple connections for downloading . css and . js?

OBS: I take into account reset CSS, external libraries CSS, General CSS and page specific CSS, external libs JS, general and page specific.

OBS2: Based on Apache 2.4 but examples on other servers are welcome

javascript css apache
  • 1

    The time difference is relative, anyway, the smaller the size the faster it will load. In the Chrome developer options you can see how long each file takes to load into the page.

  • 1

    Yes, there is overhead, you seem to already know this. Now, you can’t measure this in general, there are many variables involved. You need to measure performance on your own site. But I’d say it’s often advantageous to join files together.

1 answer

3


In the case that the files are together only a single request to the server is required to get the content. Moreover file compression tends to work better than in the files separately. For this reason Build generators like Grunt or Gulp have options to join the files, "mythologize them", and compact them for better overall site performance.

On the other hand this should be checked by measuring for each specific site because Javascript files, for example, can be uploaded on-demand as the page needs resources. For example, Asynchronous Module Definition (AMD) allows to load only what is necessary for the initial functioning of the page. As the user interacts with the page other features may be being loaded into the background giving the feeling of fluidity in the Visual Interface.

In short, there is no simple answer. The answer will depend on the problem being solved. Whether performance is critical makes Benchmark testing necessary.

Browser other questions tagged javascript css apache

You are not signed in. Login or sign up in order to post.