5 ways to give your site a speed boost in less than 30 minutes.
Posted in Tech/Development on: Tuesday, 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.
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.
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.
19 Comments
Comments are for the discussion of this post. If you have other questions / comments then post them to the forum or send me an email
Nice easily digestable post on a (still) important topic, Paul. It’s amazing how often some of these things are overlooked in the rush to get a site live, but they can have such a positive effect on speed for the user (and your bandwidth allowance!)
I’ll be giving YSlow a try later too.
Tom
Have you been spying on me Mr Boag? Done the majority of the above; but also created a lovely CSS sprite of the little icons (a subset of the ’silksprite’ ones)
1. Sprite the hell out of your images.
2. serve static files from separate domains/subdomains using fast webservers such as lhttpd
3. Use memcached to serve as much content as possible
4. Use Google’s hosting of jquery, prototype, etc. http://code.google.com/apis/ajaxlibs/
Check out Google’s “Let’s make the web faster” (http://code.google.com/speed/tools.html) for even more ideas.
Samuel
Always surprised how few people do #4 here. Of course, you should probably use the minified versions.
Mobile browsing has brought this issue back onto the discussion list again. Admittedly more server side knowledge required for a few of these:
1) Incorrect database design can be a big cause of latency. For the less savvy developer running something like MySQL Tuner is a great alternative: http://bit.ly/Gx3JQ
2) Serving up content from several servers (or just using a few subdomains on the same server) increases the number of concurrent HTTP requests the browser can make.
3) I still see many sites using JavaScript to create image rollover effects – CSS replacement techniques and sprites are a faster alternative and its amazing what’s possible with CSS3.
4) HTTP compression like GZip reduces file overheads significantly – I’ve seen considerable improvements on the site developing now through this.
5) Know your server! The variation between server speeds can be surprising but most people have no idea how their server is performing. For anyone making money from a site I recommend Aware Monitoring http://bit.ly/lwl65
6) Fundamentally thinking about the design of your site can usually significantly cut down the total number of objects you’re downloading. I recently cut a clients from 26 to 9 whilst maintaining original design.
7) Consolidate and minify CSS and JS and include them as an external file. Not only does this reduce the file overhead but the CSS and JS will be cached in the browser for subsequent views. More formal caching is a must for high traffic sites!
8) Place scripts at the bottom of your page just before the closing tag. This gives the illusion of faster load times.
9) Lazy loading is something I’ve been thinking about implementing. Example might be only loading images below the fold on demand like on the Apple website: http://bit.ly/2qJz2U
10) Write valid and elegant code. If it validates the browser will have to spend less time processing what to do with all your errors! Something the HTML5 Boagworld podcast made me think about more.
Hope at least someone finds this post useful! Thanks for the YSlow link too – something I’ve never used!!
Good post, and I like your iPhone interface. Even over a non-3G connection it loads quickly.
I’ve always taken the same approach with site development, min amount of images to decrease load time. It also happens to be the way I design. My biggest pet hate is nasty myspace profiles, eating up your CPU and memory whilst it loads.
I will def check out yslow, interested to see how my site measures up. On another note server location also plays a big role. I’ve often found that sites I’ve hosted in the US tend to performer slower than my UK hosted sites. Distance plays a role, but hosting platform/enviroment (vps compared to dedi server) also effects it.
Consider using a Content Distribution Network like Akamai for high traffic sites. This caches content on servers geographically near to your users, relieving load on your servers and speeding up the user experience.
Hi
Once again a really good post, you mentioned that you use wordpress for content management, as do I for my phorography site/blog so I was wondering how using something like Smushit affects the quality of the image (which for a photogrphers siteis very important) and also when using plugins such as Fancy box, does it create any problems.
Once again thanks for the info
Kind Regards
Dave
I used a mobile plugin for my Wordpress to optimize it into a clean, plainer layout, and now it loads 3x faster than when I had the full blog load on my iPhone. Those plugins are nifty :)
If you develop with ASP.Net then you can download an HttpModule implementation of Dean Edwards packer for compressing your Javascript on the fly. I’ve written my own CSS cruncher that does the same thing with stylesheets (on the fly compression) the great thing about this approach is you never have to manually compress your CSS / JS.
One thing that lots of developers seem to over look is explicitly setting HTTP headers for client side caching of data – especially on pages with .php or .asp(x) extensions.
I’ve wrote a similar post for my blog some days ago (in Spanish)! CSS Sprites are definitely a great technique to reduce server petitions. Active GZIP on your server is a good tip but you have to configure properly and DON’T compress images (JPG, GIF or PNG).
Great post. Best results for the effort are CSS and JS compression, and image compression. One of the biggest designer sins I see on the auto repair shop websites I work with is poor (or no) image optimization. SmushIt works great – easy & quick use. David Griffin asked about image quality. I haven’t noticed any noticeable differences for web use.
Remember to combine JavaScript and CSS files where appropriate. We do this by managing number-prefixed files which get combined prior to compression:
0010.jquery.history.js
0020.jquery.thickbox.js
0300.common.js [our code]
Caching files can also speed up your site – set expires headers for things that won’t change. The problem then is that when you do change the contents of a file you need to force the browser to get it. We do this by versioning requests, for example requesting common.js?1256114860 (where the number is the unix timestamp of the last modified date of the file)
Someone’s already mentioned it, but enabling gzip compression for certain files helps a LOT.
There are a WordPress plugin that auto minifies all JS/CSS files… Google ‘WP Minify’
Paul (and readers),
Have a look at Minify – http://code.google.com/p/minify/ – a PHP setup for combining & compressing JS & CSS code on the fly:
# Combines and minifies multiple CSS or JavaScript files into a single download
# Caches server-side (files/apc/memcache) to avoid doing unnecessary work
# Most modules are lazy-loaded as needed (304 responses use minimal code)
# Content-Encoding: gzip, based on request headers. Caching allows it so serve gzipped files faster than Apache’s mod_deflate option!
Also look at setting up proper caching via .htaccess:
http://codeigniter.com/forums/viewthread/85429/#431187
http://www.askapache.com/htaccess/speed-up-sites-with-htaccess-caching.html
Cheers,
Chris
There’s lots of other quick and simple ways to speed up your site. I wrote a blog post recently that showed how to get a Grade A in Y-Slow.
Great article as always! We have just started to redo our company website and have noticed even though we had “optimised” our images first time round they can be made so much smaller! Time to download Y-Slow and see what it thinks.
I recently wrote a mod_perl output filter which sits inside Apache. It intercepts requests for .css files and then “compresses” them on the fly before sending. It’s not gzip compression, what it does is strip whitespace, comments, newlines etc. Check it out here: https://secure.grepular.com/blog/index.php/2009/10/28/compressing-css-on-the-fly/
These techniques are definitely useful to speed up your site. I’d add a few more:
1. Many WordPress plugins need some tweaking to make sure they don’t load themselves (and their js and css files) when not needed. In general I recommend doing small tasks (like getting the most popular posts) manually in the function.php file without plugins.
2. WP super cache is indeed a great plugin. I would also recommend the WP-Minify to auto compress and consolidate the js and css file (the only down side is that the js remains in the header.
3. Minimize database and PHP queries by replacing some of the dynamic code with a static one (whatever you can replace that makes sense).