5 ways to give your site a speed boost in less than 30 minutes.

Posted in Development on October 20, 2009 by Paul Boag

In the age of broadband it is to think download speed does not matter. However, nothing could be further from the truth. I share 5 ways to add some zip to your site.

In this age of broadband, users are unlikely to leave your site for being too slow. However, if you want to create a feeling of satisfaction and a pleasant user experience you need to keep download times to a minimum.

In a recent interview usability expert Jacob Nielsen wrote:

One of the main guidelines is to show the next state (e.g., the next page) with one second of the user’s action (e.g., click) in order for users to experience the feeling of a freely-flowing interaction, as opposed to a sensation of delays.

The problem is that speed optimisation can often sound intimidating. Very clever people with very large beards throw around phrases like gzip, compression and caching. However, it doesn’t need to be complicated.

I have just tweaked Boagworld to make it slightly more responsive (yes I know it is not perfect) and I needed little technical knowledge and it took less than 30 minutes. Here is how:

1. Install YSlow for Firebug

Firebug is a Firefox plugin that is essential for any web designer. YSlow is a plugin to this plugin (confusing I know!) that allows you to carry out all kinds of speed tests on your site.

Screen capture of YSlow

YSlow will grade the performance of your site, provide advice on how to improve things and even suggest some tools which might help.

2. If you are using WordPress install Super Cache

If like me you use WordPress as your content management system then be sure to install the Super Cache plugin.

This plugin generates static html files from your dynamic WordPress blog. After the first visitor views a page on your blog, an HTML copy is created and served to all future visitors. This means that the server does not have to continually recreate pages. This will significantly speed up your site especially when you are receiving a lot of simultaneous users.

3. Compress your images

Images are a significant proportion of most webpages download. However, Photoshop does not always do a very good job at compressing images. Sure, there are other tools out there but most of us do not have the time or inclination to use them.

In addition, if we are trying to speed up an existing site we are unlikely to download and recompress an entire website worth of images.

Fortunately, Smushit comes to the rescue with an online image compressor. Best of all it integrates with YSlow to find all the images on a particular webpage and provide a report of the savings it could make.

Yahoo! Smush.it

Once it has run, all you have to do is download the recompressed images and upload them to your webserver. It even saves the directory structure!

4. Compress your Javascript

Increasingly websites are using more and more Javascript. These files can become very large, especially when using Javascript libraries and plugins. Fortunately it is possible to significantly reduce javascript files by removing formatting and comments.

There are a number of tools that will do this for you:

YSlow, which has this functionality built in.
Minifyme, which is an AIR application that runs locally.
Online minimizers, which allow you to copy and paste Javascript.
A number of coding applications that also have this functionality built in.

Whatever approach you take, make sure you keep an uncompressed version of the file because it is very hard to read and edit minimized Javascript.

5. Compress your CSS

Finally, as well as compressing your Javascript you can also do the same with CSS. Minifyme not only compresses Javascript, but also does then same for CSS. However, I tend to use CSS Compressor because it provides me with more control over the level of compression.

These CSS compressors remove spaces, line breaks and comments in order to make the file as small as possible.

As with Javascript remember to keep an uncompressed version. That, or reduced the level to which you compress the files.

What else?

What I like about the approaches above is that they require no server side configuration or technical knowledge. They are fast, powerful and easy. There is no reason not to follow this advice.

However, there is a lot more that can be done. Perhaps you would be willing to share some of your speed optimisation tricks in the comments below.

132. Drobo

Posted in Classic shows on August 27, 2008 by Paul Boag

In this weeks show Paul and Marcus return to talk about the abundance of content management systems and ask the question “Are there too many?”, as well as discussing Paul’s new Drobo and backing up.

Podcast: Download (24.5MB)

Download this show.

Launch our podcast player

Vote Boag

To start with we’d like to ask a favour of all the loving Boagworld listeners, would you vote for our panel at SXSW this year. We’ve called it Clients Are Stupid…? and the official description is as follows:

Why do clients seemingly make idiotic decisions? How come they fail to ‘get it’? Learn how to improve communication with your clients and enhance your working relationship. Be more successful at pitching ideas, getting design sign off and ensuring projects stay on track. Don’t let your projects become a battleground.

Check out the panel page for more information on what we’ll be discussing and we’d appreciate the vote!

Special Discount

On last weeks show Ryan and Stanton talked about FreeAgent, an online accounting and project management tool for freelancers. Ed Molyneux, FreeAgents founder and CEO, has written to us to offer a special discount for Boagworld listeners:

We’d be really pleased to offer Boagworld readers/listeners a discount of 20% on all ongoing subs if they sign up with the referral code boag99 before the 15th September 2008. They get a 30-day free trial before having to subscribe, and monthly subs range from £15 for Sole Trader freelancers to £25 for Limited Companies.

So thanks Ed, and listeners be sure to check out freeagentcentral.com to take advantage of this offer.

News and events

Step away from the keyboard

One of the curses of being a web designer or even a website owner is that we spend too much time in front of a keyboard. Whether we are writing content, coding or planning a site structure, it is normally done in front of a PC.

I have tried to escape the shackles of the keyboard but with only limited success. Sketching can help and I do a lot of information architecture work using pen and paper. However, these approaches don’t allow the flexibility and speed of a PC.

However, this week I have come across two little products that help to escape the PC. The first is called GUIMagnets. They are basically fridge magnets with GUI elements printed on them. These including text fields, radio buttons, dropdown menus and more. Used in conjunction with a whiteboard you can quickly prototype page layouts in a much more tactile way.

The second product is an alternative to whiteboards. The problem with a whiteboard is that you don’t always have one handy when you need it. They are large, static and relatively expensive. What you need is something that provides the benefits of a whiteboard but without the disadvantages. Magic Paper is that alternative. Magic Paper is made from lightweight, flexible plastic that can be rolled up and carried anywhere. When you want the whiteboard you simply smooth it onto a wall and it is held in place with static. You can then use it like a whiteboard and remove it when you are done.

Hopefully these two products will encourage you to leave the PC behind, at least some of the time!

Creating slick CSS

Next we have some tips for you CSS coders. If you have grasped the basics of writing CSS and want to improve, then you should read the ‘7 principles of clean and optimised CSS code‘. As the title suggests this post provides 7 ways that you can improve the quality of your CSS coding. These include:

The use of shorthand
Avoiding hacks
Using whitespace wisely
Pruning any frameworks or reset code you use
Future proofing your CSS
Documenting your work
Making use of compression

Bitter experience has taught me this is excellent advice. Even if it is old news to you it is worth reminding yourself of these points. It is easy to fall into bad habits.

While on the subject of CSS, I also want to quickly mention a site called Conditional-CSS. This site provides a mechanism to deliver specific CSS to specific browsers without relying on hacks. It uses either PHP or C to achieve this and uses a very similar formatting to IE conditional comments.

It would be unwise to become too reliant on this approach because it could cause problems as new browsers emerge. That said, it is potentially useful in certain circumstances and is worth checking out.

Focusing on the wrong thing

Talking of reminding yourself of best practice make sure you read Gerry McGovern’s post on Google and Yahoo! Gerry examines why Google makes 10 times the profit of Yahoo! even thought it has significantly less page impressions.

Gerry argues that Yahoo! focuses too much on its products/website and not enough on the needs of their users. In essence Gerry is emphasising the importance of putting your customers first.

Although as website owners and designers we should all know this, we often forget it in the scramble to add new features, and implement new technologies.

Screencasting beginners guide

Our final post today is an introduction to screencasting by smashing magazine. This is a subject I covered myself in show 122 and for good reason. Screencasts are becoming increasingly popular and it is important that we know how to implement them.

The article looks at why you should make a screencast, tips for creating a good screencast and reviews of the different tools available.

Its a good post that provides all you need to know to get started. It also provides some excellent tips that are worth taking on board. My favourite is…

Editing may be an option, but sometimes its better to simply start over and have a nice flow to the production rather than piecing together snippets.

Editing is for wimps :)

Feature: Too Many Content Management Systems

I know we live in a capitalist society. I know we are supposed to believe in choice. However, there are just too many damn content management systems. Another extract from the Website Owners Manual in this weeks feature.

Review: Drobo And Backing Up

Since posting on twitter about my new Drobo, I have received a number of requests for a review of this backup and storage solution.

Top usability mistakes

Posted in User experience on August 4, 2004 by Paul Boag

I read an interesting article today which outlined some of the top usability mistakes made by major web sites. Here’s your chance to learn from their mistakes.

Here is a summary of the major usability blunders found on leading web sites:

No search function

It is amazing that there are major web sites out there that still don’t have a search function. A usability study by Jakob Nielsen found that more than half of all users will head straight for the search function on a web site. If you have a site that has more than, lets say, 100 pages you should be looking to add search functionality.

Massive download times

Many web designer are using the increase in broadband as an excuse for poorly built web pages. However broadband usage only stands at 27%so it is important not to alienate the other 73%. There is no reason why an average web page should take more than 10-15 seconds to load. Improvements in image compression and the cleaner code produced by web standards should significantly improve download time.

Find out just how quickly your site downloads.

Non-scannable Text

People read very differently online to how they read printed material. They tend to scan web pages rather than read word-for-word. It is therefore important to provide visual elements in order to aid scanning.

Unclear linking

Probably one of the first question somebody asks when arriving at a new web page is "where can I go next?". It is important to make it clear what the user can click on. Make sure links are obvious whether textual or image based. Never leave the user guessing what is a link and what isn’t.

Poor 404 error page

As I have just covered this in a recent article so I won’t dwell on it in any great detail. However I will say that providing a helpful error page when things go wrong is an invaluable usability aid.

Visited links not show

I have to confess it is only recently that I have come to understand the importance of this myself after reading another article by Jakob Nielsen. Users often find themselves lost within a site when it isn’t clearly marked which pages they have already visited. By simply changing the visual appearance of visited links the user has a much clearer idea of where they have been in the site and avoids going round and round in circles.

The use of frames

This could really be an article in itself. There are numerous problems with frames but some of the most significant usability ones are:

Pages can be unprintable
Pages can’t be bookmarked, nor their URLs emailed
The back, refresh and history buttons can become disabled
Visited links across frames don’t change colour

Important information contained in images

In order to have greater control over the appearance of text web designers often use images instead of dynamic text. However this creates usability and accessibility problems. Images take longer to download so those of us with slow connections have to wait for important information to appear. Those using older browsers or screen readers may find that information contained in images becomes totally inaccessible to them.

Unlike some, I am not proposing that you do not use graphical text. However I am proposing that all images should haveALT tags so the user can access that information while the page is loading.

Breaking with conventions

In my article entitled "why all web sites should look the same" I explain why web designers shouldn’t go against conventions. Users expect to find the logo in the top left. They expect to find navigation either across the top or down the left hand side. The web is incredibly confusing anyway, with every site having its own user interface. The last thing a web designer should do is add to that confusion.

Boagworld

A blog, podcast and community for all those who design, develop and run websites.

Tag Archives: compression