Eliminating HTTP requests using Data URI scheme on your Drupal web-site

Posted by doq

Data URI scheme can be used to include images in HTML document or CSS file. This gives you ability to save several HTTP requests for image files thus making your HTML pages open faster. Data URI scheme feature works mostly in all modern browsers except IE6 / 7 (special MHTML protocol can be used for IE instead but is not discussed in this article).

You may find it as an alternative of CSS sprites. But they are not suitable when you have background image that should be repeat-ed both vertically and horizontally.

I will use YSlow Firebug plug-in to check my web-site's performance and finding what can be optimized.

Front page receives Grade A for performance but still there are places to optimize - only Grade C for Make fewer HTTP requests rule:

Clicking on it gives us detailed description of what is wrong:

Yes, there are 9 external background images on the page. It recommends combining them into CSS sprites. Ok, lets review all the images by clicking on the YSlow -> Components -> cssimage tab:

Lots of images to be optimized but I will choose only one for demonstration - background-light.gif. It has background-repeat: repeat CSS style so sprites won't help here.

This image is less then 0.1KB in size. Additional HTTP request (even if just 304 response that just notifies browser to get image from its cache) will take much more time then downloading such an amount of data. So we will save additional hundred of milliseconds (depends on route from visitor to web-site's server of course) by putting this image into CSS.

How to implement?

Simply search for image in CSS files:

#headerLinks ul#topLinks {
  background: #ccc url(images/background-light.gif) repeat 2px 0;
}

and change your CSS to

#headerLinks ul#topLinks {
  background: #ccc url(data:image/gif;base64,R0lGODlhAwADALMAAOvr69DQ0AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAAAAAAALAAAAAADAAMAAAQFMIApaQQAOw==) repeat;
}
 
/**
 * Hack for IE6. Since IE6 doesn't support data URI scheme we use
 * original image for him.
 */
* html #headerLinks ul#topLinks {
  background-image: url(images/background-light.gif);
}
/**
 * Hack for IE6. Since IE6 doesn't support data URI scheme we use
 * original image for him.
 */
*+html #headerLinks ul#topLinks {
  background-image: url(images/background-light.gif);
}

Everything inside url() attribute was generated using the following PHP script (any ideas of Drupal module?):

#!/usr/local/bin/php
<?php
/**
 * @param $file
 *   File path to generate data URI scheme from.
 * @param $mime
 *   MIME type of file, e.g. image/png, image/gif.
 * @return
 *   Data URI scheme to be used inside url() attribute.
 */
function data_url($file, $mime) {
  $contents = file_get_contents($file);
  $base64 = base64_encode($contents);
  return 'data:'. $mime .';base64,'. $base64;
}
 
echo data_url('background-light.gif', 'image/gif');

What can I say - 100 more bytes into CSS and one HTTP request less.

Much more images to optimize, much more work to do. But at least this one optimization makes YSlow happy - Grade B for Make fewer HTTP requests rule:

More information about Data URI scheme

Data URI scheme on Wikipedia.
First attempt on embedding images into CSS files using data URI schemes.
Speed up Drupal web-site by reducing HTTP requests using data URI schemes.

doquesnet