Website Optimization Guide: Part Three

Written by Ethan Gardner Web Design

Front end development is a quickly growing field, especially among the forward-thinking companies poised to lead the industry into the future. In parts one and two of the website optimization series, we looked at front end and server side optimizations.

Today, we’ll dive a little more into the front end, look at some helpful tools to assist with website optimization, and wrap up the final article in the series with a complimentary check list to keep track of your own optimizations.

Make It Work for the User

Bottom line—your website needs to work for the user’s intended purpose. Though testing typically is looked at as an afterthought by typical businesses, it is has serious ramifications on maximizing ROI. Testing could be as simple as having another “set of eyes” review the site or as intensive as hiring a renown usability consulting firm such as Nielsen Norman Group or Adaptive Path.

As far usability assurance is concerned, you should do the following at the very minimum:

Make It Easy to Navigate

Users develop habits while browsing a site. Since they’ll get used to looking in the same spot for certain elements, persistent, intuitive navigation is an essential part of effective design. Navigation should be well organized broken up into relevant sections.

Use Progressive Enhancement

Make sure the page still functions with JavaScript disabled as some users prefer to browse this way, are looking at your site on a mobile device, or are mandated by network administrators.

Make Sure the Design Looks Right in Multiple Browsers

Testing layout integrity in multiple browsers ensures a seamless experience for all users. The site should look more or less the same in all major browsers. Personally, I let the data in my site analytics dictate which browsers to support for my site and use it as a baseline for other sites that I do as well.

Based on the data in my site analytics, I can see that visitors to my site use a multitude of browsers and I test all my sites in IE6+, Firefox, Opera 9, Safari, and Google Chrome. If you don’t have a suite of test machines for all of these different browsers, don’t worry. There are a number of free services such as Browser Shots or premium services like Litmus to help you out.

Browser Shots Testing

Follow Yahoo’s Advice

No other company has contributed as much to the field of front end development and website performance in recent past as Yahoo. In the last year or so, the Exceptional Performance Team at Yahoo have published a list of best practices for website performance, YSlow! to measure the results, and discussed website performance at length.

Although I don’t follow their recommendations to the letter, I would suggest to anyone interested in front end web development to head on over to their developer network and subscribe to their feed, and for anyone who is interested in maximizing their ROI to find a developer who is well-read on their research.

Serve JS Frameworks from Google or Yahoo

Javascript frameworks have become indispensable tools for development and rapidly enhancing the user experience, however these files tend to be rather large in size. As part of the Ajax API, you can serve Mootools, JQuery, and YUI from Google’s servers to save bandwidth. YUI is unique because it can also be served from the Yahoo servers along with its optional components.

Yahoo wizard for hosting files from their server

Some people aren’t willing to sacrifice the control of hosting their own frameworks, but offloading the hosting of these files has a large advantage because it can be cached. If someone visits a site that is already using a Google hosted framework, they won’t have to download it again on your site which will ultimately make your site load faster.

Reduce the Size of Images

Image optimization can be taken further than using the save for web feature in Photoshop. Every byte shaved off of an image file can improve performance and can potentially reduce the amount you need to spend on hosting.

In a recent article, Graphic Rating looked at the amount of bandwidth that top sites could save with further image optimization. Again, Yahoo has also contributed some groundbreaking information on reducing image sizes, and two of their developers have released a tool to help facilitate image optimization.

Smush.it

Adhere to Good Design Principles

Good design is not a substitute for a functional website with great content, but it does act as a major part of the successful website equation. The graphic appeal of a website is like packaging for a physical product and is a recognizable part of a brand. If your site a design is ugly, you better offer a fantastic service and pack it with value to the user à la Craigslist.

A professional-quality design will establish trust with it’s viewers, leave a lasting impression with visitors, and can even help you gain positive exposure through web design.

Certain design practices such as prominent placement of the call-to-action, use of whitespace, and grid-based layout can help guide your visitors and  maximize your site’s usability.

Conclusion

What have we learned? The web is evolving, there is new research being conducted every day, and new platforms such as mobile devices that businesses should not ignore. In short, every aspect of a website can be optimized in some fashion.

The on-site optimizations lay the foundation for search engines and visitors. While the on-page optimizations are being performed, it is time to head to external domains to start marketing, networking, and building links with other sites.

Be sure to download the pdf to give you a quick reference guide for the articles in the series.

Other Reading