I’ve read that to optimize page load, you should use one css and one js file because the browser loads them one by one and then it slows down the page load.
And I’m sure that I don’t know what I’m talking about, so please correct me…
If there is one huge 50kb CSS file or 5, 10kb files – shouldn’t the page load be the same? One css is finished loading and the browser should go on to the next one and continue downloading.?
This is pretty interesting to me so I’m excited to hear your answers. Thanks 🙂
Each time you request a page, HTML is loaded. While loading, the resources found are requested progressively to the server, which applies to CSS, JS, images, video files, etc…
The order depends on the position of the resource, so, first loaded are the elements in
<head>like<link...or<style...for CSS,<scriptfor JS, then the<body>resources.For the files, CSS and Image sources can load in parallel, but JS sources do not, because they depend on each others functions and code. So the recommended practice is to load all CSS files first by positioning them first in the
headelement, then all JS sources (this last ones in the proper order, so you don’t get JS errors).Why do you need to minimize the css, js resources, or even make sprites with small images?
To reduce the number of request. Each request has a cost in time and in kb (small), the time cost is the most important one. So loading 5 images of 10Kb means 5 requests, and 1 image of 50kb only 1 request. The same applies to CSS and JS.
Google explains it much better in this article: http://code.google.com/intl/en/speed/page-speed/docs/rtt.html#CombineExternalJS