WPO (Web Performance Optimization) presentation at PubCon Las Vegas 2010. - waterfalls - combining scripts and styles - css sprites - gzip, minification - bandwidth and caching

1. WPO:
Web Performance
Optimization
Presented by:
Stoyan Stefanov
Las Vegas, 2010

2. About…
YSlow 2.0

3. How do I make stuff go faster
on the web?

4. You have to know 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
• Matters for big file downloads
• Doesn’t really matter for pages

11. A request
DNS lookup -> connection -> first byte -> download

13. #1: Reduce the number of
requests
It’s the golden rule

14. Reducing requests
• Combine all 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 component sizes

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, Firebug Net 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