Web Performance - A look inside Yahoo!

A look at some of the key changes that has given us best results. The talk also covers some cool APIs for hackers.

Transcript

2. Web Performance - a look inside Yahoo! Praveen P. N @holydevil
3. • Revisit 80-20 • How we speed-up pages • Tools and APIs for hackers • Questions Agenda
4. Why not optimize backend?
5. 80/20 in 2006 0% 25% 50% 75% 100% Yahoo! Google MySpace MSN Ebay Amazon Youtube CNN 85% 91% 62% 95% 95% 91% 75% 90% 15% 9% 38% 5% 5% 9% 25% 10% Backend Frontend * * everything except backend
6. 80/20 in 2012 0% 25% 50% 75% 100% Yahoo! Google MySpace MSN Ebay Amazon Youtube CNN 94% 91% 82% 92% 92% 95% 85% 88% 6% 9% 18% 8% 8% 5% 15% 12% Backend Frontend * * everything except backend
7. 2006 vs 2012 15% 85% Frontend Backend 11% 89% Frontend Backend (Time spent)
8. http://flic.kr/p/6tb7Gn
9. Performance fixes that have given us maximum gains
10. 1 loading 3rd party content Lazy
11. Defer loading of JS and CSS 2
12. Geographic distribution (CDN) 3
13. If your users are in India - don’t make them go all the way to west coast and come back
14. Content compression 4
15. Avoiding redirects 5
16. Tools and APIs for Hackers
17. Boomerang by Yahoo! github.com/yahoo/boomerang
18. Usage <script  src="boomerang.js"  type="text/ javascript"></script> <script  type="text/javascript"> BOOMR.init({     beacon_url:  "http://yoursite.com/path/ to/beacon.gif"   }); </script> lognormal.github.com/boomerang/doc/ Documentation :
19. Boomerang plugins Plugins : * W3C Navigation timing API support * Measure DNS latency * Measure load time pre-rendered by Chrome <your plugin here> lognormal.github.com/boomerang/doc/howtos/
20. YSlow Open source github.com/marcelduran/yslow/ Mozilla Firefox add-on Google Chrome extension Mobile/Desktop browser bookmarklet Opera extension Apple Safari extension and more ...
21. YSlow commandline Installation $  npm  install  yslow  -­‐g Use $  yslow  file.har  -­‐i  grade  -­‐f  plain
22. YSlow commandline Example $  yslow  -­‐i  info  -­‐f  plain  yahoo.har   size:  629.4K  (629408  bytes) overall  score:  A  (95) url:  http://www.yahoo.com/ # of requests: 91 ruleset:  ydefault page  load  time:  4750
23. YSlow + PhanthomJS $  brew  update  &&  brew  install  phantomjs   Install PhantomJS (Headless webkit with JS API) $  phantomjs  yslow.js  -­‐-­‐help Help
24. $  phantomjs  yslow.js  -­‐i  basic  \  -­‐f  plain  http://flic.kr   Example YSlow + PhanthomJS size:  242.8K  (242889  bytes) overall  score:  A  (94) url:  http://www.flickr.com/ # of requests: 11 ruleset:  ydefault page  load  time:  1730
25. WebPageTest
26. Google PageSpeed Insights 1. Create API Key 2. $ curl "https://www.googleapis.com/pagespeedonline/v1/ runPagespeed?url=http://code.google.com/speed/page-speed/ &key=yourAPIKey" 3. { "kind": "pagespeedonline#result", "id": "http://code.google.com/speed/page-speed/", "responseCode": 200, "title": "PageSpeed Home", "score": 90, ... Documentation: tinyurl.com/pagespeedinsights
27. Demos
28. Thank you! slides - speakerdeck.com/u/holydevil