Web Performance - A look inside Yahoo!

Transcript

1. None

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