WPO @ PubCon 2010

4,043
-1

Published on

WPO (Web Performance Optimization) presentation at PubCon Las Vegas 2010.

- waterfalls
- combining scripts and styles
- css sprites
- gzip, minification
- bandwidth and caching

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,043
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
57
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

WPO @ PubCon 2010

  1. 1. WPO: Web Performance Optimization Presented by: Stoyan Stefanov Las Vegas, 2010
  2. 2. About… YSlow 2.0
  3. 3. How do I make stuff go faster on the web?
  4. 4. You have to know what’s going on
  5. 5. Know thy waterfall http://webpagetest.org
  6. 6. 10% 90%
  7. 7. 38% 62% Full cache
  8. 8. It’s the frontend html, css, js, images, fonts, flash, widgets, stats counters…
  9. 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. 10. On bandwidth •  Matters for big file downloads •  Doesn’t really matter for pages
  11. 11. A request DNS lookup -> connection -> first byte -> download
  12. 12. #1: Reduce the number of requests It’s the golden rule
  13. 13. Reducing requests •  Combine all JavaScripts •  Combine all CSS files •  Combine images into sprites
  14. 14. <script src="jquery.js"></script>  <script src="jquery.twitter.js"></script>  <script src="jquery.cookie.js"></script>  <script src="myapp.js"></script>  Before…
  15. 15. html js png png js js js
  16. 16. <script src="all.js"></script> After
  17. 17. html js png png
  18. 18. CSS sprites
  19. 19. CSS sprites
  20. 20. csssprites. com
  21. 21. #2: Reducing component sizes
  22. 22. 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
  23. 23. And more… waterfall optimizations
  24. 24. A B
  25. 25. Tools •  WebPageTest.org, Firebug Net Panel, WebKit Web Inspector •  YSlow, Page Speed •  YUICompressor, Closure Compiler
  26. 26. Reading http://slideshare.net/stoyan/ http://www.phpied.com/performance- advent-calendar-2009/ http://perfplanet.com/
  27. 27. To summarize •  Bandwidth, cache != excuses •  Keep an eye on the waterfalls •  Reduce # components •  Reduce component sizes
  28. 28. Thanks! @stoyanstefanov http://phpied.com

×