/Culture/ Build faster websites
05/02/2010 | Filed under Discover > Culture
In an age of short attention spans, speed is the name of the online game. Craig Grannell looks at how you can make your sites faster and more efficient – making them easier to use and more attractive to visitors
During the 1980s and 1990s, technology resources were precious. Programmers would eke every byte out of available storage space – nothing was wasted. When it came to early online networks such as Compunet, deathly slow modem speeds meant efficiency had to be the watchword of the day. Uploaded programs would be compressed to within an inch of their lives to ensure they could be downloaded as quickly as possible. Interfaces were fast, obvious and efficient, to ensure no one’s time was wasted.
When the web first became popular with the masses, savvy designers adopted this philosophy. With connection speeds still sluggish, every trick was used to try and speed up websites: heavily compressing images and reducing them in number; removing white space; making scripts as efficient as possible. The aim was always to retain visitors with itchy fingers, who were increasingly likely to go elsewhere on a whim as the number of available websites grew at an alarming rate. Yet somewhere along the way, this line of thinking has been largely lost.
Today, many designers have become a little lazy when compared to the medium’s pioneers. With broadband almost ubiquitous in many countries, optimisation has fallen by the wayside. Many now assume they can throw anything they want online and it’ll be downloaded ‘quickly enough’.
But when you step back and look at many current sites, a ‘good enough’ approach often isn’t good enough. Just a lag of a few seconds might be all the encouragement a restless visitor needs to go elsewhere, potentially losing your site a sale. And in an age of broadband, it’s absurd that some sites shove loading delays down your throat akin to (or even worse than) those suffered users during the late 1990s.
This article aims to address this concern. It’s time to bring back the old rallying cry, and to make sites fast again, using a mix of tried-and-tested technologies and methods. Plus we’ll also discover some new kids on the block that can help make your online creations more efficient with surprisingly little effort.
The need for speed
Although the majority of efficiency tips rely on technology – compression, server tweaks, coding – speed isn’t all about how quickly something downloads. There’s also the perception of speed and efficiency. You might have the fastest site in the world from a technical standpoint, but that’s all for naught if it’s tricky to get to grips with. In other words, if it takes time to figure out how to use your site, a user may well believe it’s slow regardless of other factors. Conversely, if your site is straightforward, a user is more likely to think it’s fast – and that’s half the battle won.
In other words, before you start fiddling with software, compression techniques and hosting, take a look at your website itself. Is it obvious to use? Is the navigation efficient? Is the copywriting punchy and succinct?
If not, rethink. Reduce the amount of content and consolidate where possible. For example, plenty of corporate sites retain dated ‘about us’ sections split into sub-sections, but when a user accesses a few web pages in a row, each of which has just a few lines of copy that looks lost in an otherwise largely blank screen, they’re going to feel like they’ve wasted their time.
When it comes to navigation, ensure everything is labelled in an obvious manner. Punch yourself repeatedly in the face should you ever consider lead-in animation on navigation components that forces people to wait before they can access content. Look at how your pages are laid out, and ensure the eye can easily move about the page. Users shouldn’t struggle to read text, and it should be evident which elements of a page are separate. Make use of inline links to enable users to rapidly navigate to content that interests them. And if your site is large with a relatively complex hierarchy, ensure that users can access important content from the homepage, rather than having to manually drill down and search it out themselves.
Once you’ve streamlined the design, navigation and page structure, it’s time to get more technical to speed things up. Broadly peaking, technology tips for speeding up sites sit in three areas: media content, coding and hosting. I’ll cover each of these in turn.
Optimising media
If you’ve been using the web for a long while, you’ll recall that it was once devoid of pretty much anything bar text. And even though dial-up speeds were to broadband what an asthmatic slug is to Usain Bolt, the early web was surprisingly nippy to navigate and use. But then images arrived, swiftly followed by sound, movies, Flash and other speed-sapping technologies. Things slowed down. A lot. And while improved connections have done much to boost speed, designers still could do more to help themselves and their audiences.
First and foremost, decide whether multimedia components are required at all. If they don’t really add anything, ditch them. If they do, figure out if they can be downloaded on request. Again, this is largely about perception – users who click on something are more willing to wait for content to download than if you essentially force it on them, at which point the same download speed will equate in their minds to a slow site.
Compression is also an important consideration. Use mono sound rather than stereo if you can, since it will hugely increase download speeds. If you can compress any video components without compromise, do so.
The issue of compression is just as important with still images. Designers once spent hours shaving the odd kilobyte off JPEGs, experimenting with various compression techniques. Today, many images appear online without any compression at all, or are uploaded at full size and scaled in HTML. Even a small amount of compression reduces file sizes dramatically. Only upload full quality images if there’s no alternative, and never use an image with dimensions larger than you need. If you’re mindful of format and output size, savings soon add up, making for snappier, more responsive web pages, especially on mobile devices.
Efficient images
Many web design tomes still recommend JPEGs for photos and GIF for everything else, but it’s worth experimenting further when outputting images. Often, PNG8 provides better results than GIF for line-art, and PNG optimisation tools can further reduce file sizes. Don’t rely solely on your image editor for getting the best results either, since online services can go the extra mile. “Smush.it is a tool that gets all the images from a page and then uses a bunch of open source tools to optimise everything,” says Yahoo evangelist Christian Heilmann. “You then get a zip of your revised images and a report of how many kilobytes you saved. The tool doesn’t change the visual display of your images; instead, it packs and removes unnecessary data from the image files.”
When applying single images to the page, always remember to specify a width and height, since those attribute values enable browsers to more easily lay out a page and remove the need for internal refreshes once the page loads. If you’re applying an image to a page multiple times, consider using CSS Sprites. My tutorial in issue 191 provides more information on this technique, but the gist is combining commonly used interface components (icons, navigation, etc) into a single image and using CSS background positioning to show the relevant portion of the image in various places throughout a site. This has two major speed benefits. Firstly, a site feels snappier and more responsive, since multiple images don’t have to download when an interface component is interacted with. And secondly, the number of HTTP calls is reduced, which can make downloads faster, since the number of concurrent downloads from server to browser is limited.
Edgeofmyseat.com’s Drew McLellan also recommends figuring out if you can replace images with a more efficient technology. “When Tim Van Damme redesigned 24ways.org in 2008, he used cutting-edge CSS3 techniques to reduce the number of images the design needed,” he recalls. “We ended up with just one small tiled GIF, with the rest of the design comprising RGBA semi-transparent block colour.”
Coding considerations
How you code can make a big difference to site speeds. Although some developers advocate whitespace removal, that’s only really useful for high-traffic sites, and even then speed differences are typically negligible. But smaller modifications to code can actually make a bigger difference.
First and foremost, how you attach style sheets will affect your site’s speed. In IE, @import behaves like putting <link> elements at the bottom of a page, which hampers progressive rendering (meaning a browser can’t easily and quickly display content correctly – problematic for pages with lots of content being downloaded across slow connections). To avoid this, use <link> and place style sheet links in the head of your web page.
Avoid proprietary filters. For example, evidence suggests AlphaImageLoader, often used by designers to force PNG transparency in versions of Internet Explorer prior to 7, freezes rendering while the relevant image is downloaded. Graceful degradation is therefore preferable.
“You should also collate styles and scripts into single files, rather than several includes,” advises Heilmann. “Every script or link to a CSS file on your page slows it down, because the browser needs to negotiate the DNS, load the file and render it. If you put several CSS files into one document, you don’t have that overhead.”
In contrast to CSS, modern thinking recommends placing scripts at the bottom of a document, because scripts block parallel downloads. With style sheets at the top and scripts at the bottom, the result is that users start scanning a page that appears to be loading, and scripts catch up in the background. “I also recommend the lazy-loading optimisation trick,” says Heilmann. “JavaScript can load a very small script initially, check the user’s preferences and the current page, then pull necessary bigger scripts only when needed. You can even load images only when they’re visible in the browser viewport.”
The host with the most
We’ve already mentioned that minimising HTTP calls speeds up sites, since browsers only run a small number of simultaneous concurrent HTTP requests. Other hosting considerations can also make a big difference to a site’s performance. “Tune your database server,” argues IT manager Sam Gaw. “Most of the time, database servers aren’t properly tuned for the job or the hardware.” He suggests you look beyond generic configurations. “Most people use MySQL,” he says, “so set shared memory and buffers properly, enable slow query logging, look at what you’re using specific tables for and set the appropriate storage engine. If you’re not an admin, run something like MySQL Tuner to point you in the right direction.”
Clearleft developer Natalie Downe suggests “using different servers for images or static files, so that you’re increasing the number of concurrent connections that you can have”. Alternatively, you can use content on the same server, but work with a few sub-domains, which the browser sees as separate servers.
Another in-vogue tip is the use of gzipping to reduce the size of HTTP responses. Rather than a server sending standard documents, they’re sent compressed and then unpacked in the browser. This can hugely increase speed when it comes to text files, which compress well, with the trade-off being more processing power required by the server and some old and creaky browsers not supporting gzip. Downe adds that, with care, you can make the compression even more effective: “If you’re consistent in ordering CSS properties and HTML attributes – be that alphabetically or by some other method – this helps the gzip algorithm and reduces sizes further.” (Note that you need to configure your server so it returns gzipped content if a browser can deal with it – this page provides an overview of how to do so.)
External factors
It’s also essential to think outside of the box to find further means of speeding up your site. Often, you might have blazing code and highly optimised content, but a site that’s slow due to being held back by sluggish external content, such as adverts. If that’s the case, weigh up advertising revenue versus major performance issues.
You should also check your host’s site on a semi-regular basis. McLellan recalls how last year he investigated what his hosting company was offering for new accounts. “Technology is always getting cheaper and better, and we found the hosting account we were paying for was more expensive and not as good as the current new accounts being offered by the same company. So we made sure we were getting the most out of our limited budget by asking to be swapped to a new account. It saved us money and doubled the performance of our server in one simple move.”
Finally, explore online resources for more information about site optimization – although be wary. Modera CEO Siim Vips explains: “There are optimisation tests online, but many are neither reliable nor trustworthy, since they’re built to generate leads for developers.” He suggests restricting yourself to freely available resources, including the well-known W3C validation services, along with “guidance and instructions from trusted and respected founders of principles that have set the standards that are still used today.”
Two internet giants have made the greatest strides in this area. As Heilmann notes, “Yahoo and Google have both done a lot of research on web performance and released their findings.” The Yahoo approach is particularly interesting – along with information organised into categories (images, CSS, mobile, and so on) here, there’s Firefox extension YSlow.
“Using YSlow, you can analyse a web page and you get rated A to F for each optimisation technique. You can click on each mark to learn what you can do to get a better score,” says Heilmann. “Using tools such as these, you can easily optimise a site without being an expert – and they’re great for showing just how much impact a few changes can have.”
Bookmark with:
Comments
Arthur / 05/02/2010 / 17:51 / http://wwwbingotime.co.uk/
I am a tech person, proof is I run an internet cafe business and I believe people now especially younger ones have very low attention span, they cannot wait anymore. Making sites very fast and speedy is everybody's dream, however, what's left of our generation is a group of low tolerant-high frustration level human beings. Very unfortunate.
Oliver Cardiff / 08/02/2010 / 13:51 / http://www.webdesign-gm.co.uk
Great and really imformative article. I always make sure that any site I build loads as quickly as possible. I try to use as much shorthand CSS as possible and remove any gaps from the html code so that it takes less time to read. When using images I only tend to use jpegs, which have been saved for the web so they aren't high quality but still look good when viewed in browsers.
Anna Green / 16/02/2010 / 16:29 / http://www.crearedesign.co.uk
As a web designer i can appreciate the temptation to cut the odd and corner in order to get a job done quickly. However I believe most designers will soon see the error of the ways by learning the hard way. Clients will compare there sites to others and soon let you know if theirs is half a second slower than there competitions.
The problem lies with the cowboy web designers out there who never learned the trade properly in the first place and go from client to client blundering there way through. I think some industry standards and a governing body such as FENSA (for heating technicians) is a much needed resource for prospective web design clients.
George / 18/02/2010 / 00:55 / http://www.tradeshowmarketingadvice.org
Craig,
You wrote a very LONG article for this "age of short attention spans." :)
I think this is somewhat related, and maybe it's because of my short attention span, but I hate the new trend of people recording informational videos and then posting just the video. Maybe I don't want to spend 10 minutes watching your video! Please post a text summary of what you have to say so I can scan it and see if I want to spend my time watching the video!
Does this make sense? I guess what I am saying is, always post a text summary with any informational video...
Thanks for letting me vent. :D
And yes, speed is good!
