When it comes to front-end performance, good asset management is just as important as good code. Simply put: downloading assets takes time.
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.
- Replace multiple images with image sprites
- Merge stylesheets into a single file
- Combine Ajax requests
2. Compress Assets
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.
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"); ?>
While linking to
site-css.php works just fine in a
tag, there are a variety of reasons to opt for the native
css extension rather than
php. If the extension matters, use a quick rewrite in .htaccess:
RewriteRule ^css/site.css$ /css/site-css.php
4. Set Cache Expirations
Some browsers won’t cache assets whose cache expirations aren’t set. So it’s a good idea to set expirations in the future for any assets you want cached by browsers.
Conversely, if there’s an asset that you don’t want cached, simply set its expiration in the past.
However, setting cache expirations can be a bit tricky. Since they are controlled via HTTP headers, you’ll need a way to manipulate these. On any Apache server, this can be done via .htaccess, but this might be a bit difficult for .htaccess beginners.
Alternately, HTTP headers are easy to set if you use an asset delivery service such as Amazon S3 (which I highly recommend for a variety of reasons). With Amazon S3, there are a variety of tools you can use to easily set HTTP headers, such as S3 Hub for Mac and S3 Browser for Windows.
Finally, HTTP headers can be set via PHP, but this will only help with JS / CSS assets, and not images. This is a big drawback since images usually benefit the most from cache expiration headers: they are used more frequently and tend to be more static than JS/CSS files.
5. Use a Cookie-less Domain
Cookies fatten the filesize of every asset you serve, and just like with real cookies, it’s an issue of quantity. Even a few hundred bytes of cookies becomes a big deal when you consider that they’re downloaded with every single asset.
One way to handle this is to use a separate subdomain for static assets. However you’ll need to be careful to set cookies with “www.yourdomain.com” instead of the default “.yourdomain.com”, which is inherited by all subdomains.
However if you’re like me and don’t use the www subdomain, you’re out of luck for using a cookieless domain. One way to get around this is purchasing a separate domain for static files, like yourdomainassets.com.
But if you’d rather not spend money on domain registration, there’s also a free option. 2static.it provides a free cookie-less subdomain that can link to a (sub)domain of your choice. The only downside with this service is the lack of branding: although you can set a subdomain name, you’ll have to be OK with users seeing 2static.it as the root domain for all your assets.