Porting Flickr to YUI3

Porting Flickr to YUI 3Ross Harmes

Porting Flickr to YUI 3Lessons in Performance
Ross Harmes

A few months ago we launched a new photo page…

We decided to completely demolish the old page and rebuild with YUI3

Using YUI3 was a delight…

…but there were a few small problems

First problem: deferred JS

Slow page:
No JS:

One of the first perf. recommendations is to move all the JS to the bottom of the page

This means UI elements that need JS to work will fallback to the non-JS case until the scripts load

Our solution: Action Queueing

This isn't making the JS load faster

Getting creative with the loading indicators helps

Second problem: long combo-handler URLs

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

Turns out that a small but vocal minority of users sit behind firewalls that restrict URL length

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)

This fixes the problem for almost all users… but Sonicwall turns out to have a limit below 1600 characters

And then there was the XXX problem

Third problem: convenience methods aren't free

We noticed that on IE8/7, scrolling was very jerky

The culprit: pollers in Y.delegate() and Y.on()

We replaced both with Y.all().on(),and more customized solutions

Convenience methods have a cost

Forth problem:old metrics are meaningless

What do we measure?

We take timing data from 1% of all users

rrdtool is fantastic for displaying timing data

Browsers behave so differently that lumping them in together hides successes

In closing…

YUI3 is amazing

If you can't have real performance, fake it

Dig deeply into the JS library you use

Measure the moments important to you

And NEVER include XXX in a URL

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.flickr.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/4812699768/

Porting Flickr to YUI3

by rharmes

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 646

Statistics