The document is a presentation on web performance optimization that uses Twilight references and images as a comedic framing device. It discusses how site speed impacts SEO, user experience, conversion rates, and costs. It provides key metrics on these impacts and outlines five steps for optimizing performance, including studying best practices, using developer tools, setting caching headers, reducing duplicate assets, and implementing CSS sprites. The presentation concludes that performance work should be an ongoing process of measuring impacts and continually improving the site experience.

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

2. 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/

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

5. 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/

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

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

8. 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/

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

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

11. 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/

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

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

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

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

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

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

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

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

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

21. “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

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

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

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

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

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

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

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

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

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

31. 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/

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

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

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

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

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

37. 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…”

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

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

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

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

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

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

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