A faster web with Resource Packages – Mozilla suggestion to have just one HTTP request

One of the most common problem on the web is slow web sites, wasting he time of end users. Now, perhaps, Mozilla has come up with a solution for this, which will be applicable for all web browser vendors.

Background

One of the main problems slowing web sites down is the number of HTTP requests, i.e. the number of times a separate file need to be retrieved from the server; e.g. images, CSS and JavaScript files. Depending on web browser, you can only have between 2 and 8 concurrent HTTP requests. There can also be delays between requests, depending on file type asked for, redundant header information sent etc.

You can always combine all CSS files into one and all JavaScript files into one through a clever deployment script, but it’s still a couple of requests. Then with images, you can use CSS sprites, but that could affect memory, and there’s still no solution for inline images in a web page.

So, what if we could combine all HTTP requests into one?

A picture of someone surfing a wave

Picture from standing on the break on Flickr

Resource Packages

Alexander Limi of Mozilla has been working on a solution to this, described in detail in Making browsers faster: Resource Packages. The idea is to be able to combine all HTTP requests into one, and have this implemented in all web browsers, and to have it backwards compatible.

Sounds to good to be true, right? :-)

Implementation

The idea is to use the ZIP format, which is supported on all platforms, and to package all resources in a web page into one ZIP file. You then instruct the web browser, via a link element, to download that ZIP package of resources.

	<link rel="resource-package" type="application/zip" 
		href="site-resources.zip">

Note that the type attribute is not needed in HTML5. Also worth mentioning is that the files in the resource package should take precedence over all files included in the page through other elements (e.g. the src attribute on images and script elements). Paths on the resource file will be relative to where the actual resource package exists in the hierarchy.

You can also complement it with a manifest file that list all your files in the resource package, and also be able to use it in conjunction with Offline Resources in HTML5.

javascript/jquery.js
styles/reset.css
styles/grid.css
styles/main.css
images/save.png
images/info.png

To make this work for any web site you build, you could either manually, or through a deploy script, zip all the necessary files together for your resource package. And when it comes to inline images in a web page, you could actually let the server just zip it on the fly, first time that page is being requested – it will be some work for the server, but the performance gain of just one HTTP request is very likely to make it worth it.

A picture of a running cheetah

Picture from Mast Farm Picnic – 019 on Flickr

Web browser implementations

What web browser vendors need to do is implement support for a link element to include a resource package, unpack it and then use those files instead of those referenced at other places in a web page. Older web browsers lacking support will just ignore this and work as they always have.

What is really exciting is that this is already to be implemented in Firefox 3.7!

And what is also very encouraging is that Mozilla have been sending this proposal out to other web browser vendors, so everyone can offer it in their respective web browser (the beautiful thing of an organization such as Mozilla :-) ). They have been in talks with performance guru Steve Souders, Alex Russell of Google and Ben Galbraith & Dion Almaer of Palm to get good feedback from an implementor’s perspective.

Perhaps the web will actually be fast(er) in the future!

Posted in Developing,HTML5/HTML/XHTML,Mozilla,Technology,Web browsers |

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>