Ways to Improve Your Website’s Performance

Most fail to implement even half of these changes and pay for it through slow load times.

1. Consolidate your javascript and css files

If you are embedding more than two javascript files per document or more than one CSS file per document, sorry, but you’re doing it wrong.  It is much better to embed one 60K CSS or JS file than to embed three 20K files.  By doing so, you are making it easier for the browser to cache the files and you are reducing the number of HTTP requests your browser has to make on page load.

2. Minify javascript and css

If you are using jQuery or some other javascript framework they will have minified versions available.  Beyond that, you should only use what you need.  Do you really need every single effect that comes along with this framework?  Does this plugin really add anything to my interface?  K.I.S.S.  If you are writing your own javascript,  /packer/ is a great resource for minifying your javascript.

You should only minify your CSS file after you are done writing it (for quicker formatting on your end).  If you Google “Compress CSS” there are plenty of resources available, although CSS Drive has my favorite.  Remember to back up your CSS file beforehand, just in case a) something goes wrong or b) you plan on redesigning your pages in the future.

3. Compress your javascript/css/html files

I’ll admit, I was scared the first time I tried this.  The worst that can happen is you get a temporary 500 internal server error from your .htaccess file or php gzip compression just doesn’t work.  Not scary at all.  Also keep in mind that we’ll only want to compress plain text files such as php, css, html and javascript so as not to overload the CPU. The most important thing you’ll want to check before doing this is obviously if your server allows you to do so.  Unfortunately, different hosting companies offer different compression packages. Most, if not all, allow the basic PHP compression ob_gzhandler and a happy few allow mod_gzip and mod_deflate in Apache.

If your server uses Apache2, mod_gzip is out of the picture so we’ll use mod_deflate instead. Here is an example of basic compression with mod_deflate:

<IfModule mod_deflate.c>


SetOutputFilter DEFLATE


#We can't compress images
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ \
no-gzip dont-vary


#Don't compress executables
SetEnvIfNoCase Request_URI \
\.(?:exe|t?gz|zip|bz2|sit|rar)$ \
no-gzip dont-vary


#Don't compress pdf files
SetEnvIfNoCase Request_URI \.pdf$ no-gzip dont-vary


</IfModule>

If we are able to use mod_gzip, we’ll use this:

<IfModule mod_gzip.c>


mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$ #Compress plain text
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.* #Exclude images
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*


</IfModule>

The above two examples are really the easiest way to do this, since .htaccess will take care of everything automatically. If you are not allowed to implement either of the above, there is a php alternative. What you’ll want to do is create a file in your includes called gzip.php and add the following:

<?
if(isset($_SERVER['HTTP_ACCEPT_ENCODING']) && substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip'))
{
ob_start('ob_gzhandler');
}
else
{
ob_start();
}
?>

Add at the top of all of your main documents and then add the line to the bottom of each. This will compress your html. To compress your javascript files and css files there is slightly more work. You’ll want to turn each javascript file into a .php and at the top of each include:

<?
// start ob_gzhandler
include('path/to/gzip.php');


//set document type headers
header ("Content-Type: text/javascript; charset: UTF-8");


//set cache-control headers
header("Cache-Control: must-revalidate");
$addition = 60 * 60 * 24 * 365 ;
$expires = "expires: " . gmdate("D, d M Y H:i:s", time() + $addition) . " GMT";


//set expires headers to 1 year
header($expires);
?>

and again you’ll want to add the <? ob_flush(); > to the bottom of each of those documents. The above example is for javascript files, but you can use the same mold for CSS by changing Content-Type to text/css. Your embed for javascript files would then look like:

<script type="text/javascript" src="path/to/javascript.php<?='?v=' . filemtime($_SERVER['DOCUMENT_ROOT'].'/path/to/javascript.php');?>"></script>

4. Add expires headers, configure entity tags

Why do we want to do this? It is going to help the browser cache your files easier and the more files a browser caches of yours, the less HTTP requests the browser has to make. Load time will also decrease because your browser will have to download fewer files to load the page. To do this properly, simply add this to your .htaccess file:

<IfModule mod_headers.c>


#Revalidate in 1 hour
<FilesMatch "\.(html|htm)$">
Header set Cache-Control "max-age=3600, must-revalidate"
</FilesMatch>


#Cache expires in 1 year
<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Cache-Control "max-age=290304000, public"
Header unset Pragma
Header unset Last-Modified
FileETag MTime Size
</FilesMatch>


#Never cache this, files are dynamic
<FilesMatch "\.(php)$">
Header set Cache-Control "private, no-cache, no-store, proxy-revalidate, no-transform"
Header set Pragma "no-cache"
</FilesMatch>


</IfModule>

Because we are setting the expiration on our javascript and css files to 1 year and we may edit them within that time frame, we’ll want to add a version number to each of them. To do this, simply change your embed code to resemble the following:

<script type="text/javascript" src="js/filename.js<?='?v='.filemtime($_SERVER['DOCUMENT_ROOT'].'/path/to/js/filename.js');?>"></script>

What the above code does is grab the file’s date of last modification (filemtime()) and appends it to the file name and what you end up with is something like this:

<script type="text/javascript" src="js/filename.js?v=1256944181"></script>

You can use this same method for your CSS files, as well. Images that are updated may require renaming depending on which browser a visitor is using.

5. Cool it with the images

This is a simple one.  Don’t be an idiot – if the image isn’t adding to the content/design or making it easier for a user to navigate the site, chances are you don’t need it.  The truth is, you can do a lot with CSS and you can make it look just as hot as you can with images. You should also try to use png’s instead of jpg’s or gif’s whenever possible. PNG’s provide the best quality in almost every situation and have generally have smaller file sizes.

6. Use CSS Sprites for background images

This is especially important for things like rounded corners and menus that require more than 1 image to complete.  You can make a full menu with hovers included in one image.  CSS Tricks has a great article on how to use CSS Sprites to your benefit. They use jpg’s which, as you now know, I am totally against. So just imagine that post including png’s and you should be all good.

This is YouTube’s master PNG file used for all background images

7. Download YSlow + Firebug or use some other free website optimization analyzer

You can download YSlow and Firebug here: http://developer.yahoo.com/yslow/

There you have it, these are some simple steps you can take to get the most out of your website.  Feel free to ask any questions in comments or if you’re one of those types, call me an idiot. To learn more about website performance and optimization, visit Yahoo Developer Network

1 comment Did you know you could increase this number by commenting?
  1. Jared Lunde

    Ajax test.