≡ Menu

Ten Tips For Improving Your Site Speed

Share on FacebookShareTweet on TwitterTweet

Website Speed

Minify Javascript and CSS Files

Yes – it can be a pain to keep two copies of every CSS and Javascript file, however using a minify tool can reduce the file sizes by up to half. If around 50-60% of your users are first time visitors, that’s alot of people with an empty cache (see below) – it’s therefore important to keep these files as light as possible. There are numerous tools out there to help, if you’re confident using the command line the best is Yahoo’s YUI Compressor. If you don’t want to use the command line, a handy web based tool is Dean Edwards’ ‘Packer’.

Cache images, css and javascript

Everytime a new user visits your site; images, css and javascript files should be cached in thier browser so that next time they visit the page will load much faster. On pages with heavy image content, this simple change will make a vast difference.

For users of the apache web server, setting up caching is easy using the mod_cache module. The vast majority of hosts wil already have this enabled already, in which case it’s simply a case of configuring expiration times and file types in your control panel. Personally I would recommend caching css, javascript and images for up to a month.

Compress Images

Unless you’re loading videos – chances are that images will be the largest (and therefore slowest to load) content on your page. If you’re using either jpeg’s or png’s it’s important to make sure they’re compressed as much as possible, but without loosing visible quality. There is a certain degree of compromise here of course! Photoshop users will already be familiar with the ‘Save for Web’ functionality, which offers an excellent way to preview the saved image so that you can balance any loss of quality with the file size. Most other image editing software (including photoshop elements and paint shop pro) will have similar features.

Choose the correct image file type

As well as compressing images, choosing the appropriate file type is also a must. As a general rule of thumb I would recommend the following:

  • GIF: Logo’s and simple graphics with few colors and no gradients.
  • PNG: Logo’s and more complexed graphics with more tone. Also the best for transparency.
  • JPG: Use only for photos.

Reduce HTTP requests

Every call to a file on your page will result in an http request (the browser asking your server for that file, and the server sending it back) which takes time. As only 2 http requests can be sent at the same time, having loads of these can result in a big delay before your page renders. Combing css and javascript into as a few files and possible can help, as well as using css sprites (below). Also, make sure that any files that are not needed for the page, arn’t loaded. For example, if you have a javascript file that’s only needed on the contact page, only load this on the contact page!

Use Css Sprites

A CSS sprite is a great way of reducing http requests. If you have say 30-40 images used as backgrounds etc – using a sprite will instantly cut 30-40 http requests down to one.

Using CSS Sprites is becoming easier and easier aided by some great online tools. It’s now possible to upload all of your image files to a web app, and get back your sprite with a css snippet of your image coordinates on the sprite. My favorite tool is Project Fondue’s CSS Sprite Generator.

Use Apache’s GZIP Module

One for the server administrators now! If you’re using an apache web server, you should definately get mod_deflate installed. This will automatically serve up your files in a zipped format, which the users browser un-zips before rendering. This greatly reduces the load on your bandwidth and will really help speed up your site. If you’re using a shared hosting provider and don’t have administrative access to the server, I would highly recommend finding out if mod_deflate is enabled, and if not, find out why not!

Only load essential scripts in the <head> section

This is a simple one which takes no time at all! Take a look at your sites <head> section – do all those javascript files really need to be loaded there? Any javscript in the head will need to be loaded before the page can begin rendering so anything that can wait a bit, take out of the head! The difference can be amazing, and this quick and easy tip can easily wipe a second off a page load time.

Use CSS 3 instead of images

With modern, standards compliant browsers such as Chrome and Firefox becoming more and more popular, and Microsoft’s Internet Explorer finally starting to loose its dominance – using CSS 3 is becoming more realistic. As long as it degrades nicely, this can be a good way of reducing the need for images. Subtle curves, gradients and shadows can easliy be added using CSS 3 instead of images and degrade sufficiently in older browsers so as not to cause major design issues!

Use a waterfall test

Once you’ve completed all of my above tips, it’s of course great to see if your hard work has been rewarded with a faster load-time. Always remember to test before you start so you have a bench mark to test against…

Waterfall tests provide you with a graphical representation of how long your page takes to load, which files are being loaded and how long they take and at which point the page begins to render. They will also show you an un-cached version and a cached version. The best test out there, and one I use all the time is www.webpagetest.org.

This blog post was written by James Davies, in-house developer at The Jewellery Boutique, specialists in handmade contemporary jewellery.

Get the latest updates delivered to your inbox

1 comment… add one
  • Great info. I will try out these ideas. thanks for this nice share.

Leave a Comment