Your SlideShare is downloading. ×
WPO @ PubCon 2010
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

WPO @ PubCon 2010

3,755
views

Published on

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

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,755
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
57
Comments
0
Likes
5
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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
  • 12. #1: Reduce the number of requests It’s the golden rule
  • 13. Reducing requests •  Combine all JavaScripts •  Combine all CSS files •  Combine images into sprites
  • 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. html js png png js js js
  • 16. <script src="all.js"></script> After
  • 17. html js png png
  • 18. CSS sprites
  • 19. CSS sprites
  • 20. csssprites. com
  • 21. #2: Reducing component sizes
  • 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. And more… waterfall optimizations
  • 24. A B
  • 25. Tools •  WebPageTest.org, Firebug Net Panel, WebKit Web Inspector •  YSlow, Page Speed •  YUICompressor, Closure Compiler
  • 26. Reading http://slideshare.net/stoyan/ http://www.phpied.com/performance- advent-calendar-2009/ http://perfplanet.com/
  • 27. To summarize •  Bandwidth, cache != excuses •  Keep an eye on the waterfalls •  Reduce # components •  Reduce component sizes
  • 28. Thanks! @stoyanstefanov http://phpied.com