Web Performance Optimization: The Silver Bullet of SEO and UX


Published on

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/

Published in: Technology, Sports
No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Web Performance Optimization: The Silver Bullet of SEO and UX

  1. 1. Photo © Flickr user Nayara - Oliveira at flickr.com/photos/nayaraoliveira100/4616078239/
  2. 2. 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/
  3. 3. While you’re here, check out REI’s Flagship Store…Photo © Flickr user Sonofabike at flickr.com/photos/oyj/2609205311
  4. 4. 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/
  5. 5. But watch out for… WEREWOLVES!Image found at twilightsaga.wikia.com/wiki/File:THE-WEREWOLVES-twilight-series-8392804-1920-1200.jpg
  6. 6. They’re snarly! And mean! And shirtless!Image found at ugo.com/movies/twilight-new-moon
  7. 7. 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/
  8. 8. Some people find them oh so attractive…Image found at themolly.wordpress.com/2009/11/21/new-moon-brings-out-hormones-in-women/
  9. 9. They even have their own fan clubs!Photo © Flickr user spacedustdesign at flickr.com/photos/spacedust_design/3433870864/sizes/m/in/photostream/
  10. 10. 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/
  11. 11. 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!
  12. 12. MAKE THE CASE FORWEB PERFORMANCEOPTIMIZATION Tip: it’s easier than you might think…
  13. 13. Google uses speed as an organic % search ranking factor for the top 1% of competitive queries.Sources: Google, Matt Cutts [via Search Engine Land]
  14. 14. Customers expect your web site to load in 2 seconds or less.Source: Forrester/Akamai [via GetElastic]
  15. 15. 40% of customers will abandon any site that takes longer than 3 seconds to load.Source: Forrester/Akamai [via GetElastic]
  16. 16. The average Fortune 500 company web site takes 7 seconds to load.Source: Andrew Davies, Web Performance: A Whistlestop Tour…
  17. 17. % For every 1 second of load time, conversion drops by 7%.Source: Strangeloop
  18. 18. % For every 1 second of load time, user satisfaction drops by 16%.Source: Strangeloop
  19. 19. % A faster site reduces the costs of infrastructure and releases by 50% or more.Source: Shopzilla [via O’Reilly]
  20. 20. “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
  21. 21. Hey Girl, I’m convinced…Image found at enter99.com/ryan-gosling-wallpaper-images-7847.html
  22. 22. Back off, Gosling. This is my show. GRRRRR…Image found at twilightsingapore.com/tag/david-slade/
  23. 23. Image found at aladyrevealsnothing.com/2012/03/dont-play-jokes-on-ryan-gosling-he-is.html/
  24. 24. 5 KEY STEPSFOR OPTIMIZINGWEB PERFORMANCE You – yes, you! – can get started today…
  25. 25. Study and learn from the bestSources: Yahoo, Google, Steve Souders
  26. 26. Free tools can help you get started nowSources: Yahoo! YSlow, Firebug, Google Page Speed, Google Analytics, WebPageTest and Pingdom
  27. 27. 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
  28. 28. 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
  29. 29. <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
  30. 30. 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/
  31. 31. 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
  32. 32. 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
  33. 33. 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
  34. 34. Here’s a complex Google exampleSource: http://www.google.com/doodles/jim-hensons-75th-birthday
  35. 35. This sprite is a 60-frame animation!Source: http://www.google.com/logos/2011/henson11-hp-6ea.png
  36. 36. 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…”
  37. 37. A-50% decrease in the time it tookfor Google to crawl an average page.
  38. 38. A+100% increase in the amount oftotal pages Google crawled per day.
  39. 39. We saved customers -1.5 seconds perpage view. Multiplied by all page views…
  40. 40. We saved customers 22 years of time.Image found at parajunkee.com/2012/05/read-along-fifty-shades-grey-chapter-14.html
  41. 41. Time they’ll spend outside vs. onlineImage found at blogs.pioneerlocal.com/entertainment/2008/11/twilight_movie_minus_snags_fai.html
  42. 42. 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
  43. 43. 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.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.