1 / 28

Even Faster Themes

Even Faster Themes. Steve Souders souders@google.com http://stevesouders.com/docs/wordcamp-20090530.ppt. Disclaimer: This content does not necessarily reflect the opinions of my employer. the importance of frontend performance. 9%. 91%. 17%. 83%. iGoogle, primed cache.

ceri
Download Presentation

Even Faster Themes

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Even Faster Themes Steve Souders souders@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. 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 14 Rules

  5. Sept 2007

  6. 15% discount code: vel09cmb

  7. June 2009

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

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

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

  11. making Carrington Blog Faster • stylesheets • combine • avoid @import • scripts • combine • move to bottom • lazy load • no querystring • sprites • optimize images • gzip, future Expires • preload big image

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

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

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

  15. Carrington Blog Faster4. optimize images • grey-to-white-gradient.png – 1x60, 480 bytes of data, 46K file size! • smushit.com – runs in YSlow

  16. Carrington Blog Faster5. gzip, future Expires • ~80% of page views have a primed cache • create .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 js • AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css application/x-javascript application/javascript

  17. 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/sprite.png";

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

  19. primed cache – before & after After: 22 requests 8K transferred 2 scripts 4 stylesheets 14 background images 1 request 3K transferred

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

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

  22. 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/StanfordDataMining.2006-11-29.ppt 2 http://www.slideshare.net/stoyan/yslow-20-presentation

  23. cost savings • hardware – reduced load • bandwidth – reduced response size http://billwscott.com/share/presentations/2008/stanford/HPWP-RealWorld.pdf

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

  25. Steve Souders souders@google.com http://stevesouders.com/docs/wordcamp-20090530.ppt

More Related