CODEWITHSUNDEEP
javascriptjqueryhtmlcss
pufAmuf
pufAmuf

Reputation: 7795

Using one css/js file

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 :)

Upvotes: 3

Views: 498

Answers (4)

I.G. Pascual
I.G. Pascual

Reputation: 5965

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, <script for 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 head element, 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

Upvotes: 1

Brownman98
Brownman98

Reputation: 1065

There is overhead when the browser must download multiple files. Most browsers will only download two files simultaneously. So while the size might be the same 50kb the overall time taken will be different.

Upvotes: 3

j08691
j08691

Reputation: 207861

For smaller sites it really doesn't matter but for larger ones the additional requests generated by using multiple included CSS and JavaScript files can add up.

According to Yahoo's developer site: "80% of the end-user response time is spent on the front-end. Most of this time is tied up in downloading all the components in the page: images, stylesheets, scripts, Flash, etc. 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.

One way to reduce the number of components in the page is to simplify the page's design. But is there a way to build pages with richer content while also achieving fast response times? Here are some techniques for reducing the number of HTTP requests, while still supporting rich page designs.

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.

CSS Sprites are the preferred method for reducing the number of image requests. Combine your background images into a single image and use the CSS background-image and background-position properties to display the desired image segment.

Image maps combine multiple images into a single image. The overall size is about the same, but reducing the number of HTTP requests speeds up the page. Image maps only work if the images are contiguous in the page, such as a navigation bar. Defining the coordinates of image maps can be tedious and error prone. Using image maps for navigation is not accessible too, so it's not recommended.

Inline images use the data: URL scheme to embed the image data in the actual page. This can increase the size of your HTML document. Combining inline images into your (cached) stylesheets is a way to reduce HTTP requests and avoid increasing the size of your pages. Inline images are not yet supported across all major browsers.

Reducing the number of HTTP requests in your page is the place to start. This is the most important guideline for improving performance for first time visitors. As described in Tenni Theurer's blog post Browser Cache Usage - Exposed!, 40-60% of daily visitors to your site come in with an empty cache. Making your page fast for these first time visitors is key to a better user experience."

Upvotes: 4

ilivewithian
ilivewithian

Reputation: 19692

The amount of 'data' transmitted would be the same, but each http request has a number of headers that are part of the http protocol, also, establishing a new connection to a server incurs a small cost in time and bandwidth.

Making only one request removes the headers and reduces the number of times a client has to connect to a server.

Upvotes: 5

Related Questions