Web Performance Optimization: The Silver Bullet of SEO and UX
Upcoming SlideShare
Loading in...5
×
 

Web Performance Optimization: The Silver Bullet of SEO and UX

on

  • 13,507 views

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! ...

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/

Statistics

Views

Total Views
13,507
Views on SlideShare
11,053
Embed Views
2,454

Actions

Likes
29
Downloads
103
Comments
4

21 Embeds 2,454

http://www.jonathoncolman.org 2108
https://twitter.com 123
http://daottoli.blogspot.com 63
http://69.89.31.189 57
http://eventifier.co 32
http://lanyrd.com 17
http://www.scoop.it 15
http://eventifier.com 7
http://us-w1.rockmelt.com 6
http://www.digitaldoughnut.com 5
http://speakerrate.com 3
http://www.daottoli.blogspot.com 3
http://kred.com 3
https://si0.twimg.com 3
http://www.linkedin.com 2
http://ec2-54-243-189-159.compute-1.amazonaws.com 2
https://www.google.com 1
http://webcache.googleusercontent.com 1
http://translate.googleusercontent.com 1
http://www.speakerfile.com 1
https://twimg0-a.akamaihd.net 1
More...

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution-NonCommercial-NoDerivs LicenseCC Attribution-NonCommercial-NoDerivs LicenseCC Attribution-NonCommercial-NoDerivs License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Web Performance Optimization: The Silver Bullet of SEO and UX Web Performance Optimization: The Silver Bullet of SEO and UX Presentation Transcript

  • 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.