Blog

Don Ruzek

Engineering a Website’s Front-End for Optimized Connectivity

October 20th, 2011

Technical

Broadband! Optical fiber! 4g! These are the keywords of today’s connectivity. But what do they really mean? They mean that we can now send more media-rich content to users. But…should we? Well, if it serves the most relevant content to the user and creates a good user experience, sure. But we need to remember that one of the basics of good usability is site performance. And with so many users now streaming video, music and other large amounts of data, we’re finding the Internet can often be pretty strained.

Not long ago, Google started including site performance in its organic SEO ranking results, making connectivity into more than just a tech term and into an issue with serious business implications. This change doesn’t necessarily mean we have to degrade the website experience, though. In fact, in most cases we wouldn’t want to. For example, those large inviting photos of a travel destination site can really convey the experience of being there, and that’s not something organizations that rely on the web for business development can part with.

As developers, we just have to be smarter about optimizing and delivering the content. It’s also important that the front-end code – HTML, CSS and JavaScript - are planned out carefully to deliver the best performance and overall experience. So what are some good first steps in optimizing a website for connectivity purposes?

1. Image Compression. Sure, we all know that making file sizes smaller is better, but have you seen the new tools such as JPEGmini? This takes an image that’s been reduced as much as possible in PhotoShop down to a fraction of the size, without compromising on quality. Depending on the site’s design, this could be one of the best things you can do to make your site perform better.
2. Code Compression. Minify code before sending it to production. There are many good tools out there such as Yahoo’s YUI Compressor.
3. HTTP Requests. Servers on the back-end are handling requests from web pages so there are a few things that can speed things up. Background Sprites are simply larger images that contain numerous smaller graphics, most commonly icons. CSS and JavaScript Files should be combined into as few files as possible. Sometimes it does make sense to single out a large piece of code that’s used on one or two pages and load it separately, but keep in mind calls back to the server. Cache: when looking at a site design in Photoshop or Fireworks, I try to identify which parts of the design will be images, and which parts of those images could be created to be also be part of other pages. Then the browser will already have that image. Back-end server performance tools like IISpeek or RUM can also identify front-end bottlenecks, so it’s good to watch performance there as well.
4. Semantic HTML Markup. This is important for SEO. Make sure the page’s attribute is representative of the page’s content. Headers should be setup properly; <h1> for the page’s title, <h2> for sub headers, <h3>, etc, and <p> for paragraphs of content. Search engines can decide more consistently what is readable content. Semantic markup is also useful in other ways, like accessibility.  If you’re working with Section 508 pages and screen readers, content is presented by it’s hierarchy. Also, if you ever want to make your site compatible with a smart phone or iPad, you’ll be happy you used semantic markup (I certainly was). It’s much easier to apply device-specific CSS styling.
5. Progressive Enhancement. CSS3, the newest flavor of Cascading Style Sheets, can do a lot of work that images (and some JavaScript) used to do. Let the user’s browser do some of the work instead of moving more data across the Internet, or sending more unnecessary requests to the server. This button is made without any graphic images. It’s totally rendered by the browser.

What you see, however, depends on the browser you’re using. Firefox, Chrome and more will see the button to the left. Internet Explorer doesn’t round the corners or add the drop shadow (right), but will show a nice border and smooth gradient. Since technology is moving in this direction, and the usage of older browsers diminishes daily, the question arises: is it worth the effort, cost and performance to give the older browsers the exact same experience, or an experience that’s as good as the browser is created to give with optimal performance? (Check out my colleague has to say about that here!) In most projects, this is a good question to ask up front.

These are only some initial techniques to engineering a website’s front-end to run more efficiently, but generally the most important. Hopefully this gives a good foundation to start planning the structure of your HTML, CSS and JavaScript!