WPO:
Web Performance
Optimization
Presented by:
Stoyan Stefanov
Las Vegas, 2010
About…
YSlow 2.0
How do I make stuff go faster
on the web?
You have to know what’s
going on
Know thy waterfall
http://webpagetest.org
10% 90%
38% 62%
Full cache
It’s the frontend
html, css, js, images, fonts,
flash, widgets, stats counters…
On caching
•  50% users are empty cache
•  20% page views are empty cache
•  ergo
•  Optimize empty cache experience
•  … ...
On bandwidth
•  Matters for big file downloads
•  Doesn’t really matter for pages
A request
DNS lookup -> connection -> first byte -> download
#1: Reduce the number of
requests
It’s the golden rule
Reducing requests
•  Combine all JavaScripts
•  Combine all CSS files
•  Combine images into sprites
<script src="jquery.js"></script> 
<script src="jquery.twitter.js"></script> 
<script src="jquery.cookie.js"></script> 
<s...
html
js
png
png
js
js
js
<script src="all.js"></script>
After
html
js
png
png
CSS sprites
CSS sprites
csssprites.
com
#2: Reducing component sizes
Reducing component sizes
•  Compression – flip gzip ON for 70%
savings on JS, CSS, HTML, XML, JSON…
•  Minification (+gzip...
And more…
waterfall optimizations
A	
B
Tools
•  WebPageTest.org, Firebug Net Panel,
WebKit Web Inspector
•  YSlow, Page Speed
•  YUICompressor, Closure Compiler
Reading
http://slideshare.net/stoyan/
http://www.phpied.com/performance-
advent-calendar-2009/
http://perfplanet.com/
To summarize
•  Bandwidth, cache != excuses
•  Keep an eye on the waterfalls
•  Reduce # components
•  Reduce component si...
Thanks!
@stoyanstefanov
http://phpied.com
WPO @ PubCon 2010
Upcoming SlideShare
Loading in...5
×

WPO @ PubCon 2010

3,880

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
3,880
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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×