Google is looking at page speeds (among other things) to determine your ranking position, this affects the way we build recruitment websites. As Andrew stated in “Is your website fast enough”.
A top tip for speeding up your website is using css sprites.
Css sprites are mainly used for icons and links that use background images.
Example of a sprite:
How does it work?
The css sprite helps the speed of the site because the browser client only needs to view the image once, it will then create a cache of that image and therefore remove the time it takes to visit images individually.
The process is simple:
1. Create one large image with all your graphics.
2. Use background url in css to call the graphic
3. Use background position in css to place the image correctly
That’s it!
Working examples:
You can see a working example of a recruitment site at
http://www.graduate-recruitment.co.uk/. The GRC Recruitment website lends itself very well to css sprites as it has a social network feel. Try and mouseover the icons at the top - they should have a slight visual effect which happens very quickly.
Some other well known sites using sprites:
