WPO @ PubCon 2010

WPO @ PubCon 2010

• 1.
  WPO: Web Performance Optimization Presented by: StoyanStefanov Las Vegas, 2010
• 2.
  About… YSlow 2.0
• 3.
  How do Imake stuff go faster on the web?
• 4.
  You have toknow what’s going on
• 5.
  Know thy waterfall http://webpagetest.org
• 6.
  10% 90%
• 7.
  38% 62% Full cache
• 8.
  It’s the frontend html,css, js, images, fonts, flash, widgets, stats counters…
• 9.
  On caching •  50%users are empty cache •  20% page views are empty cache •  ergo •  Optimize empty cache experience •  … or there will be no full cache
• 10.
  On bandwidth •  Mattersfor big file downloads •  Doesn’t really matter for pages
• 11.
  A request DNS lookup-> connection -> first byte -> download
• 13.
  #1: Reduce thenumber of requests It’s the golden rule
• 14.
  Reducing requests •  Combineall JavaScripts •  Combine all CSS files •  Combine images into sprites
• 15.
  <script src="jquery.js"></script>  <script src="jquery.twitter.js"></script>  <script src="jquery.cookie.js"></script>  <script src="myapp.js"></script>  Before…
• 16.
  html js png png js js js
• 17.
  <script src="all.js"></script> After
• 18.
  html js png png
• 19.
  CSS sprites
• 20.
  CSS sprites
• 21.
  csssprites. com
• 22.
  #2: Reducing componentsizes
• 23.
  Reducing component sizes • Compression – flip gzip ON for 70% savings on JS, CSS, HTML, XML, JSON… •  Minification (+gzip = 80-85% off size) •  Lossless image optimization
• 24.
  And more… waterfall optimizations
• 25.
  A B
• 26.
  Tools •  WebPageTest.org, FirebugNet Panel, WebKit Web Inspector •  YSlow, Page Speed •  YUICompressor, Closure Compiler
• 27.
  Reading http://slideshare.net/stoyan/ http://www.phpied.com/performance- advent-calendar-2009/ http://perfplanet.com/
• 28.
  To summarize •  Bandwidth,cache != excuses •  Keep an eye on the waterfalls •  Reduce # components •  Reduce component sizes
• 29.
  Thanks! @stoyanstefanov http://phpied.com