A short guide to designing faster websites
Designing a website and then expecting your site to speed up by throwing more resources such as CPU and bandwidth at it will never work.
The main reason is that many people are still on slow connections or have low data caps. This means that they will only ever visit your site once.
If a site costs the visitor too much time or money (data) they will not return. Faster websites can improve your image and revenue.
Adding all the fancy bells and whistles to your site may look good, but a site that pops means a lot more as far as impressing the audience.
What makes it slow?
Having a lot of code to interpret in the back-end to make that image zoom in or the text roll-out needs time. Any effects on a website use processor time.
This is on the client-side for JavaScript / CGI code and CSS. PHP, Java, Ruby and Python all get interpreted on the server-side. The server-side code often generates client-side code which doubles the processing time.
This does not mean that you can never use an effect. A good server-side cache (Redis, Memcached) or a reverse proxy cache (NginX) can make a large improvement.
The next major speed thief is graphics.
Images are incredibly data-dense and take longer to transmit over networks. The main reason for this is that images are hard to compress (squeeze smaller) and thus cannot easily be optimised by the web-server or compression protocols such as gzip or lbz.
Any image you use needs to be optimised for website usage, and the more images you use, the slower your site will become.
How do I make it faster?
Faster websites take a bit of work, but a lot less than you would think.
Plan your website structure and flow. If you know enough about coding, learn to prioritise what loads first so that the site content can load before the images. This way, a user is not left staring at a blank screen until everything is loaded.
Built-in HTML/HTML5/CSS effects are much faster. A good example is gradient backgrounds. These were not available a few years ago and had to be created with graphic tiling. Now they can simply be coded in.
A clever web designer will utilise the built-in graphics capabilities of HTML5 and CSS to create stunning effects with very little aid from actual images.
Code can be compressed and optimised – there are ready-made plugins in WordPress, for example, that do this. There are also online code optimisers that can be used for your website.
Graphics and images must be pre-sized to the exact size that will be used. This often means that you need a few different versions of the same image so that it will display well on mobile as well as a few commonly found screen sizes.
Once you have sized your images, run them through an image compressor. The optimal format for websites is either jpeg/jpg or png images. GIF images are used for smaller graphics. Never use .bmp as this is always huge and cannot be compressed.
Save images at 50% or 60% quality and if you need your site visitors to view a high quality version, make this appear by linking the lower quality image to the higher quality one. It will then only load the big image if someone clicks on the web image.
Check out our image optimisation guide for more tips to optimise your images for a faster web experience.
Hosting faster websites
Choose a hosting provider like HOSTAFRICA who can host your website on SSD drives which are alot faster than normal spinning disks.
Where can I do all this?
Here are a few links to help you create faster websites:
- Code:
- Images
Once you have used these tools, you should see your website fly!
Happy Hosting.
