10 strike plan to grease your site for speed.

July 17, 20095 Comments
Facebook Twitter Pinterest Plusone

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

speed3

Javascript

Google host a variety of popular javascript libraries for web developers, and this standardised hosting platform provides a central repository for developers.

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.

2) Images

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

Client side compression should be performed on the text files which are used to build your site. Javascript, Html and CSS are all candidates for squashing and removing white space. There are numerous tools out there for performing this compression for you – in particular for CSS and Javascript. YUI Compressor is the best out there, although you’ll have to know how to run a Java file at the command prompt. I’m currently working on a nice GUI for this, which I’ll release once it’s 100%.

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

Javascript as a rule should be served at the bottom of the page to allow other downloads such as images to come in first. Some scripts which perform document.writes can’t be loaded at the bottom of the page, but often there are work arounds to sort this out. CSS stylesheets should be at the top of the page, so that browsers can render their styles progressively. If you don’t, you’ll risk either a white screen until the full document loads, or a flash of unstyled content (FOUC)

7) Server side code speed

servers

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

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.

Cache Plugins

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.

Filed in: Web Design
Tagged with:

About the Author ()

Paul is a regular 30 year old web bloke / programmer with a penchant for online marketing. This blog is a personal outlet, with an eclectic mix of articles.

Comments (5)

Trackback URL | Comments RSS Feed

  1. siteperf says:

    Thanks for the article.
    You can also use http://Site-Perf.com/ to measure your site loading speed (like Pingdom tool, but more detailed and accurate).

Leave a Reply

Back to Top