News FeedSpeed up your website with these tips
Most of us have broadband nowadays but with sites becoming more complex with the use of Ajax and JavaScript Libraries the average web page has tripled in just five years. Developers seem to be getting lazy and building fat websites that are becoming too large for most of our average broadband connections. When at work our broadband line isn't fantastic and I often end up feeling like I'm using dial-up again!
A whopping 55% of users felt speed is the most important factor in a site.
Source: Study: Web Users Prefer Speed Over Customization (A very interesting read).
Ok so with that out of the way what can we do to help make our site the Porsche 911 GT3 of the web?
Images - use PNG format
Use fireworks to create and edit your images for your website then use the Slice tool, icon indicated by the red outline in the screenshot below. Use the optimize and align box to setup how you want to export. Use PNG 8 where you can, everybody seems to stay clear of PNG thinking it's not supported, but this is now a thing of the past anything a GIF can do, a palette PNG (PNG8) can do too.
If you haven't got Adobe's fireworks then smush.it! is a fantastic tool, it takes in most types of image formats and automatically converts them to PNG's.
Minimize HTTP Requests
80% of page load time is tied up in downloading all the components in the page: images, stylesheets, scripts, Flash, etc. Reducing the number of components in turn reduces the number of HTTP requests required to render the page. This is the key to faster pages.
Each object needs to be requested, where this gets tricky it's not just the obvious images it's all the images in your CSS and JavaScript files too!
For CSS make sure your using "Fast Rollover" technique so only one image is being requested. And also look into CSS Sprites.
I would like to make one point that you have to get a balance between decreasing the amount of objects on a page and keeping your files organised. Yes you can choose to stuff all your CSS in one file but that may well then make things disorganised for you, it does for me!
To test how many http requests your page has use the tool mention in the next tip.
Use YSlow
YSlow analyzes web pages and suggests ways to improve their performance based on a set of rules for high performance web pages. YSlow is a Firefox add-on integrated with the Firebug web development tool.
Ok first of it tells you in the bottom right how long the page took to fully load.
Once you then open up YSlow it gives you a grade for your page then a breakdown of where you could improve. This is the real highlight of this tool, it really pin points your problem spots. You can select the title that you have got a low grade on and it will suggest ways to improve that section.
Note: CDN is not relevant for smaller sites and you can remove this from your grading by filtering it out.
If you click on "components" tab you will get a list of all your objects on the page and you can order these by size so you can see your real trouble maker files.
JavaScript Libraries
When using YSlow it made me realise just how big all the JavaScript library files are. If you're good at JS you may well be able to rip out some of the sections you don't need to decrease the file size. If you're not so hot with JS, I would suggest you take a look at how much you're really using the lbrary and could you live without the effects and functionality or use a smaller group of JS functions. When I looked at redwood.com I realsied I had 800+KB of JS just for a sliding effect that was on a few pages! Was this necessary? I didn't think so and ripped it out and replaced it with a basic "on click show div" so it popped in there and didn't look so good but my whole site was faster and a better experience for the user.
Javascript Libraries do have there place, if you do require one I would suggest you take a look at JQuery it's a small compact Javascript Library.
Linking to External Files
Links to your JavaScript files don't need to be in the header, the best place to add them is at the bottom of the page. If you use "document.write" this might not be possible and you can link to js file just above your JS code on the page. Another advantage of this technique is if you don't need the script on this page then you don't add it!
PHP Flushing
In PHP you have the function flush(). It allows you to send your partially ready HTML response to the browser so that the browser can start fetching objects while your backend is busy with the rest of the page. A good place to consider flushing is right after the HEAD
Example:
<!-- css --> </head> <?php flush(); ?> <body> <!-- content -->
There are some great articles that go into this subject in a lot more detail, I have just picked out the main points that were most useful to me.
Yahoo - Best Practices for Speeding Up Your Web Site
websiteoptimization.com - Study: Web Users Prefer Speed Over Customization
Six Revisions - 8 Excellent Tools for Optimizing Your Images
Six Revisions - Five Ways to Speed Up Page Response Times
Published 15.07.09