Return

Give Your Website a Performance Tune-Up

Spring has sprung and it's time to start cleaning; your website can benefit from a declutter and tune-up, too.

Web pages have gotten fat. The average page size is now well over a megabyte and still trending upwards. The number of page objects has quintupled since 2003 to over 100. Lots of data and a large number of page object requests equals a bloated, slow-loading experience.

Why is speed important?  Slow-loading web pages hurt your site's credibility, and the minimum "tolerable wait time" is pretty short - between 5 and 8 seconds. Shaving or adding fractions of a second can have a measurable impact on your site traffic and user satisfaction.

Figures shown at O'Reilly's Velocity conference show how even very slight speed increases can have a dramatic impact on retention, conversion and revenue. For instance, Yahoo! found a mere 400millisecond of additional delay resulted in a 9% drop in traffic.

So with performance and speed firmly in mind, now is a good time to give your web site a once-over to find savings that could improve your bottom line. Following are a few common methods to help improve your web site performance, split between content, design, and code concerns.


UX Savings


Tame image carousels
Image carousels are ubiquitous these days, but many are poorly configured and lead to performance problems; specifically, carousels that automatically load all the images mean you take a performance hit for images that might rarely be seen by users. Keep carousel content to only a few images, and only load them when requested by the user, and avoid auto-play.

Avoid image carousels altogether

A typical carousel of 5 images at 600x400px adds 750 kB ~ 1 MB per pages. Furthermore, carousels are of dubious utility (see Jakob Nielsen’s Alert box: "Auto-Forwarding Carousels and Accordions Annoy Users and Reduce Visibility").

Ditching the carousel could give a potential saving per instance of  ~1MB and ~10 HTTP requests. Not convinced? Try taking Brad Frost's Carousel challenge: use analytics to measure engagement with your carousel and try alternatives until you find something that meets your user and business goals but uses less bandwidth.

Avoid auto-play video.

The average length of an internet video is now 3 minutes (websiteoptimization.com, 2007 figures), equal to 3~4 MB per page. For instance, ABCnews.go.com article pages automatically load  6 MB of video as soon as the page appears. When you can, try to make video on-demand, rather than always-on.

Rethink advertisements
Ads might be essential to a site's revenue, but they can be a real drag on performance, and should be considered in cost calculations. A quick glance at today's Boston.com loads 550 kB in ads. There are ways to save: performance-wise, one large advert is generally preferable to many smaller ones. The shift to responsive design has some firms changing from Flash and large bitmap adverts to pure HTML/CSS/JS adverts, which usually have a smaller footprint.

Hide maps until needed
Embedding an interactive map can add 400 kb to the page size. Load maps on demand, and save.

Ease off on Flash
As well as being relatively large files, Flash is processor-intensive and increases PC power-use by 33%.

Share buttons and other plugins

Each social button is backed by Javascript that triggers a number of additional requests and costs more bandwidth. For example, when I turned off Facebook (Like & Share & Facewall), Twitter, Disqus Comment system on my own blog, I saved 64  HTTP requests and 400 kB in bandwidth. Limit the social widgets on your sites to only those that people actually use -, analytics can help you determine what to keep and what to cull. Loading them on demand, or omitting them entirely can also be good options.

Visual savings
By tweaking or changing the design of your site, you’ll start shaving off kilobytes and notice impressive speed gains.

Photo art direction
Mono pictures use a fraction of the data of full-color. If your art direction allows for it, go for it (hint: mono doesn't mean only black and white – color-wash effects can be nice). Applying a selective blur can help, too (idea swiped from Paul Robert Lloyd).

Combining both techniques knocks this 250kb image of a sleepy cat down to 153kb.

Jamesblog_catbw_blur-1jamesblog_catcol

Picture credit: Garrettc, Flickr

Vectors
Vector graphics tend to have smaller file sizes than bitmaps (like JPGs).This SVG picture of Psy is only 38kb and you can scale it to any size without losing quality (note, older browsers may not display SVG graphics properly or at all).

Eliminate cruft
Using a clean, minimalistic aesthetic can be helpful in keeping page size down. The fewer bevels, drop-shadows, and big background images, the lower the VD data overhead (although many of the same effects can be achieved with CSS 3 these days, keeping them data-light).

Further savings

Icon fonts, CSS sprites and drawing in pure CSS3 all bring further savings, especially if your current site uses a lot of icons and small repeating graphics.

Technology cheat sheet
.
There are many things a developer can do to speed up performance of a site. Free tools like Google's PageSpeed Tools will analyze your pages and provide you recommendations.

Common optimization tweaks include:
•    Add "Expires" Header to .htaccess
•    Use a Content Delivery Network
•    Pay attention to code structure and load order
•    Compress downloads using .gzip
•    Cache downloads
•    Minify your CSS and JavaScript
•    Avoid redirects
•    Use Server Side Concatenation to reduce HTTP requests


Making it a habit


Network inspector for designers
Use your browser's network inspector (like the one pictured from Google Chrome) to get the real scoop on what happens when one of your pages loads. Decoding this information can take practice, but once you get the idea areas for improvement and opportunities to save will start jumping out at you. Keep an eye on the "onLoad" figure highlighted - that's the total time it takes the page to load. Once you get in the habit of pointing this handy tool at your own pages, the urge to tweak and optimize may become irresistible.

jamesblog_inspector


Hook in analytics (and profit)

As the bevy of compelling stats from conferences like Velocity show, there's gold in them thar Optimization Hills. Every time you make a speed improvement through optimization, check your bounce rate, abandonment rate, conversions and other KPIs to see if there is an appreciable upswing. It may be subtle and you may need expert help
If you can run A/B tests on your pages, you could benchmark multiple versions of your design, varying the data-load for each, and seeing how much of a performance and engagement difference you’ll find. Once you can prove to stakeholders that you are getting optimization gains, surely getting permission to keep
optimizing will be a snap :).

Designing with performance in mind from the outset

In "Responsive design on a budget," creative technologist Mark Perkins outlines a budget-setting approach to data and performance: at the start of each new Responsive Design project, they work out a sensible data limit, then stick to it throughout their process. It becomes a key performance indicator for the project. This works great for responsive projects, and there's no reason not to extend the approach out to all web and app design projects.


Start enjoying the benefits

There are many good reasons to make optimization a habit for your site and organization. Here are two that are less obvious:

Mobile-first nation.

33% of Americans are now "mobile-mostly" or mobile-only, and don't have regular access to desktop broadband. Data-heavy experiences are kryptonite to mobile users; if you don't throttle down, you risk excluding them altogether. If you're starting a new site, you could consider placing the needs of the mobile user first, which forces you to focus on what the user actually needs and serving it to them as efficiently as possible.

Optimized design is more climate friendly

Storing and transmitting data takes electricity, and generating electricity for the most part involves burning fossil fuels, thus contributing to global warming. Consider that the internet's carbon footprint already exceeds 330 Million tons / CO2 a year; by cutting the footprint of your site you are also doing something to arrest climate change.


Conclusion


A site spring-clean might delight your users, help the bottom line, and give you a warm glow of satisfaction. This isn’t intended to be a comprehensive guide: once you start optimizing in earnest, you’ll find many more ways to save.

Happy cleaning!

 

By: James Christie
Date Published: April 22, 2013


Want to offer your customers a better experience?

Let's work together: Contact Us Today

comments powered by Disqus
Contributed by:
James Christie Director, Experience Design   Contact James

Newsletter Sign Up



Mad*Pow HQ

27 Congress Street
Portsmouth, NH 03801

Office: 603.436.7177
Fax: 603.386.6608

Boston

179 Lincoln Street
Boston, MA 02111

Office: 617.426.7177

PROJECT INQUIRIES

Complete Sale Inquiry Form

EMAIL US

Sales: solutions
Press: communications



Get in Touch

CALL US

603.387.8307

CONTACT US

SALES | PR/MARKETING | EVENTS