Use Google Page Speed Tool to Speed Up Your Site

Web Site SpeedWith 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.

Bookmark and Share    
blog comments powered by Disqus

15 COMMENTS

posted by on: Feb 3, 2010 01:01pm

Although most of us have fast internet connections, as you said, a fast loading site can make our business better than the competition's. Many people don't even understand the importance of having an online presence, not to mention the site's speed. Mathew Farney

posted by on: Apr 11, 2010 05:00pm

Nice article, thanks for the tip I'll probably tell my programmers to just use the tool and fix the thing :) I really don't like messing with C-O-D-E!

posted by Theo on: Apr 14, 2010 01:58pm

Just as you posted : "not many provide actual code samples for implementation" so thank you for the code, i will try to implement this one as it is very useful !

posted by andywalpole on: Apr 26, 2010 07:20pm

I've implemented it just as above but I'm getting the following error in Firefox: Error: navigator.appVersion.match(/MSIE (\d\.\d)/) is null Source File: http://www.mechanic-two.suburban-glory.com/scripts/jsloader.php Line: 22

posted by on: Apr 27, 2010 01:04pm

thats a javascript error in your own code. Probably has nothing to do with the speed tool or your javascript combiner.

posted by Xiemeirong on: Jun 20, 2010 01:37am

gghhhg

posted by nike air max shoes on: Jun 22, 2010 01:58am

The post of content is very interesting and exciting. I learned a lot from here.The content from simple to complex, so all of you can come in . No matter you want to see what can be found.By the way ,there are some websites into321 is also very wonderful,you can go nike air max shoes and visits-our-site see.

posted by weboptimist on: Nov 17, 2009 08:13pm

Terrific article and thanks for the code. Very timely as I have been working on getting a client to offload javascript to an external file! Will be forwarding it to them.

posted by amybsells on: Nov 18, 2009 01:03pm

Fantastic... would it ever make sense to load images in a similar fasion as the JS/CSS?

posted by Jerry Nordstrom on: Nov 18, 2009 02:12pm

Michael, good article. It would be useful to many people to post some reasonable goals and parameters. For example. Is a change of 5KB significant? What is a baseline for a fast page DL? 10,20,30,60KB? If my page is only 15KB should I even bother with trying to reduce it? Can I not detect the connection speed and server a high end version of the page? When it comes to code, if it can be simplified and reduced, then do it, but when it comes to visual elements you have to be very careful. Page optimizers need to continuously evaluate speed over the effectiveness of the elements you are reducing or eliminating. Many times I see images "optimized" at the expense of quality; choppy, fuzzy, or images cropped too small. This hurts the quality and effectiveness of the page. When conducting multi-variant tests be sure to take note of page size in comparison to the effectiveness of the graphical elements. For beginners, use Photoshop's Image ready to optimize/reduce your images without sacrificing visual quality. Learn to chop up larger sized images into JPG, PNG and GIF and optimize each slice files to get the best mix of quality and size. Cheers, Jerry

posted by on: Nov 18, 2009 04:12pm

In determining a goal for your page size, you would have to consider your audience and your content. Google Analytics will help here in giving you a percentage of visitors by connection speed. Of course the goal should always be to have the smallest KB size possible without sacrificing functionality or your minimum acceptable visual quality. The smaller the better. 5KB is significant for a total page size (all resources) of 15 KB (thats a 66% decrease) but it is very insignificant for a 500KB page size (just 1% decrease), so it depends on what your total page size is, and the potential of reduction. As for image loading, using JavaScript you could delay large or hidden images until after the page is loaded and the important structure resources are downloaded & processed.

posted by Nike Funs on: Dec 2, 2009 11:00am

Thank you very much! Thank you!

posted by Nike Funs on: Dec 2, 2009 11:34am

Thank you!

posted by on: Nov 22, 2009 11:18am

Very nice information on how to speed up loading faster our web pages through Google Page Speed Tool. Informative and very useful for us. I am using this for my web site: http://questionsforcouple.blogspot.com

posted by geek on: May 7, 2012 12:12pm

nice article, page speed - important to consider it if you want to rank beter and have good traffic