Embed Size (px)
DESCRIPTION
How can companies increase conversion, drive more traffic, and increase customer satisfaction? By focusing on web site performance. It's like the silver bullet of customer experience! In this presentation at SMX Advanced 2012 in Seattle, Jonathon Colman, the in-house SEO at REI walks us through the business case around site speed optimization and shares five key tips to make your site perform faster for the benefit of your customers. There's also quite a few references to Twilight, Jacob Black, werewolves, and Taylor Lautner. You can learn more about Jonathon Colman at http://www.jonathoncolman.org/
Citation preview
Photo © Flickr user Nayara - Oliveira at flickr.com/photos/nayaraoliveira100/4616078239/
WEB PERFORMANCE OPTIMIZATION:
The Silver Bulletof SEO and UX
Photo © Flickr user eschipul at flickr.com/photos/eschipul/4160817135/
Jonathon ColmanTwitter @jcolman
Agile SEO for REIwww.REI.com
Photo © Flickr user Sonofabike at flickr.com/photos/oyj/2609205311
While you’re here, check out REI’s Flagship Store…
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 sovulnerable…
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/
Image found at themolly.wordpress.com/2009/11/21/new-moon-brings-out-hormones-in-women/
Some people find them oh
so attractive…
They even have their own fan
clubs!
Photo © Flickr user spacedustdesign at flickr.com/photos/spacedust_design/3433870864/sizes/m/in/photostream/
Image found at themolly.wordpress.com/2009/11/21/new-moon-brings-out-hormones-in-women/
What’s the only thing that can stop them?
A silver bullet!(or, uhh, love I suppose)
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 thanyou might think…
Google uses speed as an organic search ranking factor for the top
1% of competitive queries.
1% Sources: Google, Matt Cutts [via Search Engine Land]
Customers expect your web site to load in 2 seconds or less.
2Source: Forrester/Akamai [via GetElastic]
40% of customers will abandonany site that takes longer than
3 seconds to load.
3Source: Forrester/Akamai [via GetElastic]
The average Fortune 500 company web site takes 7 seconds to load.
7Source: Andrew Davies, Web Performance: A Whistlestop Tour…
For every 1 second of load time, conversion drops by 7%.
7% Source: Strangeloop
For every 1 second of load time, user satisfaction drops by 16%.
16% Source: Strangeloop
A faster site reduces the costs of infrastructure and releases
by 50% or more.Source: Shopzilla [via O’Reilly]
50%
“When [web sites] arefast, you feel good.
What that comes down tois that you feel in control.”
Matt MullenwegCo-founder of WordpressSource: Improving Performance in Mature Web Apps
“That feeling… translates to happiness.”
FYI: THIS IS NOT ACTUALLY MATT.
Image found at vintageyankee.blogspot.com/2009_11_01_archive.html
Image found at enter99.com/ryan-gosling-wallpaper-images-7847.html
Hey Girl, I’m convinced…
Image found at twilightsingapore.com/tag/david-slade/
Back off, Gosling. This is my show.
GRRRRR…
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
EXAMPLE HEADER:
Expires: Tue, 06 June 2023 22:00:00 GMT
Set a far-future Expires header
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
ON-PAGE CODE EXAMPLE:<script type="text/javascript" src="taylor.js"></script>…<script type="text/javascript" src="taylor.js"></script>
Don’t dupe JS, remove unused CSS
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
ON-PAGE CODE EXAMPLE:
<link rel="stylesheet" href="jacob.css">
<link rel="stylesheet" href="edward.css">
<link> your CSS, avoid @import
RATIONALE:
Allows for parallel downloading and avoids additional delays.
Source: http://code.google.com/speed/page-speed/docs/rtt.html#AvoidCssImport
Avoid redirects
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/
WTF?!
CSS sprites reduce HTTP requests
Source: http://code.google.com/speed/page-speed/docs/rtt.html#SpriteImages
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.
Best practices for CSS sprites
Source: http://code.google.com/speed/page-speed/docs/rtt.html#SpriteImages
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.
Here’s a site-wide sprite on REI.com
Source: http://www.rei.com/img/sprite_rei1.png
Implementing these CSS sprites saved us nearly a
whole second of avg. page load time.
Source: http://www.google.com/doodles/jim-hensons-75th-birthday
Here’s a complex Google example
Source: http://www.google.com/logos/2011/henson11-hp-6ea.png
This sprite is a 60-frame animation!
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 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 ColmanAgile SEO for REI
Home: www.jonathoncolman.org
Twitter: @jcolman
E-mail: [email protected]
We’re
hiring!
bit.ly/
rei-jobs
Note: no werewolves were harmed in the making of this presentation.
