As Designers we sometimes get carried away with our ideas, the creative mind is very hard to tame. You may have this Lion of an idea where things fading in, fly around the screen and explode (All done very tastefully of course). We get overly excited, consume far too much caffeine and stay up until it’s early. Only to find once the site is built it takes about a week to load and that’s even after you’ve taken Usain Bolt’s advice and gone with Virgin.
Well here are some things to consider whilst designing and building your next website.
Stop Using Flash
Of course you don’t really have to stop using Flash, but bear in mind that it is slow to load and that not all phones and tablets can read it.
As you can imagine the things that can increase the file size of a webpage more than anything else are images.
So the first thing to do is convert as much as you can into CSS, for example, Rounded Corners, Gradients, Transparency, Text shadows, Box Shadows and Inner Box Shadows can all be done with CSS3. But be careful, they don’t work in every browser. So you must balance design, consistency and speed.
The next thing is to create a Sprite. A Sprite is one large image that contains all your icons, buttons and logo’s. That you then call in your stylesheet as a background image and position appropriately.
Here is an example of one that Google uses:
The great thing about a Sprite is that browser just loads it once and all your bits and bobs are all there ready to use, while reducing the number of server requests.
The last thing to do is compress your images. The standard compressions are JPG, GIF and PNG. If you can avoid transparency that will really help reduce file size. In Photoshop when you ‘save for web & devices’ you are able to compare the different the formats to see which works best for that particular graphic. However, be aware that Photoshop is not the only program that can compress images and there are some that might even do a better job such as http://jpeg-optimizer.com/.
Right, now that you’ve sorted out the images and redesigned your site so that it is simply black text on a white background with a 16px logo in the top left. we can start looking at caching.
HTML 5 cache forces your browser to cache certain assets specified in a Manifest File. This has one huge disadvantage, the world’s worst most popular browser, Internet Explorer, doesn’t yet support it.
I’ve managed to convince you not use flash but you still want things spinning around the screen. Is it really necessary? Oh it is. In which case start off by minifying your scripts if possible ( W3 Total Cache can do this for you). Minifying will remove all spaces and line breaks from your script making it quicker to read.
Servers & Server Location
You may not have any control over this, but if you do it is well worth looking into. The speed of the server where your website is hosted can vary significantly between service providers. The main thing to look at is the location. If you are building a site mainly for a UK audience then it makes sense use a service provide who has servers are based in the UK, rather than say the US. Where the information has travel across the Atlantic.
Design should always be about enhancing functionality, or at least not hinder it too much. So next time you are on a sugar rush and there are sparks coming out of your ears, take a moment to think how are you going to put this design into effect without crashing the web.
Doing all the above things will help speed up your website and reduce the number of requests to the server. The speed of your site will also affect your SEO. Google is giving more wait to those websites that respond quickest.
A couple of tools you can use to check your site speed are:
Pingdom: This is not overly reliable but it can give you an idea where site is hanging up.
Google Chrome: Does a good job. Just right click and inspect element and then go to network and refresh the page.