steve souders [email protected] even faster themes disclaimer: this content does not necessarily...
TRANSCRIPT
Steve [email protected]
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
