Use Google Page Speed Tool to Speed Up Your Site

With the vast majority of internet users surfing on high speed broadband connections (94% of active internet users in the USA), should we, as website owners and developers, even bother optimizing and shrinking our code, content, and resources? Yes! To stay ahead of your competitors, you want to have lightning quick load and response times while serving even greater content and products. If your website is lagging behind, your visitors may flock to someone faster.

But there's another important reason to speed up your website -- search engine ranking. Search Engine Roundtable has hinted that sometime in the future Google may alter a page's rank based on its speed and load time (or lower a sluggish website's rank).  This makes sense because the purpose of a search engine is to not just to provide relevant sources of information that the user desires -- but to provide them as fast as possible. Thus if Site A and Site B provide roughly the same desired information, and Site B is able to provide it 3 times as fast as A, the searcher would benefit by visiting Site B.

The question is not whether to optimize, but what to optimize and when. You want to optimize the slowest things first, so to assist webmasters, Google provides Page Speed, a cool Firefox plug-in that actually adds more functionality to the Firebug plug-in. Firebug is already very good for analyzing resource load times and Page Speed adds two more tools: Performance Analyzer and Activity Timeline.

The performance analyzer runs a bunch of tests on all resources of a website such as html, JavaScript, CSS, and image files. It checks or estimates the compression or compactness possibilities of files, inspects the HTTP headers, and suggests improvements in order of priority (or usefulness). After it reports about the areas of your website where performance can be best increased, you can read about the best practices to find out how to implement them.

Another nice feature is that it automatically minifies your JavaScript and CSS into separate files, and calculates the size difference in kB and percentages. You may then choose to replace the larger versions.

The activity timeline records and displays events during and after the page load process, showing you exactly when an event occurred and for how long. I didn't find this timeline as useful as Firebug's own Net graph that also provides time and detailed information on each resource, and that allows you to inspect the headers for each request/response pair.

There are a number of articles on the internet on best practices for improving your website's load and response times, but not many provide actual code samples for implementation. I'll provide here a quick PHP script to combine your site's CSS and JS into one HTTP request for each of these resource types.

<?php
// jsloader.php
if(!isIE()){
// GZIP data automatically for browsers that support it
// this will automatically set the appropriate headers and perform additional browser compatibility
ob_start('ob_gzhandler');
}

header("Content-Type: text/javascript");
header("Expires: ".date(DATE_RFC1123,strtotime("+360 days"))); // Expire in a year
header("Cache-Control: private, max-age=9999"); // set cache to private (don't use public proxy, set cache age to a few hours)

// output each js file simply as strings -- faster and safer than include()
// add all of your site's shared JS files here
readfile("./prototype.js");
readfile("./scriptaculous.all.js");
readfile("./sifr3.js");
readfile("./sifr3-config.js");

function isIE(){
// check if browser is Internet Explorer less than 7 (6 and earlier had
// problems with GZIP even though it might request it
list($xxx,$browser,$version) = browser_info();

if($browser == "msie" && $version < 7){
return true;
}

return false;
}

// Courtesy robert at broofa dot com
function browser_info($agent=null) {
// Declare known browsers to look for
$known = array('msie', 'firefox', 'safari', 'webkit', 'opera', 'netscape',
'konqueror', 'gecko');

// Clean up agent and build regex that matches phrases for known browsers
// (e.g. "Firefox/2.0" or "MSIE 6.0" (This only matches the major and minor
// version numbers.  E.g. "2.0.0.6" is parsed as simply "2.0"
$agent = strtolower($agent ? $agent : $_SERVER['HTTP_USER_AGENT']);
$pattern = '#(?<browser>' . join('|', $known) .
')[/ ]+(?<version>[0-9]+(?:\.[0-9]+)?)#';

// Find all phrases (or return empty array if none found)
if (!preg_match_all($pattern, $agent, $matches)) return array();

// Since some UAs have more than one phrase (e.g Firefox has a Gecko phrase,
// Opera 7,8 have a MSIE phrase), use the last one found (the right-most one
// in the UA).  That's usually the most correct.
$i = count($matches['browser'])-1;
return array($matches['browser'][$i] => $matches['version'][$i]);
}
?>


 to use this, insert this into your HEAD tag:

<script type="text/javascript" src="path/to/jsloader.php"></script>

 And that's it. You can use the example script for CSS files as well just by changing the header("Content-Type: "...) to text/css and readfile() on all of your CSS files.

Remember, browsers can only download two things at the same time from the same domain name (i.e. mysite.com). This can be dreadful if you have a bunch of CSS and JS scripts that are needed. Luckily, these resources are only needed on the very first page load, and after that they are pulled from the user's computer (cache). However, the initial page load is most crucial -- you want it to be fast, to keep a visitor on the site for the desired length of time. The ultimate solution to this is to set up a subdomain, or a content delivery network, to load the "static" resources like images and javascript which will raise the restriction by an additional 2 or 4 simultaneous resource requests.

Warning! If you already have configured your web server to do automatic GZIPing of content, omit the PHP function ob_start('ob_gzhandler') in this example -- otherwise you may get twice GZIP'ed or unreadable content.

We applied some of these techniques to the RustyBrick.com homepage. Before the changes, the average full load time from an empty cache was 36 seconds (over 4 tries). After the techniques it is now about a 10 second load time, which is 33% of the original load time.