Posted in: Archive
I’ve recently spoke of the importance of speed with your website or blog. It can have a significant impact on site goals, and in many cases improve bounce rates and increase page views. Paying attention to detail and improving page load speed can really get your pages performing at their optimum. Here are a collection of some of the best ways that you can achieve faster page loads.
1) All Sites – on page speed
This has a couple of benefits. Firstly, chances are the Google version already exists in the browsers cache. This means it doesn’t have to download at all – resulting in a speed increase for your sites. Secondly, you don’t end up paying for the bandwidth. Thirdly, you get an automatic upgrade to the latest version of the library without replacing it on multiple sites, providing you don’t specify a version number.
There are a number of way to optimise images for speed. Choosing the correct format is first and foremost, and every designer (print or web) should know when to choose between gif, jpg and png when working on the web. There are a number of tools out there to help with optimising individual images, but ultimately this should be performed at the slice and dice stage out of photoshop or fireworks.
I’ve found in the past the compression engine within Fireworks to be superior to Photoshop when analysing quality verses size. As for web based tools Yahoo SmushIt is a definite must, even if its just to analyse which images you need to concentrate on. For another offline free tool – Shrink-O-Matic is a great Adobe Air application for compressing images.
3) Lowering web requests
Web requests are individual web page calls to a web server for a file. If you have 5 images on a webpage (and nothing else) – this will equate to 6 web requests. One for each image and one for the HTML file itself.
You should do everything in your power to lower the number of requests that you make – the lower that number the better. There are a couple of things you can do to save on requests, but the main gist of the technique is to combine requests where you can. E.g. if you have 3 css style sheets, separated logically for your developers – combine them into one. Css image sprites are another way to lower your web requests.
Also goes without saying that you should make sure any dead (404) requests for missing files are removed from your source code.
Sprites work by combining small images such as icons into one big image – then only showing the user the required section that they need to see by clipping the container of a div with css. There’s a good article on alistapart from Dave Shea on the technique – worth a read if you are unsure how this flies.
4) Client Side Compression
If that is a step too far, you should learn how to use shorthand CSS as a matter of course as you are coding, it will also yield higher compressions when you run it through something like YUI. Too many classes in your html is also a bit of a code smell. The very nature of CSS allows you to specify a style for descendants of other elements – in other words letting the styles cascade often lowers the amount of code in the HTML and CSS file.
5) Server Side Compression
For server side compression, you should firstly ensure that Gzip compression is setup and ready to roll. For IIS 6.0 users, get yourself over here and here for a better explanation that I can give on how to get it going on the server.
6) Position of elements
7) Server side code speed
If you do any coding of your own, somewhere along the way you are going to do something stupid. 9 times out of 10 bottlenecks occur at the database, but sometimes you can ease up on the cpu. Profiling your code is a great way to work out where the problems are, and where to concentrate your optimisation efforts. They also give you a visual way to see which functions and subs are the most popular within your code. XDebug is one profiler for PHP Facebook have also recently released a code profiling tool for PHP. Alternatives exist for platforms such as Microsoft.NET – there’s a good list over here for anyone else on MS stack. For that 1 time when your PHP is the reason, have a look at this article on speed tips for php.
8) Database code speed
As I’ve already said, optimising the database code will often alieviate the majority of speed related issues on the server side. Basic tips would be to avoid joins unless necessary – and indeed sometimes its worth weighing up the pros and cons of normalisation in some cases. Use stored procs on data intensive queries where possible, they’ll get compiled and the execution plan cached, resulting in faster runs. Don’t select * ever – choose which fields you need. It’s also worth defragmenting your database every so often to get a speed boost.
mysqlcheck -o <databasename> for MS SQL DBCC DBREINDEX for MS SQL
SQL Server also comes with an excellent SQL profiler tool. This will let you see bottlenecks and frequent queries as users hit your web application. There’s a great walkthrough for using it here.
MySql also comes with a profiler, although I haven’t used it.
9) WordPress tips
WordPress out of the box is relatively speedy. It’s not until you start adding the numerous plugins, buttons and features that you start to notice the speed of your site being impacted.
There are a couple of cache and speed plugins available for WordPress which can speed up a slow site – particularly those with lots of plugins. Wp-cache, Wp-SuperCache and Batcache.
General Speed Plugins
Css compress automagically compresses and gzips any file that is a dynamic stylesheet in WordPress. Yoast’s optimise DB plugin is great at defragmenting your blog DB automatically.
I haven’t gone on and listed loads of plugins here, as generally the less plugins that you have installed the faster your blog will be. Go through your unused plugins and uninstall the ones you aren’t currently using.
10) Tools, Plugins and Resources
YSlow – Plugin for Firefox / Firebug to show page bottlenecks – from the Yahoo optimisation Team
PageSpeed – Google’s equivalent plugin for Firefox
Google Speed – Site optimisation Tips, provides resources on speed.
Yahoo Speed Tips – Speed optimisation tips from the Yahoo team.
Common Sense WordPress speed tips from Yoast.
And Break’s – some other relatively unknown WordPress speed tips
Pingdom gives a break down of your website speed with their tools.
Web speed analyser calculates page size, composition, and download time.
Free load testing tool for web applications.
This should roundup the majority of the best resources on the web currently for getting the most out of your current bandwidth, and optimising your sites to run like lightning. Let me know if there are any resources that you guys use to gain speed increases on your sites.