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.
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.
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
, 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.
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.
Picture credit: Garrettc, Flickr
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).
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).
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
• Use a Content Delivery Network
• Pay attention to code structure and load order
• Compress downloads using .gzip
• Cache downloads
• 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.
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:
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.
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.