5 Asset Management Tricks for Faster Websites

When it comes to front-end performance, good asset management is just as important as good code. Simply put: downloading assets takes time.

Computers and browsers now render pages and execute Javascript faster than ever. Although user bandwidth is increasing, the filesize of assets has been growing in turn.

These factors, combined with the rise of the mobile web, have made bandwidth the primary bottleneck in website performance.

Here are 5 simple steps to reduce download times with better asset management on your sites:

1. Limit HTTP Requests

One of the easiest ways to improve asset management is to reduce HTTP requests.

When an image, stylesheet, JavaScript or web page is requested, your server has to do a bit of work to lookup and serve that file. So it’s a good idea to limit the number of these requests as much as possible.

• Replace multiple images with image sprites
• Merge JavaScripts into a single file
• Merge stylesheets into a single file
• Combine Ajax requests

2. Compress Assets

JavaScript / CSS compression is basically minifying to the extreme: it removes extra whitespace and renames local variables to be as short as possible. This ensures that your JavaScript and CSS files stay compact, and makes a dramatic difference in filesize over non-minified code (especially if you use 4 spaces per tab like I do).

For compression, try YUI Compressor or Packer.

Images should also be compressed, either using standard JPEG/PNG compression, or Adobe’s Save for Web dialog.

Finally, if you’re really concerned about performance, minify HTML as well.

3. Gzip Everything

Gzipping assets is just about the best thing since sliced VPS.

Gzip drastically reduces filesizes, leaving gzipped assets at around 40% the size of their unzipped counterparts. Although browsers take a small performance hit when decompressing these files, the overall result is a huge performance increase caused by significantly shorter download times.

Gzip is also very versatile: it can be used a variety of ways for all HTML, CSS and Javascript assets.

For experienced pros, gzipping can be achieved very easily using .htaccess. However let’s walk through some simpler techniques for the rest of us.

First, gzipping HTML is a piece of cake using PHP. Simply include this snippet at the top of any PHP page:

<?php ob_start("ob_gzhandler"); ?>

Just make sure to call this before any HTML output, and your PHP will serve gzipped HTML.

Next let’s do something similar for our CSS assets:

<?php
ob_start ("ob_gzhandler");
header("Content-type: text/css; charset: UTF-8");
?>

and our JavaScript assets:

<?php
ob_start ("ob_gzhandler");
header("Content-type: text/javascript; charset: UTF-8");
?>

Put these snippets at the top of your CSS / JavaScript files, but bear in mind that Apache will need to view these as PHP files. The easiest way to accomplish this is to change the extension, e.g. site.css becomes site-css.php.

While linking to site-css.php works just fine in a or