Before launching our new site I spent a day trying to make the site faster. The new site is pretty graphics heavy and makes extensive use of javascript and CSS, so to begin with it was pretty slow. I found that the net traffic monitor built into Firebug was really helpful in showing me where the stumbling blocks were and by the end of the day I had got the page load speed down by 75%
If you haven't used it before, you'll need to install Firebug from
getfirebug.com. Then visit your site, pick a page to test (make sure you always test the same page to compare results), open up Firebug and make sure you tick the box to switch the net monitor on.
Next, ensure you've cleared your cache so that the browser is loading a fresh copy of all your files. Do this before each test to make sure its fair. Then just press f5 and watch as your files load. When it's finished you'll get a total at the bottom of the page sizes and the load time. My results were as follows.
Load time: 8.4 seconds
Total file size: 818k
8.4 seconds to load the page. In this day and age that's pretty slow. Still, at least now I could see what the big files were and most importantly what order they were all loading in.
Next, I installed a Firebug Plugin called Yslow, from
Yahoo, it's a plugin for a plugin, which analyses your traffic and gives you some suggestions as to how to reduce it.
Using these tools I set about reducing the page load times....
JavaScript and CSS files don't load concurrently
I knew this already, but the net monitor really showed me what a difference it made. All your images on the page will load at the same time, but the browser has to wait for each script/CSS file to load before it can load anything else.
I had 5 CSS files and 15 external javascript files being loaded in on every page. My net monitor looked like a large arc while it loaded each JavaScript file one at a time. Once those were done it loaded everything else quite quickly.
So, I took all the javascript and put it in a single file. It's quite a big file but it gets cached after the first visit and it's faster to load than 15 individual files. This alone cut the load time by around 2 seconds.
JavaScript should be packed
Even better than putting all the scripts into one file. Put all the scripts into one file and minify it using a JavaScript packer. I recommend Dean Edwards packer which you can find here ...
packer
Running everything through the packing script reduced the file size to just 77k, a third of it's original size.
Gzip all files on the server
This was one of YSlow's suggestions. Because we use asp.net we run our site on a windows server. By default it uses Gzip to reduce the size of images, but not script files and style sheets.
I found a great tutorial on how to do this
here. It's quite simple really. There's a slight processor overhead because it has to Gzip every file it serves, but it'll reduce the file sizes and seemed to make quite a difference on our site, bringing the load times down by just over a second.
Lazy load Google Maps script only when necessary
If you click on the "contact us" button at the top of this page and then click on "map and directions" you'll see a Google Map of our office. This appears on every page and we were loading the map on every page, even if the user doesn't drop the panel down.
The Firebug net monitor was showing me that the script was over 100k and that 6 tile images were being loaded every time you visit a page. This seemed incredibly inefficient so I looked for a way to lazy load the script when the panel opened. It turned out to be pretty easy as google provide some example code, which looks a bit like this...
function loadMap() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
}
function loadScript() {
var script = document.createElement("script");
script.setAttribute("src", "http://maps.google.com/maps?file=api&v=2.x&key=APIKEY&async=2&callback=loadMap");
script.setAttribute("type", "text/javascript");
document.documentElement.firstChild.appendChild(script);
}
The clever bit is that you can call any callback function to run once the script has loaded.
So, another 150k off and everything is loading pretty quickly.
If you're using ASP.NET, take the application out of debug mode!
Looking at the net monitor now it was all running pretty smoothly with most files loading concurrently in good time. The last problem was the aspx file itself.
No scripts, CSS or images can load until the HTML page has been loaded and that was taking a bit of time so getting the initial page loaded as fast as possible should be a priority. Mark here switched off ASP.NET's debug mode and it made quite a difference. It's worth remembering to do that every time you put a site into production.
That was pretty much it. The last thing I did was to remove a couple of images that were being preloaded and didn't need to be. Nothing big but it did remove another 45k!
Conclusion
Well, my final figures were....
Load time: 1.8 seconds
Total file size: 312kk
Much more acceptable, about a third of the original page weight and 4x faster. All of this was achieved through zipping, packing, removing and tweaking and Firebug's net monitor and YSlow really helped me to see where the bottlenecks are.
The solutions might not be the same for you, but the diagnostic method should be the same. Just look for the bottlenecks and use your common sense to tidy everything up.
.