Steve Souders

1
Even Faster Themes

• Steve Souders
• souders_at_google.com
• http//stevesouders.com/docs/wordcamp-20090530.ppt
  

Disclaimer This content does not necessarily
reflect the opinions of my employer.
2
the importance of frontend performance
9
91
17
83
iGoogle, primed cache
iGoogle, empty cache
3
time spent on the frontend
April 2008
4
The Performance Golden Rule
80-90 of the end-user response time is spent on
the frontend. Start there.
greater potential for improvement
simpler
proven to work
5
14 Rules

• Make fewer HTTP requests
• Use a CDN
• Add an Expires header
• Gzip components
• Put stylesheets at the top
• Put scripts at the bottom
• Avoid CSS expressions
• Make JS and CSS external
• Reduce DNS lookups
• Minify JS
• Avoid redirects
• Remove duplicate scripts
• Configure ETags
• Make AJAX cacheable

6
(No Transcript)
7
Sept 2007
8
15 discount code vel09cmb
9
(No Transcript)
10
June 2009
11
Even Faster Web Sites
Splitting the initial payload Loading scripts
without blocking Coupling asynchronous
scripts Positioning inline scripts Sharding
dominant domains Flushing the document
early Using iframes sparingly Simplifying CSS
Selectors Understanding Ajax performance..........
Doug Crockford Creating responsive web
apps............Ben Galbraith, Dion
Almaer Writing efficient JavaScript.............Ni
cholas Zakas Scaling with Comet...................
..Dylan Schiemann Going beyond gzipping...........
....Tony Gentilcore Optimizing images.............
......Stoyan Stefanov, Nicole Sullivan
12
\s?-ler-?-te\ noun swiftness, speed supernatural
quickness possessed by vampires
theme Carrington Blog
13
empty cache
primed cache
22 requests 214K transferred 2 scripts 4
stylesheets 14 background images
22 requests 8K transferred 2 scripts 4
stylesheets 14 background images
14
(No Transcript)
15
making Carrington Blog Faster

• stylesheets
• combine
• avoid _at_import
• scripts
• combine
• move to bottom
• lazy load
• no querystring
• sprites
• optimize images
• gzip, future Expires
• preload big image

16
Carrington Blog Faster1. stylesheets

• combine stylesheets fewer HTTP requests is
  faster
• embed typography.css and carrington-blog.css in
  style.css (fix image URLs)
• inline ie.css when necessary
• avoid _at_import causes stylesheets to be loaded
  sequentially

17
Carrington Blog Faster2. scripts

• combine scripts fewer HTTP requests is faster
• concatenate jquery.js and carrington.js
• move inline script to the bottom don't breakup
  parallel downloads
• don't put inline scripts between stylesheet and
  other resources
• lazy load external script (big!) avoid blocking
  visible resources, onload fires faster
• don't use querystring breaks proxy caching

18
Carrington Blog Faster3. sprites

• combine CSS background images into sprites
  fewer HTTP requests is faster
• easiest non-repeating, top left
• comment.gif, header-texture.jpg(?), ndash.gif,
  rss-button.gif, sidebar-background.gif,
  watermark-light.gif
• bit harder center or bottom, same height
• divider-ornament.gif, divider-ornament-wide.gif,
  divider-ornament-wide-dark.gif
• http//spritegen.website-performance.org/
• pain in the a!

19
Carrington Blog Faster4. optimize images

• grey-to-white-gradient.png 1x60, 480 bytes of
  data, 46K file size!
• smushit.com runs in YSlow

20
Carrington Blog Faster5. gzip, future Expires

• 80 of page views have a primed cache
• create .htaccess under blog/
• Add a far future Expires header
• ExpiresActive On
• ExpiresDefault "access plus 10 years"
• Header set ETag ""
• Compress html, XML, css and js
• AddOutputFilterByType DEFLATE text/html
  text/plain text/xml text/css application/x-javascr
  ipt application/javascript

21
Carrington Blog Faster6. preload big image

• big sprite.png blocks parallel downloads
• if only we could load it above style.css
• preload it!
• new Image().src "http//webcelerity.com/blog/wp-
  content/themes/carrington-blog-faster/images/sprit
  e.png"

22
empty cache before after
After
22 requests 214K transferred 2 scripts 4
stylesheets 14 background images
11 requests 243K transferred(?!) 1 script 1
stylesheet 8 background images
23
primed cache before after
After
22 requests 8K transferred 2 scripts 4
stylesheets 14 background images
1 request 3K transferred
24
Even Faster Themes

• popular themes
• http//wordpress.org/extend/themes/browse/popular/
  
• Carrington Blog 58K downloads
• themes are GPL
• http//svn.automattic.com/wpcom-themes/
• think of the impact

25
takeaways

• focus on the frontend
• run YSlow http//developer.yahoo.com/yslow
• speed matters

26
impact on revenue

• Google
• Yahoo
• Amazon

500 ms ? -20 traffic1 400 ms ? -5-9 full-page
traffic2 100 ms ? -1 sales1
1 http//home.blarg.net/glinden/StanfordDataMinin
g.2006-11-29.ppt 2 http//www.slideshare.net/stoya
n/yslow-20-presentation
27
cost savings

• hardware reduced load
• bandwidth reduced response size

http//billwscott.com/share/presentations/2008/sta
nford/HPWP-RealWorld.pdf
28

• if you want
• better user experience
• more revenue
• reduced operating expenses
• the strategy is clear
• Even Faster Web Sites

29
Steve Souders souders_at_google.com http//stevesoude
rs.com/docs/wordcamp-20090530.ppt