steve souders souders@google.com even faster themes disclaimer: this content does not necessarily...

Steve Souderssouders@google.com

http://stevesouders.com/docs/wordcamp-20090530.ppt

Even Faster Themes

Disclaimer: This content does not necessarily reflect the opinions of my employer.

17%

83%

iGoogle, primed cache

the importance of frontend performance

9% 91%

iGoogle, empty cache

time spent on the frontend

Empty Cache

Primed Cache

www.aol.com 97% 97%

www.ebay.com 95% 81%

www.facebook.com 95% 81%

www.google.com/search

47% 0%

search.live.com/results 67% 0%

www.msn.com 98% 94%

www.myspace.com 98% 98%

en.wikipedia.org/wiki 94% 91%

www.yahoo.com 97% 96%

www.youtube.com 98% 97%April 2008

14 RULES

1. MAKE FEWER HTTP REQUESTS

2. USE A CDN3. ADD AN EXPIRES HEADER4. GZIP COMPONENTS5. PUT STYLESHEETS AT THE

TOP6. PUT SCRIPTS AT THE

BOTTOM7. AVOID CSS EXPRESSIONS8. MAKE JS AND CSS

EXTERNAL9. REDUCE DNS LOOKUPS10.MINIFY JS11.AVOID REDIRECTS12.REMOVE DUPLICATE

SCRIPTS13.CONFIGURE ETAGS14.MAKE AJAX CACHEABLE

Sept 2007

15% discount code: vel09cmb

June 2009

Even Faster Web SitesSplitting the initial payloadLoading scripts without blockingCoupling asynchronous scriptsPositioning inline scriptsSharding dominant domainsFlushing the document earlyUsing iframes sparinglySimplifying CSS Selectors

Understanding Ajax performance..........Doug CrockfordCreating responsive web apps............Ben Galbraith, Dion

AlmaerWriting efficient JavaScript.............Nicholas ZakasScaling with Comet.....................Dylan SchiemannGoing beyond gzipping...............Tony GentilcoreOptimizing images...................Stoyan Stefanov, Nicole

Sullivan

\sə-ler-ə-tē\nounswiftness, speedsupernatural quickness

possessed by vampires

theme: Carrington Blog

empty cache primed cache

22 requests214K transferred2 scripts4 stylesheets14 background

images

22 requests8K transferred2 scripts4 stylesheets14 background

images

making Carrington Blog Faster

1. stylesheets• combine• avoid @import

2. scripts• combine• move to bottom• lazy load• no querystring

3. sprites4. optimize images5. gzip, future Expires6. preload big image

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 @import – causes stylesheets to be loaded sequentially

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 fasterdon't use querystring – breaks proxy caching

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#%!

Carrington Blog Faster4. optimize images

grey-to-white-gradient.png – 1x60, 480 bytes of data, 46K file size!

smushit.com – runs in YSlow

Carrington Blog Faster5. gzip, future Expires

~80% of page views have a primed cachecreate .htaccess under blog/# Add a far future Expires header<FilesMatch "\.(png|gif|jpg|js|css|ico)$"> ExpiresActive On ExpiresDefault "access plus 10 years" Header set ETag ""</FilesMatch>

# Compress html, XML, css and jsAddOutputFilterByType DEFLATE text/html

text/plain text/xml text/css application/x-javascript application/javascript

Carrington Blog Faster6. preload big image

big sprite.png blocks parallel downloadsif only we could load it above style.csspreload it!new Image().src = "http://webcelerity.com/blog/wp-

content/themes/carrington-blog-faster/images/sprite.png";

empty cache – before & after

22 requests214K transferred2 scripts4 stylesheets14 background

images

11 requests243K transferred(?!)1 script1 stylesheet8 background

images

After:

22 requests8K transferred2 scripts4 stylesheets14 background

images

primed cache – before & after

After:1 request3K transferred

Even Faster Themes

popular themes http://wordpress.org/extend/themes/browse/

popular/

Carrington Blog – 58K downloads

themes are GPLhttp://svn.automattic.com/wpcom-themes/

think of the impact

takeaways

focus on the frontend

run YSlow: http://developer.yahoo.com/yslow

speed matters

impact on revenue

Google:

Yahoo:

Amazon:

1 http://home.blarg.net/~glinden/StanfordDataMining.2006-11-29.ppt2 http://www.slideshare.net/stoyan/yslow-20-presentation

+500 ms -20% traffic1

+400 ms -5-9% full-page traffic2

+100 ms -1% sales1

cost savings

hardware – reduced load

bandwidth – reduced response size

http://billwscott.com/share/presentations/2008/stanford/HPWP-RealWorld.pdf

if you want better user experience more revenue reduced operating expenses

the strategy is clear

Even Faster Web Sites

Steve Souderssouders@google.com

http://stevesouders.com/docs/wordcamp-20090530.ppt