1

I have always heard that you should have all of your JS and CSS in as few of files as possible when the site is live. The reason is because it helps improve your loading times as there are less http request.

So my question is this: Is this accurate?

In other words More HTTP Request but smaller individual files?

OR

One large file fewer http request?

This assume that the total file size is the same. Which is a better option?

L84
  • 45,514
  • 58
  • 177
  • 257
  • The general consensus is to the number of requests as low as possible. A relevant link is http://googlewebmastercentral.blogspot.nl/2010/04/using-site-speed-in-web-search-ranking.html , last section. – derjoachim Jan 09 '15 at 06:32

3 Answers3

1

In my view, we should develop web pages as easy as possible - with as many small files included as it suites to us. But when we go to production, we should use 1) minimizing and 2) bundling.

These techniques not only improves performance because less data (still enough for browser) is transferred. But mostly because of:

Max parallel http connections in a browser?

I.e. only few files are needed to download. Check this my bundle example:

<!-- all stuff loaded as a bundle of three resources -->
<script src="/project/angular?v=NveddIF51HI4iaxPpUsI0S6c3he4gNp66Up41Sv2fKK5"></script>
<script src="/project/project?v=d9PZoP5TedID06vwo3Yf-m6fBwo1TZw06O9ggW7pSwa9"></script>
<script src="/project/states?v=nquC98Yj1sR51ao9uywcJ3nzq7v07c7k1jzEi4UzMvsq"></script>

Which in comparison without bundling was containing hundreds of small references, small scripts

And that is the biggest benefit, to have few files - browsers do not have to do so many requests, which do have limit to being executed in parallel

Community
  • 1
  • 1
Radim Köhler
  • 122,561
  • 47
  • 239
  • 335
0

Minimize HTTP Requests

Reducing the number of components in turn reduces the number of HTTP requests required to render the page. This is the key to faster pages.

Combined files are a way to reduce the number of HTTP requests by combining all scripts into a single script, and similarly combining all CSS into a single stylesheet. Combining files is more challenging when the scripts and stylesheets vary from page to page, but making this part of your release process improves response times.

---Source: https://developer.yahoo.com/performance/rules.html

CRABOLO
  • 8,605
  • 39
  • 41
  • 68
Prachit
  • 374
  • 1
  • 8
0

Each request takes time. And browsers can only handle a finite amount of concurrent connections, so in general it makes sense to limit the number of requests required to display your content to speed up loading.

However, it's important to distinguish between assets that are referenced in the document's HEAD and BODY. The browser won't render the page unless all scripts and sheets referenced in the HEAD have been parsed. Depending on the structure of your site, you can reduce the visual loading time by moving scripts to the BODY.

You can profile your site's loading behaviour using developer tools in Chrome.

Olaf Tietze
  • 31
  • 4