7 Usability Tips to Make Your Sites Load Faster!

Posted on June 10, 2008, under Design, Tutorials, Web Development by Ikki.

Hey peeps!

Content is king and there’s no doubt about it. Good stuff will keep bringing people to your site. That’s a fact. However, have you ever thought of Usability? What’s usability, you say? In short: it refers to the quality of a system (eg. a web site) and the process of designing a system.

A common usability problem among most webmasters is about loading times. Most visitors will leave your site inmediatly if it’s taking ages to load. Sometimes it our host’s fault. Most of times it’s our fault, even if we’re not aware of it. Read on, I’ll tell you why.

7 Usability tips you should know

Put your Styles at the top: having your stylesheet in the HEAD section will makes your pages appear to be loading faster. This is because the browser will load the styles first and apply them to your contents as it renders them progressively.
Avoid Image Filters: I know. IE6 (and lower) Transparency management is a joke. However, the AlphaImageLoader filter blocks rendering until the whole image has been downloaded. Use PNG-8 instead. As far as I know, it is well supported by IE so it’s worth the shot.
Keep your scripts and stylesheets outside your pages: have your Javascript and CSS stylesheet contained into external files. Using external files generally produces faster pages since they’re cached by the browser. Also, by having these two in separate files will decrease the size of the HTML document.
Don’t resize images in HTML: using large images in your pages and resizing them by changing its width/height attributes in the IMG tag won’t do any good to your site’s performance. Don’t be such a lazy ass - resize it to make it fit your needs using a image editor as GIMP.
Optimize your images: try converting your GIFs into PNG-8 and check if there’s a saving in file size. Most times it will result in a smaller file, save your bandwith and decrease loading times.
Use GZIP: if you have access to the .htaccess file in your server then this baby can come in handy. Gzip compresses the files that are being sent to the viewer’s browser. Then, the browser itself decompresses them and displays the page to the visitor in full format.
Don’t overuse images: while images can greatly improve your site’s appeareance, most of them are unnecessary. Use CSS to manipulate the background color of those elements in your page that doesn’t need an image.