More and more people are accessing the web on-the-go on their android tablets or phones, and mobile data still isn’t up to the task. Keep your customers happy by minimising the size of your website. Here’s a few tips on how.
Minimise HTTP requests.
A user’s browser makes an HTTP request each and every time an item on the page is linked to within the markup. Given that Yahoo suggest up to 80 percent of time waiting for a page to load is a waste of time (and a significant proportion of that is HTTP requests), cutting down on the number of these your users have to make will speed your page loading right up.
So how do you minimize the number of HTTP requests you have to make? First up, use CSS Sprites instead of images. If you have any elements that are designed to change after an interaction – say, a button that changes image on hover or a slideshow that moves to the next image after pressing the side button – you can use a sprite. A sprite is an image that includes all states of an element on the same page; for example, here is a CSS sprite I use for Facebook sharing buttons:
As you can see, both states of the sharing button sit on the same sheet. This way, when the user hovers over the button, I can simply shift the already-cached sprite up or down a few pixels to reveal a different part of the image – much better than requiring the user to make an HTTP request when hovering over the image, which will take a fraction of a second to load the image itself. CSS sprites can be used all over your webpage, and can lead to huge performance gains. In a blog post by web guru Tenni Theurer, an estimated half of all visitors to your website come with an empty cache – as first-time visitors – meaning that they have to do all the HTTP requests in full before the page will load for them.
Put your stylesheets early.
Whacking your CSS as external links early on in the <head> element of your markup will allow the page to render progressively – that is, as the user’s browser loads elements. This makes the whole page look like it’s loading faster, and allows the user to access content while the page is loading.
Keep your 404 simple.
Keeping server-side scripting down will lessen the load on servers – a real problem if you have peak periods of users accessing your site. Good cloud management will help to some degree, especially if you have a trusted provider, but it’s up to you to make sure you lessen the strain on your cloud management provider. 404s are a killer for some cloud hosting providers – those jazzy error messages that run scripts trying to deduce what the user was really after. Don’t bother. Save the server capacity for more important things, like fulfilling HTTP requests promptly, and leave the 404 page for those who need to start looking from scratch.
