Reducing HTTP requests using data URLs to increase performance

Updated
Tagged
performance

There are many ways you can increase the performance of your website. One of the areas that can be looked at is the number of HTTP requests that are required to retrieve many of the smaller assets for your page. Each request will have a certain latency and download time associated with it.

For some assets (like javascript and CSS) you may be able to combine the files to reduce HTTP requests. Images can also be combined and image ‘sprites’ used to reduce many small downloads (ie. for rollovers). This has been used to display the images in this site’s main menu.

But another option available is data URLs.

Data URLs

This technique is something that could not really be taken advantage of until recent times. This is due to the fact that Internet Explorer up to and including version 7 don’t support it. Version 8 does with some limitations.

What it basically entails is rather than specifying an external resource in your HTML or CSS file that the browser has to go and fetch (another HTTP request), you encode the resource and embed it into the HTML or CSS file itself. This eliminates more HTTP requests and their associated waiting.

Benefits & disadvantages

Just some of the benefits include:

The cons include the following:

Example

So in your CSS file, instead of this:

1
2
3
#foo {
    background: transparent url(/images/bar.png) top left no-repeat;
}

you would have this:

1
2
3
#foo {
    background: transparent url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKBAMAAAB/HNKOAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9kMEgYuCMdUaP4AAAAZdEVYd') top left no-repeat;
}

Now this doesn’t make your CSS file any nicer looking but if you happen to use a number of small images (like list/bullet images) then this technique can improve your page load times.

Care must be taken, however. You may need to include conditional comments to load a legacy style sheet (for CSS embedded data URLs) for certain browsers, overriding the valid CSS properties. For example:

1
2
3
4
<link rel="stylesheet" type="text/css" href="/css/default.css" />
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="/css/crappy-browsers.css" />
<![endif]-->

Online tools

There are many around, here is another one:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<form id="data-url" enctype="multipart/form-data" action="/data-urls/encode/" method="post">
    File to encode:<input name="origfile" type="file" />
    <input id="data-url-submit" type="submit" value="Encode File" disabled="disabled" />
    <span id="data-url-loading"><img src="/images/loader.gif" alt="loading" /></span>
</form>
<div id="data-url-response"></div>
<script type="text/javascript">
$(document).ready(function(){
  $.getScript('/js/jquery.form.min.js', function(){
    $('#data-url-loading').hide();
    $('#data-url-submit').attr('disabled','');
    $('#data-url').ajaxForm({
      target: '#data-url-response',
      beforeSubmit: function(){
        $('#data-url-loading').show();
        },
      success: function(){
        $('#data-url-loading').hide();
        $('#data-url-response').show();
        }
      });
    });
  });
</script>