Successfully reported this slideshow.

Porting Flickr to YUI3

5,406 views

Published on

Published in: Technology, Sports
  • How do you take timing data from your users? Is this open source too?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Porting Flickr to YUI3

  1. Porting Flickr to YUI 3 Ross Harmes
  2. Porting Flickr to YUI 3 Lessons in Performance Ross Harmes
  3. A few months ago we launched a new photo page…
  4. We decided to completely demolish the old page and rebuild with YUI3
  5. Using YUI3 was a delight…
  6. …but there were a few small problems
  7. First problem: deferred JS
  8. Slow page: No JS:
  9. One of the first perf. recommendations is to move all the JS to the bottom of the page
  10. This means UI elements that need JS to work will fallback to the non-JS case until the scripts load
  11. Our solution: Action Queueing
  12. This isn't making the JS load faster
  13. Getting creative with the loading indicators helps
  14. Second problem: long combo-handler URLs
  15. We use a lot of small JS modules on the page. This made our combo URLs very long:http://l.yimg.com/g/combo.gne?event/event-min.js&j/query-string- args.js.v85201.14&j/flickr_location_search.js.v85793.14&j/flickr_nav.js.v92497.14&base/base-min.js&anim/anim-min.js&dump/dump- min.js&datatype/datatype-xml-min.js&substitute/substitute-min.js&queue-promote/queue-promote-min.js&io/io-min.js&json/json- min.js&j/flickr_api.js.v93039.14&j/history-manager.js.v90829.14&j/photo-data.js.v92868.14&j/context-data.js.v92557.14&j/context- manager.js.v91220.14&j/sprintf.js.v90343.14&j/transjax-base.js.v85036.14&j/focus-tracker.js.v93044.14&event-simulate/event-simulate-min.js&j/photo- button-bar-transjax-en-us.js.v92588.14&j/image-fader.js.v85225.14&j/number-transjax-en-us.js.v90582.14&j/number.js.v87306.14&j/photo-filmstrip- transjax-en-us.js.v90793.14&j/photo-filmstrip.js.v92881.14&event/event-synthetic-min.js&j/event-annotations.js.v91160.14&j/event- mousedrag.js.v90789.14&j/math.js.v87441.14&j/fave-star.js.v91965.14&j/global-dialog-transjax-en-us.js.v85507.14&j/global-dialog- zeus.js.v92830.14&j/keyboard-shortcut-manager.js.v92698.14&node/node-event-simulate-min.js&j/photo- permalink.js.v91170.14&j/yahoo/autocomplete_2.5.1-zeus.js.v92829.14&j/bo-selecta-transjax-en-us.js.v90792.14&j/bo-selecta- zeus.js.v91866.14&cookie/cookie-min.js&j/dejaview-zeus.js.v90642.14&j/photo-people-transjax-en-us.js.v90822.14&j/photo-people- controller.js.v88235.14&j/input-hint.js.v86479.14&j/photo-comments-transjax-en-us.js.v92483.14&j/swfobject.js.v85491.14&j/photo- comments.js.v92853.14&j/photo-keyboard-shortcuts.js.v92892.14&j/box-host.js.v89305.14&j/photo-notes-transjax-en-us.js.v93010.14&j/string- filters.js.v91087.14&j/photo-notes-zeus.js.v93044.14&j/excanvas.js.v39120.14&j/bitmap-text-zeus.js.v87486.14&j/bitmap-type- silkscreen.js.v87486.14&j/photo-sidebar-transjax-en-us.js.v90794.14&stylesheet/stylesheet-min.js&j/photo-sidebar.js.v92813.14&j/photo-context- menu-transjax-en-us.js.v90793.14&j/photo-lightbox-transjax-en-us.js.v92868.14&j/ywa.js.v89879.14&j/photo-ywa- tracking.js.v92723.14&j/occult.js.v90963.14&j/yahoo-ult.js.v92052.14&j/photo-zeus.js.v93054.14&j/photo-people-list.js.v92992.14&j/photo-button- bar.js.v92891.14&j/photo-context-menu.js.v92706.14&j/photo-lightbox.js.v93054.14&j/insitu-transjax-en-us.js.v90792.14&j/insitu- zeus.js.v91793.14&j/photo-insitu.js.v91169.14&j/photo-group-invites-transjax-en-us.js.v90793.14&j/photo-group-invites.js.v91020.14&j/tagrs_zeus- transjax-en-us.js.v93081.14&j/tagrs_zeus.js.v93081.14&j/photo-sidebar-owner-transjax-en-us.js.v91626.14&j/photo-sidebar- owner.js.v92860.14&j/photo-sidebar-admin.js.v92656.14&j/photo-geolocation-transjax-en-us.js.v92191.14&j/photo- geolocation.js.v92894.14&j/personmenu-transjax-en-us.js.v90792.14&j/personmenu-zeus.js.v92796.14&j/share-menu-zeus-transjax-en- us.js.v92581.14&j/share-menu-zeus.js.v92971.14 2,792 characters
  16. Turns out that a small but vocal minority of users sit behind firewalls that restrict URL length
  17. The algorithm we settled on was string substitution:http://l.yimg.com/g/combo.gne?event/event-min.js&j/.H-.K.A.vNKE8&j/.CP-.U-.DE.A.vKEJx&j/.J_.BR_.CA.A.vKYke&j/.J_.DB.A.vPpBR&base/base- min.js&anim/anim-min.js&dump/dump-min.js&datatype/datatype-xml-min.js&substitute/substitute-min.js&queue-promote/queue-promote-min.js&io/io- min.js&json/json-min.js&j/.J_.DS.A.vPFJk&j/.CE-.K.A.vNy2Z&j/.B-.BY.A.vPADv&j/.H-.BY.A.vPrpi&j/.CC.A.vNiA4&j/.C-.BL.A.vPL3k&j/.CV- .CH.A.vPFSX&event-simulate/event-simulate-min.js&j/.B-.T-.CI-.C-.F.A.vPJPD&j/.CW-.CU.A.vKFrV&j/.Y-.C-.F.A.vNqG8&j/.Y.A.vLKiR&j/.B-.M-.C- .F.A.vPKTH&j/.B-.M.A.vPKTH&event/event-synthetic-min.js&j/.G-.BD.A.vNHSF&j/.G-.BO.A.vNwR2&j/.DL.A.vLPjB&j/.CX-.CY.A.vP8NB&j/.X-.W-.C- .F.A.vKPQ8&j/.X-.W-.D.A.vPzvZ&j/.Q-.BX-.K.A.vPvAp&node/node-event-simulate-min.js&j/.B-.BP.A.vNJaV&j/.CM/.BA_2.5.1-.D.A.vPzug&j/bo-.S-.C- .F.A.vNwWc&j/bo-.S-.D.A.vP5RV&cookie/cookie-min.js&j/.BZ-.D.A.vNstz&j/.B-.L-.C-.F.A.vNxPV&j/.B-.L-.BH.A.vMdVz&j/.CN-.DD.A.vLjHZ&j/.B-.O-.C- .F.A.vPpcH&j/.BM.A.vKPmx&j/.B-.O.A.vPHa6&j/.B-.Q-.BQ.A.vPBmT&j/.DR-.DG.A.vMLJp&j/.B-.BE-.C-.F.A.vPHP2&j/.U-.CG.A.vNFGP&j/.B-.BE- .D.A.vPFSX&j/.BV.A.vm3Ux&j/.Z-.DK-.D.A.vLQEc&j/.Z-.DJ-.BJ.A.vLQEc&j/.B-.I-.C-.F.A.vPKTH&stylesheet/stylesheet-min.js&j/.B-.I.A.vPLW4&j/.B-.H- .BB-.C-.F.A.vNwXV&j/.B-.N-.C-.F.A.vPADv&j/.CL.A.vN4N4&j/.B-.CL-.BW.A.vPwkv&j/.CF.A.vNC22&j/.CM-.DO.A.vPboB&j/.B-.D.A.vPGbc&j/.B-.L- .CZ.A.vPJpv&j/.B-.T-.CI.A.vPKDV&j/.B-.H-.BB.A.vPvQc&j/.B-.N.A.vPGbc&j/.B-.DM-.CO-.C-.F.A.vNwXV&j/.B-.DM-.CO.A.vNDHi&j/.BF_.D-.C- .F.A.vPGYK&j/.BF_.D.A.vPGYK&j/.B-.I-.CQ-.BK-.C-.F.A.vNwZD&j/.B-.I-.CQ-.BK.A.vLWQP&j/.B-.I-ad.E.A.vPukZ&j/.B-.R-.C-.F.A.vPfwg&j/.B- .R.A.vPBqk&j/.CB-.C-.F.A.vNwWc&j/.CB-.D.A.vPyvn&j/.DN-.BB-.D-.C-.F.A.vPs7F&j/.DN-.BB-.D.A.vPM5F 1,702 characters (40% smaller)
  18. This fixes the problem for almost all users… but Sonicwall turns out to have a limit below 1600 characters
  19. And then there was the XXX problem
  20. Third problem: convenience methods aren't free
  21. We noticed that on IE8/7, scrolling was very jerky
  22. The culprit: pollers in Y.delegate() and Y.on()
  23. We replaced both with Y.all().on(), and more customized solutions
  24. Convenience methods have a cost
  25. Forth problem: old metrics are meaningless
  26. What do we measure?
  27. We take timing data from 1% of all users
  28. rrdtool is fantastic for displaying timing data
  29. Browsers behave so differently that lumping them in together hides successes
  30. In closing…
  31. YUI3 is amazing
  32. If you can't have real performance, fake it
  33. Dig deeply into the JS library you use
  34. Measure the moments important to you
  35. And NEVER include XXX in a URL
  36. Thank you! ross@flickr.com Slides at: lanyrd.com/spdm Photo credits http://www.flickr.com/photos/markscott/1117392453/ http://www.flickr.com/photos/cybertoad/2102752062/ http://www.flickr.com/photos/whiteoakart/471538245/ http://www.flickr.com/photos/wwarby/3016567069/ http://www.flickr.com/photos/richoz/3791167457/ http://www.flickr.com/photos/lin/372711782/ http://www.flickr.com/photos/cdhc/274211112/ http://www.flickr.com/photos/ennor/353250218/ http://www.flickr.com/photos/jensaar/386863409/ http://www.flickr.com/photos/sterlic/4299631538/http://www.flic kr.com/photos/candyflossblackmarket/1139767634/ http://www.flickr.com/photos/bobcatrock/2653120251/ http://www.flickr.com/photos/jm2c/3677835375/ http://www.flickr.com/photos/kevinkyen/4721020630/ http://www.flickr.com/photos/sindykids/2666402195/ http://www.flickr.com/photos/simonhua/4696240744/ http://www.flickr.com/photos/inkiboo/203350186/ http://www.flickr.com/photos/sahlgoode/5012048467/ http://www.flickr.com/photos/sshb/3981130921/ http://www.flickr.com/photos/blueskin808/1422588776/ http://www.flickr.com/photos/roadsidepictures/1389358202/ http://www.flickr.com/photos/boliston/3958674786/ http://www.flickr.com/photos/httpwwwactionpixsmarukocom/4812 699768/

×