Web Performance Optimization: The Silver Bullet of SEO and UX

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.comPhoto © 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 FORWEB PERFORMANCEOPTIMIZATION 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 AppsImage 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 STEPSFOR OPTIMIZINGWEB PERFORMANCE You – yes, you! – can get started today…

Study and learn from the bestSources: Yahoo, Google, Steve Souders

Free tools can help you get started nowSources: 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 exampleSource: 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

RESULTSOF OPTIMIZINGWEB 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 tookfor Google to crawl an average page.

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

We saved customers -1.5 seconds perpage 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. onlineImage 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.comNote: no werewolves were harmed in the making of this presentation.