wpo @ pubcon 2010
TRANSCRIPT
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 • … or there will be no full cache
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> <script src="myapp.js"></script>
Before…
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 = 80-85% off size) • Lossless image optimization
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 sizes
Thanks!
@stoyanstefanov http://phpied.com