Faster Page Loads - Bundle Your CSS and Javascript

Have you ever watched your status bar while you wait for a page to load and wondered why several files seem to be downloaded before you see anything at all on your screen? Eventually the page content displays, and then the images are slotted in.

The files that keep you waiting are generally the CSS and Javascript files linked to from the “head” section of the HTML document. Because these files determine how the page will be displayed, rendering is delayed until they are completely downloaded.

HTTP Overhead

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.

Example Case

As a demonstration, I’ve created an empty HTML document which loads 5 stylesheets. Browser cache is disabled, and I’ve used Firebug, an invaluable tool for any web developer, to visualise the HTTP timing information. Oh, and I’ve omitted the DOCTYPE declaration for brevity only – no real sites were harmed in the writing of this article.

 <html> <head> <title>Apache / PHP</title> <link rel="stylesheet" type="text/css" href="http://www.sitepoint.com/css2/structure.css" /> <link rel="stylesheet" type="text/css" href="http://www.sitepoint.com/css2/standard.css" /> <link rel="stylesheet" type="text/css" href="http://www.sitepoint.com/css2/format.css" /> <link rel="stylesheet" type="text/css" href="http://www.sitepoint.com/css2/index.css" /> <link rel="stylesheet" type="text/css" href="http://www.sitepoint.com/css2/promo.css" /> </head> <body> </body> </html> 

Faster Page Loads - Bundle Your CSS and Javascript

A total load time of 2.24 seconds. For an empty page.

Lets see what happens if we request the same stylesheets from lighttpd, a lighter weight web server which is not being weighed down by PHP. It’s worth noting that the use of a separate domain for static content means any cookies set on the sitepoint.com domain will not be sent with the HTTP requests. Smaller requests are faster requests.

 <html> <head> <title>lighttpd</title> <link rel="stylesheet" type="text/css" href="http://sitepointstatic.com/css2/structure.css" /> <link rel="stylesheet" type="text/css" href="http://sitepointstatic.com/css2/standard.css" /> <link rel="stylesheet" type="text/css" href="http://sitepointstatic.com/css2/format.css" /> <link rel="stylesheet" type="text/css" href="http://sitepointstatic.com/css2/index.css" /> <link rel="stylesheet" type="text/css" href="http://sitepointstatic.com/css2/promo.css" /> </head> <body> </body> </html> 

Faster Page Loads - Bundle Your CSS and Javascript

We’ve shaved off half a second, but I suspect the bulk of the time is spent going back and forth to the server for each file. So how do we improve the load time further?

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://sitepointstatic.com/bundle/structure.css,standard.css,format.css,index.css,promo.css" /> </head> <body> </body> </html> 

Faster Page Loads - Bundle Your CSS and Javascript

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.

Replay

Category: programming Time: 2007-04-10 Views: 1
Tags:

Related post

  • Compress CSS and JavaScript Using PNGs and Canvas 2010-09-07

    This is a sneaky trick. It was devised by Jacob Seidelin at Nihilogic.dk and has been used by some participants in the 10K An Event Apart competition, though there is some contention as to whether it's in keeping with the spirit of the event. That sa

  • How can I write HTML, CSS, and JavaScript to make back-end developers work easier? 2012-02-03

    When I get a design from a designer, I get it as a PSD (Photoshop) file. I always expect proper layer and folder names, basically a clean and managed PSD. From this desigbn I develop HTML, CSS and JavaScript and deliver it to the back-end developers.

  • How do I add custom CSS and JavaScript to the System Master Page? 2015-01-26

    I'm using Seattle for our System Master Page. This is working fine, except now I need to insert some custom JavaScript and CSS into it. How do I add custom JavaScript and CSS to the System Master Page? Can I still use the default master page? -------

  • What are the options for running custom css and javascript files on a page? 2015-11-10

    To include custom css and javascript within a blog post or a page, one option would be to embed a jsbin, codepen, or plunkr link. In cases where you wanted to include external libraries like angular.js, d3.js, etc., these code editors and environment

  • my css and javascript files do not load and do not work? 2014-05-29

    my uploaded drupal7 website worked correctly for 2 days.but suddenly when i refresh it,every things go wrong. site loads with no css and no java,and no pictures. it said that the css (and js) files couldn't be found even though they were very clearly

  • Tool to generate an HTML page including all CSS and Javascript 2016-01-27

    I would like to know if a tool existed to generate a one HTML file from a set of HTML, CSS and Javascript files. It should parse the HTML and replace any include with the contents of the file. An example: <!DOCTYPE html> <html> <head> &l

  • is it realistic to make use of HTML5 local storage to store CSS, and JavaScript 2011-09-02

    The idea is to make use of HTML5 local storage to store frequently accessed CSS and JavaScript. For example (pseudo-code): var load_from_cdn = true; if (detect local storage) { if (cache of css, js found) { load the local storage cache load_from_cdn

  • Rounded Corners with CSS and JavaScript 2004-05-28

    Rounded corners are one of the most frequently requested CSS techniques. As with many things in CSS, there are various ways in which this problem can be approached. In this article, I'll look at the pros and cons of some common techniques and introdu

  • Best IDE for HTML, CSS, and Javascript for mac 2010-12-12

    I'm currently looking to move to using an IDE for web development. The options I'm considering are: Aptana Studio Coda Expresso Please base your answers on the following criteria, in descending order of importance: Supports HTML, CSS, JavaScript Powe

  • Why aren't HTML, CSS, and JavaScript used for desktop apps? 2011-06-12

    HTML, CSS, and JavaScript can be used to build beautiful (and useful) UI's (especially now we have HTML5 and CSS3), and lots of people already know them. Though it's still way beyond my reach, how difficult can it be to bring the whole web app thing

  • Putting Together HTML, CSS, and JavaScript 2011-08-17

    Hopefully this question isn't too broad- I am a competent iOS programmer and have some experience with Java (command-line tools). Over the last year or two I've dabbled into HTML, CSS, and JavaScript. Learning iOS and Java, I started with a book (Pro

  • Branding SharePoint 2010 CSS and Javascript - Training Courses? 2011-11-28

    I've been tasked with branding our new corporate website which will be on the SharePoint 2010 platform. Is anyone aware of some good training courses in the UK that might be able to help on the CSS and Javascript side? Whilst I know a little about CS

  • How to Use Character Entities in HTML, CSS and JavaScript 2012-01-21

    You've almost certainly encountered entities in HTML pages. They're commonly used for international characters, mathematical operators, shapes, arrows and other symbols. For example: ♠ ♣ ♥ ♦ © ® These map directly to UTF-8 characters. The symbol for

  • Tool to automatically inline both CSS and Javascript into HTML 2014-07-21

    Do you know some tool to automatically inline both CSS and JavaScript external resources into a HTML file? The goal is to have a single HTML file which can be properly viewed off-line. Similar to some old question on StackOverflow (but the answers th

  • Apply CSS and Javascript affect to images 2014-08-05

    Updated I am trying to add CSS and Javascript hover affect to some images in drupal 7 .. something like in this tutorial. http://callmenick.com/2014/03/06/image-overlay-hover-effects-with-css3-t ... Hover on some touch devices is sticky like iphone .

  • Proper way to customize an InfoPath web-based form with CSS and Javascript 2014-12-30

    I need to add custom CSS and JavaScript to an InfoPath web-based form. For which I am planning to export the source files and customize the view1.xsl file. If I add the customizations in the header, they will be removed by InfoPath Designer next time

  • Custom CSS and JavaScript 2015-11-25

    How to add custom css and javascript file in Drupal 8. --------------Solutions------------- there are several ways to add js/css, one example: Attaching custom javascript or css in your theme Add a library to yourtheme.libraries.yml in your theme fol

  • Drawbacks of including CSS and Javascript in HAML 2016-01-20

    I need to change the design of various pages of a website developed in Ruby on Rails. I was thinking of modifying the HAML files to include CSS and Javascript to make the desining nicer and more responsive. What could be the drawbacks of such an appr

  • Where to master HTML, CSS and Javascript? 2010-12-23

    Possible Duplicate: What should a developer know before building a public web site? I gotten interested in web-development lately. I am still a student. I learnt basics of HTML, CSS and JavaScript. Then I thought I should improve my server side scrip

iOS development

Android development

Python development

JAVA development

Development language

PHP development

Ruby development

search

Front-end development

Database

development tools

Open Platform

Javascript development

.NET development

cloud computing

server

Copyright (C) avrocks.com, All Rights Reserved.

processed in 2.511 (s). 13 q(s)