1. Steve Souders souders@google.com http://stevesouders.com/docs/wordcamp-20090530.ppt Even Faster Themes Disclaimer: This content does not necessarily reflect the opinions of my employer.

2. 17% 83% iGoogle, primed cache the importance of frontend performance 9%91% iGoogle, empty cache

3. time spent on the frontend Empty CachePrimed Cache www.aol.com97% www.ebay.com95%81% www.facebook.com95%81% www.google.com/search47%0% search.live.com/results67%0% www.msn.com98%94% www.myspace.com98% en.wikipedia.org/wiki94%91% www.yahoo.com97%96% www.youtube.com98%97% 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 R ULES 1.M AKE FEWER HTTP REQUESTS 2.U SE A CDN 3.A DD AN E XPIRES HEADER 4.G ZIP COMPONENTS 5.P UT STYLESHEETS AT THE TOP 6.P UT SCRIPTS AT THE BOTTOM 7.A VOID CSS EXPRESSIONS 8.M AKE JS AND CSS EXTERNAL 9.R EDUCE DNS LOOKUPS 10.M INIFY JS 11.A VOID REDIRECTS 12.R EMOVE DUPLICATE SCRIPTS 13.C ONFIGURE ET AGS 14.M AKE AJAX CACHEABLE

7. Sept 2007

8. 15% discount code: vel09cmb

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.............Nicholas Zakas Scaling with Comet.....................Dylan Schiemann Going beyond gzipping...............Tony Gentilcore Optimizing images...................Stoyan Stefanov, Nicole Sullivan

12. \s ə -ler- ə -tē\ noun swiftness, speed supernatural quickness possessed by vampires theme: Carrington Blog

13. empty cacheprimed cache 22 requests 214K transferred 2 scripts 4 stylesheets 14 background images 22 requests 8K transferred 2 scripts 4 stylesheets 14 background images

15. making Carrington Blog Faster 1.stylesheets combine avoid @import 2.scripts combine move to bottom lazy load no querystring 3.sprites 4.optimize images 5.gzip, future Expires 6.preload big image

16. Carrington Blog Faster 1. 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

17. Carrington Blog Faster 2. 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 Faster 3. 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 Faster 4. optimize images grey-to-white-gradient.png – 1x60, 480 bytes of data, 46K file size! smushit.com – runs in YSlow

20. Carrington Blog Faster 5. 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-javascript application/javascript

21. Carrington Blog Faster 6. 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/sprite.png";

22. empty cache – before & after 22 requests 214K transferred 2 scripts 4 stylesheets 14 background images 11 requests 243K transferred(?!) 1 script 1 stylesheet 8 background images After:

23. 22 requests 8K transferred 2 scripts 4 stylesheets 14 background images primed cache – before & after After: 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 http://developer.yahoo.com/yslow speed matters

26. impact on revenue Google: Yahoo: Amazon: 1 http://home.blarg.net/~glinden/StanfordDataMining.2006-11-29.ppt 2 http://www.slideshare.net/stoyan/yslow-20-presentation +500 ms -20% traffic 1 +400 ms -5-9% full-page traffic 2 +100 ms -1% sales 1

27. cost savings hardware – reduced load bandwidth – reduced response size http://billwscott.com/share/presentations/2008/stanford/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@google.com http://stevesouders.com/docs/wordcamp-20090530.ppt