WPO @ PubCon 2010

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

Transcript of WPO @ PubCon 2010

Page 1: WPO @ PubCon 2010

WPO: Web Performance

Optimization

Presented by: Stoyan Stefanov Las Vegas, 2010

Page 2: WPO @ PubCon 2010

About… YSlow 2.0

Page 3: WPO @ PubCon 2010

How do I make stuff go faster on the web?

Page 4: WPO @ PubCon 2010

You have to know what’s going on

Page 5: WPO @ PubCon 2010

Know thy waterfall

http://webpagetest.org

Page 6: WPO @ PubCon 2010

10% 90%

Page 7: WPO @ PubCon 2010

38% 62%

Full cache

Page 8: WPO @ PubCon 2010

It’s the frontend

html, css, js, images, fonts, flash, widgets, stats counters…

Page 9: WPO @ PubCon 2010

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

Page 10: WPO @ PubCon 2010

On bandwidth

• Matters for big file downloads • Doesn’t really matter for pages

Page 11: WPO @ PubCon 2010

A request

DNS lookup -> connection -> first byte -> download

Page 12: WPO @ PubCon 2010
Page 13: WPO @ PubCon 2010

#1: Reduce the number of requests

It’s the golden rule

Page 14: WPO @ PubCon 2010

Reducing requests

•  Combine all JavaScripts •  Combine all CSS files •  Combine images into sprites

Page 15: WPO @ PubCon 2010

<script src="jquery.js"></script> <script src="jquery.twitter.js"></script> <script src="jquery.cookie.js"></script> <script src="myapp.js"></script> 

Before…

Page 16: WPO @ PubCon 2010

html

js

png

png

js

js

js

Page 17: WPO @ PubCon 2010

<script src="all.js"></script>

After

Page 18: WPO @ PubCon 2010

html

js

png

png

Page 19: WPO @ PubCon 2010

CSS sprites

Page 20: WPO @ PubCon 2010

CSS sprites

Page 21: WPO @ PubCon 2010

csssprites.com

Page 22: WPO @ PubCon 2010

#2: Reducing component sizes

Page 23: WPO @ PubCon 2010

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

Page 24: WPO @ PubCon 2010

And more…

waterfall optimizations

Page 25: WPO @ PubCon 2010

A

B

Page 26: WPO @ PubCon 2010

Tools

• WebPageTest.org, Firebug Net Panel, WebKit Web Inspector

•  YSlow, Page Speed •  YUICompressor, Closure Compiler

Page 27: WPO @ PubCon 2010

Reading

http://slideshare.net/stoyan/ http://www.phpied.com/performance-

advent-calendar-2009/ http://perfplanet.com/

Page 28: WPO @ PubCon 2010

To summarize

•  Bandwidth, cache != excuses •  Keep an eye on the waterfalls •  Reduce # components •  Reduce component sizes

Page 29: WPO @ PubCon 2010

Thanks!

@stoyanstefanov http://phpied.com