Photo © Flickr user Nayara
- Oliveira at flickr.com/photos/nayaraoliveira100/4616078239/

WEB PERFORMANCE OPTIMIZATION: The Silver
Bullet of SEO and UX Jonathon Colman Twitter @jcolman Agile SEO for REI www.REI.com Photo © Flickr user eschipul at flickr.com/photos/eschipul/4160817135/

While you’re here, check out
REI’s Flagship Store… Photo © Flickr user Sonofabike at flickr.com/photos/oyj/2609205311

Then get out and explore
our native forests and woodlands on a hike… Photo © Flickr user sha-put-ski at flickr.com/photos/chelsea_nj/6095128551/

But watch out for… WEREWOLVES!
Image found at twilightsaga.wikia.com/wiki/File:THE-WEREWOLVES-twilight-series-8392804-1920-1200.jpg

They’re snarly! And mean! And
shirtless! Image found at ugo.com/movies/twilight-new-moon

And yet so vulnerable… Image
found at digitalcitizen.ca/2009/11/22/over-120-twilight-new-moon-printable-posters-8x12-to-20x24-inches/the-twilight-saga-new-moon-5/

Some people find them oh
so attractive… Image found at themolly.wordpress.com/2009/11/21/new-moon-brings-out-hormones-in-women/

They even have their own
fan clubs! Photo © Flickr user spacedustdesign at flickr.com/photos/spacedust_design/3433870864/sizes/m/in/photostream/

What’s the only thing that
can stop them? A silver bullet! (or, uhh, love I suppose) Image found at themolly.wordpress.com/2009/11/21/new-moon-brings-out-hormones-in-women/ Photo © Flickr user eschipul at flickr.com/photos/eschipul/4160817135/

Site Speed is Your Silver
Bullet  For conversion rate optimization  For customer experience and satisfaction  For lowering bounce rate  For increasing organic traffic for the most competitive keywords  For increasing overall competitiveness  For saving money on operations  For getting out even the toughest stains!

MAKE THE CASE FOR WEB
PERFORMANCE OPTIMIZATION Tip: it’s easier than you might think…

Google uses speed as an
organic % search ranking factor for the top 1% of competitive queries. Sources: Google, Matt Cutts [via Search Engine Land]

Customers expect your web site
to load in 2 seconds or less. Source: Forrester/Akamai [via GetElastic]

40% of customers will abandon
any site that takes longer than 3 seconds to load. Source: Forrester/Akamai [via GetElastic]

The average Fortune 500 company
web site takes 7 seconds to load. Source: Andrew Davies, Web Performance: A Whistlestop Tour…

% For every 1 second
of load time, conversion drops by 7%. Source: Strangeloop

% For every 1 second
of load time, user satisfaction drops by 16%. Source: Strangeloop

% A faster site reduces
the costs of infrastructure and releases by 50% or more. Source: Shopzilla [via O’Reilly]

“When [web sites] are fast,
you feel good. What that comes down to is that you feel in control.” “That feeling… FYI: THIS IS NOT translates to ACTUALLY MATT. happiness.” Matt Mullenweg Co-founder of Wordpress Source: Improving Performance in Mature Web Apps Image found at vintageyankee.blogspot.com/2009_11_01_archive.html

Hey Girl, I’m convinced… Image
found at enter99.com/ryan-gosling-wallpaper-images-7847.html

Back off, Gosling. This is
my show. GRRRRR… Image found at twilightsingapore.com/tag/david-slade/

Image found at aladyrevealsnothing.com/2012/03/dont-play-jokes-on-ryan-gosling-he-is.html/

5 KEY STEPS FOR OPTIMIZING
WEB PERFORMANCE You – yes, you! – can get started today…

Study and learn from the
best Sources: Yahoo, Google, Steve Souders

Free tools can help you
get started now Sources: Yahoo! YSlow, Firebug, Google Page Speed, Google Analytics, WebPageTest and Pingdom

Set a far-future Expires header
EXAMPLE HEADER: Expires: Tue, 06 June 2023 22:00:00 GMT RATIONALE: Helps with re-loads of static page objects and components by caching them. Use across all content types. Source: http://developer.yahoo.com/performance/rules.html#expires

Don’t dupe JS, remove unused
CSS ON-PAGE CODE EXAMPLE: <script type="text/javascript" src="taylor.js"></script> … <script type="text/javascript" src="taylor.js"></script> RATIONALE: Creates unnecessary HTTP requests and wasteful JS execution. As team size/code complexity increases, so do duplicates and unused code! Refactor or remove code you’re not actively using. Sources: http://developer.yahoo.com/performance/rules.html#js_dupes and http://code.google.com/speed/page-speed/docs/payload.html#RemoveUnusedCSS

<link> your CSS, avoid @import
ON-PAGE CODE EXAMPLE: <link rel="stylesheet" href="jacob.css"> <link rel="stylesheet" href="edward.css"> RATIONALE: Allows for parallel downloading and avoids additional delays. Source: http://code.google.com/speed/page-speed/docs/rtt.html#AvoidCssImport

Avoid redirects WTF?! RATIONALE: Cuts
down on wait time for users by avoiding an entire request-response cycle and the latency that goes with it. Source: http://code.google.com/speed/page-speed/docs/rtt.html#AvoidRedirects; Image found at doobious.org/pop-icon-of-the-day-taylor-lautner/

CSS sprites reduce HTTP requests
CSS PROPERTIES USED: background-image: url(img/twilight-icons.png); background-position: 0 0; RATIONALE: Reducing total HTTP requests greatly improves site performance. Combining common images into “sprites” reduces requests, latency, overhead, and total page file size. Source: http://code.google.com/speed/page-speed/docs/rtt.html#SpriteImages

Best practices for CSS sprites
Combine images into sprites when:  Images load together  Images have similar color palettes  Images are PNGs and/or GIFs  Images are both small and cacheable Do not use for large JPGs/photos. Source: http://code.google.com/speed/page-speed/docs/rtt.html#SpriteImages

Here’s a site-wide sprite on
REI.com Implementing these CSS sprites saved us nearly a whole second of avg. page load time. Source: http://www.rei.com/img/sprite_rei1.png

Here’s a complex Google example
Source: http://www.google.com/doodles/jim-hensons-75th-birthday

This sprite is a 60-frame
animation! Source: http://www.google.com/logos/2011/henson11-hp-6ea.png

RESULTS OF OPTIMIZING WEB PERFORMANCE
“Racing down the road like that had been amazing. The feel of the wind in my face, the speed and the freedom…”

A-50% decrease in the time
it took for Google to crawl an average page.

A+100% increase in the amount
of total pages Google crawled per day.

We saved customers -1.5 seconds
per page view. Multiplied by all page views…

We saved customers 22 years
of time. Image found at parajunkee.com/2012/05/read-along-fifty-shades-grey-chapter-14.html

Time they’ll spend outside vs.
online Image found at blogs.pioneerlocal.com/entertainment/2008/11/twilight_movie_minus_snags_fai.html

In Conclusion Requiem:  The
site performance business case isn’t just about SEO – it’s about customer UX  Plan a budget/time for performance work  Start with quick wins, “shrink the change”  Set speed targets for all new features  Measure, celebrate, repeat  And release a sequel in two separate parts

Thank you! Jonathon Colman Agile
SEO for REI Home: www.jonathoncolman.org Twitter: @jcolman E-mail: jcolman@rei.com Note: no werewolves were harmed in the making of this presentation.