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