Monday, 5 November 2012

Previous Interview Question Next Interview Question
Home

CSS bundle for webpage to load faster



The Main Aim of the CSS bundle is to reduce the http hits

 For each of these files, an HTTP request is sent to the server, and then the browser awaits a response before requesting the next file. Limits (or limitations) of the browser generally prevent parallel downloads. This means that for each file, you wait for the request to reach the server, the server to process the request, and the reply (including the file content itself) to reach you. Put end to end, a few of these can make a big difference to page load times.


<html>
<head>
<title>lighttpd</title>
<link rel="stylesheet" type="text/css" href="http://codehelper.in/css2/structure.css" />
<link rel="stylesheet" type="text/css" href="http://codehelper.in/css2/standard.css" />
<link rel="stylesheet" type="text/css" href="http://codehelper.in/css2/format.css" />
<link rel="stylesheet" type="text/css" href="http://codehelper.inm/css2/index.css" />
<link rel="stylesheet" type="text/css" href="http://codehelper.in/css2/promo.css" />
</head>
<body>
</body>
</html>
Firebug HTTP timing visualisation for CSS from lighttpd













Static Content Bundling
Maintaining small, modular stylesheets can make development easier, and make it possible to deliver styles specifically to the pages that require them, reducing the total CSS served per page. But we are seeing now that there’s a price to pay in the HTTP overhead.
This is where you gain performance from server side bundling of static content. Put simply, you make a single request to the server for all the CSS files required for a page, and the server combines them into a single file before serving them up. So you still upload your small, modular stylesheets, and the server is capable of delivering any combination of them as a single file.
Using the technique described in an article at rakaz.nl (PHP script also available there), we can handle special URLs that look like this:
http://example.org/bundle/one.css,two.css,three.css
For SitePoint.com, I wrote a bundling implementation in Lua for lighttpd/mod_magnet so that we can still avoid the overhead of Apache/PHP. When a combination of files is bundled for the first time, the bundle is cached on the server so that it only needs to be regenerated if one of the source files is modified. If the browser supports compression, lighttpd/mod_compress handles the gzipping and caching of the compressed version.
Lets check our load time now..


<html>
<head>
<title>lighttpd bundled</title>
<link rel="stylesheet" type="text/css" href="http://codehelper.in/bundle/structure.css,standard.css,format.css,index.css,promo.css" />
</head>
<body>
</body>
</html>
Firebug HTTP timing visualisation for bundled CSS
The Final Result
560ms! That’s 1.6 seconds quicker than the original example.
This bundling technique works for CSS and also JavaScript.. but obviously you cannot mix the two in a single bundle.



Previous Interview Question Next Interview Question
Home

0 comments :

Post a Comment