performance on the yahoo! homepage
DESCRIPTION
Overhauling one of the most visited web sites in the world is a major task, and add on top of it the pressure of keeping performance the same while adding a ton of new features, and you have quite a task. Learn how the Yahoo! homepage team achieved performance parity with the previous version even while adding a ton of new features.TRANSCRIPT
![Page 1: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/1.jpg)
Performance on thePerformance on the
Yahoo! HomepageYahoo! Homepage
Nicholas C. ZakasNicholas C. ZakasPrincipal Front End Engineer, Yahoo!Principal Front End Engineer, Yahoo!Velocity, June 24 2010Velocity, June 24 2010
flickr.com/photos/eyesplash/4268550236/
![Page 2: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/2.jpg)
(@slicknet on Twitter)
![Page 3: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/3.jpg)
Principal Front End Engineer
![Page 4: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/4.jpg)
Contributor
![Page 5: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/5.jpg)
Author
![Page 6: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/6.jpg)
The Challenge:Create a new Yahoo! homepage*
*add a ton of new functionality
**without sacrificing performance
![Page 7: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/7.jpg)
By the Numbers
345million
unique users per month worldwide
110million
unique users per month in United States
(no pressure)
![Page 8: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/8.jpg)
The Legacy
![Page 9: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/9.jpg)
1996
![Page 10: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/10.jpg)
1997
![Page 11: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/11.jpg)
1999
![Page 12: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/12.jpg)
2002
![Page 13: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/13.jpg)
2004
![Page 14: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/14.jpg)
2006
![Page 15: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/15.jpg)
Today
![Page 16: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/16.jpg)
We strapped ourselves in, believing we could
make the fastest Yahoo! homepage yet
flickr.com/photos/yodelanecdotal/3620023763/
![Page 17: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/17.jpg)
Performance is hardThe best features for users aren't always the fastest
flickr.com/photos/thetruthabout/2831498922/
![Page 18: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/18.jpg)
Content Optimization Enginedetermines which stories todisplay at request time
![Page 19: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/19.jpg)
Sites can be completelycustomized by the user
![Page 20: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/20.jpg)
Popular search topics aredetermined at request timeto display up-to-date info
![Page 21: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/21.jpg)
Random information aboutother parts of the Yahoo!network
![Page 22: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/22.jpg)
Apps provide more infoon-demand
![Page 23: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/23.jpg)
The Cost of Customization• Spriting is difficult
– Hard to know which images will be on the page together
• Limited image caching– With content constantly changing, getting
images into cache doesn't help much• A lot more JavaScript/CSS
– And very different, depending on how the user has customized the page
![Page 24: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/24.jpg)
Performance reboot
Many of the optimizations made on the previous homepage won't work
flickr.com/photos/thetorpedodog/458336570/
![Page 25: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/25.jpg)
Coming to peace with reality We can't optimize everything – so let's just focus on the parts we can
flickr.com/photos/hape_gera/2123257808/
![Page 26: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/26.jpg)
flickr.com/photos/hape_gera/2123257808/
Areas of Focus• Time to interactivity• Ajax Responsiveness• Perceived performance
![Page 27: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/27.jpg)
The time to interactivity is the time between the initial page
request and when the user can complete an action
![Page 28: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/28.jpg)
Time to Interactivity• For most pages, happens between
DOMContentLoaded and onload– Can actually happen earlier
• Links work, forms can be submitted even while the page is loading– As long as JavaScript isn't running
• Difficult to measure
![Page 29: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/29.jpg)
Net tab reveals some informationWhere DOMContentLoaded and onload occur
![Page 30: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/30.jpg)
YSlow reports onload timeUseful, but doesn't really determine time to interactivity
![Page 31: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/31.jpg)
Goal:Ensure interactivity by DOMContentLoaded
![Page 32: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/32.jpg)
Simple User Actions• Clicking a headline to read the story• Performing a search• Clicking on a favorite
Wait a second!You don't need JavaScript
for any of that!
flickr.com/photos/marcoarment/2035853550/
![Page 33: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/33.jpg)
Progressive Enhancement FTW!The more tasks that don't require JavaScript,
the faster the user can complete an action
alistapart.com/articles/understandingprogressiveenhancement
![Page 34: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/34.jpg)
The page is very functionaleven without JavaScript
![Page 35: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/35.jpg)
Not relying on JavaScript for everything allows us an
opportunity to deliver what appears to be a faster experience
![Page 36: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/36.jpg)
JavaScriptLoading onto the page without pain
![Page 37: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/37.jpg)
Traditional thinking was put scripts at the bottom
![Page 38: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/38.jpg)
<html><head> <!-- head contents --></head><body> <!-- body contents --> <script type="text/javascript" src="yourfile.js"> </script> <script type="text/javascript" src="yourfile2.js"> </script></body></html>
![Page 39: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/39.jpg)
Our results were upsetting
Putting scripts at the bottom actually caused other problems
flickr.com/photos/kartik_m/2724121901/
![Page 40: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/40.jpg)
flickr.com/photos/kartik_m/2724121901/
Results• Page would fully render, but be frozen
– User can't interact while JavaScript is being fetched/parsed/executed
• Delayed onload to after 5s on fast connection• Time to interactivity tied to onload• Experience was especially bad over slower
connections– Page was unresponsive for 30s or more
![Page 41: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/41.jpg)
In order to fix things, we had to get lazy
flickr.com/photos/19613690@N05/3687563687/
![Page 42: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/42.jpg)
stevesouders.com/blog/2009/04/27/loading-scripts-without-blocking/
![Page 43: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/43.jpg)
nczonline.net/blog/2009/07/28/the-best-way-to-load-external-javascript/
![Page 44: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/44.jpg)
function loadScript(url, callback){
var script = document.createElement("script") script.type = "text/javascript";
if (script.readyState){ //IE script.onreadystatechange = function(){ if (script.readyState == "loaded" || script.readyState == "complete"){ script.onreadystatechange = null; callback(); } }; } else { //Others script.onload = function(){ callback(); }; }
script.src = url; document.getElementsByTagName("head")[0].appendChild(script);}
Dynamically loaded scriptsdon't block page load
![Page 45: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/45.jpg)
<html><head> <!-- head contents --></head><body> <!-- body contents --> <script type="text/javascript" src="smallfile.js"> </script> <script type="text/javascript"> loadScript(filename, function(){ //initialization }); </script></body></html>
![Page 46: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/46.jpg)
Y.Get.script(YUI.presentation.lazyScriptList, { onSuccess: function()
{ Y.use("*"); Y.ModulePlatform.init(Y.dali.config, true); }});
![Page 47: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/47.jpg)
Everything else
First script file
![Page 48: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/48.jpg)
flic
kr.c
om/p
hoto
s/n
atea
ndm
iran
da/2
62
539
96
53/
Results• Page is interactive as
soon as each section is rendered
• Reduced onload time to ~2.5s on fast connections
• Slow connection experience vastly improved
![Page 49: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/49.jpg)
JavaScript Loads• Small amount on page load• Larger amount loaded in non-blocking manner
– Everything necessary for core JavaScript interactivity
• Ajax responses can specify more JavaScript is needed to handle the response– True, on-demand loading
![Page 50: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/50.jpg)
Page FlushingGetting data out to the browser fast
![Page 51: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/51.jpg)
Traditional thinking is to flush after <head>
![Page 52: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/52.jpg)
Flushing after <head> ensures CSS starts to download as quickly as possible
But the user still sees a blank screen until the rest of the HTML is rendered to the browser
Solution: flush after major sections of the page have been output
flickr.com/photos/conskeptical/354951028/
![Page 53: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/53.jpg)
<div class="doc"> <div class="hd">
</div> <!-- flushing here does nothing --> <div class=”bd”>
</div></div>
The browser won't render a block-level element inside of <body>until the closing tag has been received
![Page 54: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/54.jpg)
<div class="hd">
</div><!-- flushing here causes the head to render --><div class=”bd”>
</div>
Removing page-level wrapper <div> allows the head torender as quickly as possible
![Page 55: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/55.jpg)
Flush
Flush
![Page 56: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/56.jpg)
![Page 57: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/57.jpg)
![Page 58: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/58.jpg)
![Page 59: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/59.jpg)
(Actually, we flush a bunch of times as the page is output)
Even when the browser can't render yet, it can still start to download other resources such as images
![Page 60: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/60.jpg)
flickr.com/photos/hape_gera/2123257808/
Areas of Focus• Time to interactivity• Ajax Responsiveness• Perceived performance
![Page 61: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/61.jpg)
The biggest area of concern regarding Ajax performance was around the apps. For our very first test, it sometimes took as long as 7 seconds to load a single app.
![Page 62: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/62.jpg)
What exactly is taking 7 seconds?The measurement itself was a huge black box – before doing anything,
we had to figure out exactly what was happening in that time
start stop
![Page 63: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/63.jpg)
Roundtrip TimeThe first step is the amount of time between when the browser sends
the request and the time it receives the response
start stoproundtrip
![Page 64: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/64.jpg)
Parse TimeNext, the JSON response returned from the server has to be parsed
start stoproundtrip parse
![Page 65: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/65.jpg)
JavaScript/CSS Download TimeEach response can indicate it needs more JavaScript/CSS before the
content can be used
start stoproundtrip parse download
![Page 66: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/66.jpg)
Render TimeThe amount of time it takes to actually change the display via innerHTML
start stoproundtrip parse download render
![Page 67: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/67.jpg)
Where We Started
![Page 68: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/68.jpg)
Fixing Roundtrip TimeWhat's taking so damn long?
![Page 69: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/69.jpg)
The right-side ads were a roundtrip issueThe server-side ad call took extra time plus the ad markup represented
50-60% of the returned markup
![Page 70: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/70.jpg)
“Fixing” the adEntire right column now renders in an iframe. This defers the ad call
until after the app has been loaded in the browser, saving bothserver time for app rendering and bytes in the response.
![Page 71: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/71.jpg)
Fixing Parse TimeWhat's taking so freakin' long??
![Page 72: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/72.jpg)
![Page 73: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/73.jpg)
{ "msg": "Hello world!", "day": 6, "found": true,}
JSON is super-efficient for transporting numbers, Booleans, simple strings, objects, and arrays
![Page 74: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/74.jpg)
{ "html":"<div id=\"default-p_26583360\" class=\"mod view_default\"> <div
id=\"default-p_26583360-bd\" class=\"bd type_pacontainer type_pacontainer_default\"><div class=\" pa-app-col1 y-pa-ln-open-dk \"><div class=\"hd pa-app-hd\"><h2 class=\"x-large\"><a href=\"_ylt=ArPtckll5ytFOZy32_Tg07qbvZx4\/SIG=10u61l0b2\/**http%3A\/\/finance.yahoo.com\/\">Finance<\/a><\/h2> \t<div class=\"pa-menu-options\">\n \t\t<a role=\"button\" class=\"pa-menu-optionsbtn small pa-app-header\" href=\"#\" data-b=\"_ylt=AhzOmRGiUKjiPuGRaW8LrGabvZx4\">Options<span class=\"y-fp-pg-controls arrow\"><\/span><\/a>\n\t\t\t\t<ul id=\"p_26583360-settings-menu\" class=\"y-menu medium\">\n\t\t\t\t\t\n\t\t\t\t\t<li><a href=\"_ylt=AtqN.M70D5mHiPrcLvHF9vibvZx4\/SIG=1254msah3\/**http%3A\/\/help.yahoo.com\/l\/us\/yahoo\/homepage\/homepage\/myapps\/stocks\" class=\"y-link-1 help-option\"><span class=\"y-fp-pg-controls\"><\/span>Help<\/a><\/li>\n\t\t\t\t\t\n\t\t\t <\/ul>\n\t\t <\/div><\/div><div id=\"default-u_93109\" class=\"mod view_default\"> <div id=\"default-u_93109-bd\" class=\"bd type_finance type_finance_default\"> <div class=\"finance-nav clearfix\">\n <a href=\"_ylt=AvKZuIwh_mvmWInFE6c7Zc.bvZx4\/SIG=10u61l0b2\/**http%3A\/\/finance.yahoo.com\/\" class=\"small text-color goto-link\"><span class=\"goto\">Go to:<\/span> <span class=\"property\"><img src=\"http:\/\/d.yimg.com\/a\/i\/ww\/met\/mod\/ybang_22_061509.png\" alt=\"Finance\"> Finance<\/span><\/a>\n <ul class=\"y-tablist med-small\" id=\"u_93109-tabs\"> <li class=\"selected\"><a href=\"#\" data-b=\"_ylt=AhW8HKKgyZxBNcux07hCVxGbvZx4\">Overview<\/a><\/li> <li class=\"\"><a href=\"#\" data-b=\"_ylt=AuEzZyDTq.4N_vTGBXpu2VubvZx4\">My Portfolios<\/a><\/li> <\/ul>\n <\/div>\n <div class=\"y-tabpanels y-tp-default\">\n <div class=\"tabpanel selected\">\n <div class=\"menu menu-empty y-glbl-mod-grad\"><\/div>\n <div class=\"market-overview\">\n <div class=\"holder\">\n <p class=\"x-small date text-color\">Sat, Jun 12, 2010 10:10am PDT<\/p>\n <table class=\"index-update\">\n <tbody>\n <tr class=\"med-large\">\n <td class=\"hide-contents hide-textindent\"> <\/td>\n"
}
Very inefficient for large HTML stringsEscapement adds a lot of extra bytes
![Page 75: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/75.jpg)
The larger the JSON string, the longer it took to parse
Keep in mind there was no native browser JSON parsing when we began testing the new page
The regular expression validation in the YUI JSON utility (based on json2.js) could take up to 40% of the parse time
![Page 76: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/76.jpg)
Shrinking the size of the HTML by deferring the ad helped
But we still wanted to see if we could eek out better gains
![Page 77: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/77.jpg)
[{ "msg": "Hello world!", "day": 6, "found": true,}]=====<div class="foo"><a href="http://www.yahoo.com">Yahoo!
</a></div>
We experimented with an alternate response format where meta data was in JSON form but HTML was included afterward in plain
text
![Page 78: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/78.jpg)
Results were good
But then native JSON parsing hit and a lot of problems went away
flickr.com/photos/mattymatt/3017263513/
![Page 79: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/79.jpg)
Fixing Download TimeWhat's taking so (*&#$Q@! long???
![Page 80: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/80.jpg)
On-demand JavaScript/CSS downloading hurt app loading
timeIntended to decrease page load time, and did – but left us with this
side effect
![Page 81: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/81.jpg)
Waiting until the user takes an action ensures paying the cost of download
What if you knew which apps the user was going to use?
Solution: predictive fetch of JavaScript/CSS before you need it
flickr.com/photos/mcgraths/3248483447/
![Page 82: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/82.jpg)
After page load, we start todownload JavaScript/CSS forthe apps on the page
![Page 83: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/83.jpg)
After onload
onload
![Page 84: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/84.jpg)
Fixing Render TimeWTF is taking so (*&#$Q@! long?!?!?
![Page 85: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/85.jpg)
Actually, render time was okay
![Page 86: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/86.jpg)
Results
![Page 87: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/87.jpg)
flickr.com/photos/hape_gera/2123257808/
Areas of Focus• Time to interactivity• Ajax Responsiveness• Perceived performance
![Page 88: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/88.jpg)
Don't underestimate the power of perception
![Page 89: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/89.jpg)
Initially, the new page was actually slower to load than the
previous
To be expected – a lot more JavaScript and CSS
![Page 90: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/90.jpg)
Blank space is badMakes it seem like nothing is happening
![Page 91: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/91.jpg)
Adjusting Perception• Frequent page flushing
– Progressive rendering avoids a lot of blank space
• JavaScript at the bottom– Ensure it doesn't block rendering
• Lazy load JavaScript– Decrease time to interactivity
![Page 92: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/92.jpg)
Initially, apps werecompletely blank whileloading (seemed slow)
![Page 93: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/93.jpg)
We changed it to a pseudo-loaded state, which madeloading seem faster
![Page 94: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/94.jpg)
In the end, user testing showed that perceived performance of the new page
was the same as on the old page
![Page 95: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/95.jpg)
Wrap Up
![Page 96: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/96.jpg)
Lessons Learned• Time to interactivity is a big deal• Progressive enhancement creates a better
experience– Allows for delayed load of JavaScript
• Load as much JavaScript as possible in a non-blocking manner
• Ajax performance is a macro measurement– Get more insight by looking at the parts
• Perceived performance is important
![Page 97: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/97.jpg)
flickr.com/photos/ficken/1813744832/
Achievements• Reduced time to onload from ~5s to ~2.5s
– Actually better than previous version• Very short time to interactivity• Reduced time to open apps from ~7s to ~2s• Maintained perception of speed from previous
version
![Page 98: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/98.jpg)
Questions?
![Page 99: Performance on the Yahoo! Homepage](https://reader030.vdocument.in/reader030/viewer/2022020122/54b783e14a7959a8698b4643/html5/thumbnails/99.jpg)
Etcetera• My blog: www.nczonline.net• My email: [email protected]• Twitter: @slicknet