SlideShare a Scribd company logo
1 of 99
Download to read offline
flickr.com/photos/eyesplash/4268550236/




                    Performance on the

           Yahoo! Homepage


Nicholas C. Zakas
Principal Front End Engineer, Yahoo!
Velocity, June 24 2010
(@slicknet on Twitter)
Principal Front End Engineer
Contributor
Author
The Challenge:
Create a new Yahoo! homepage*


     *add a ton of new functionality
    **without sacrificing performance
By the Numbers



     345                           110
     million                       million
unique users per month       unique users per month
      worldwide                  in United States


                   (no pressure)
The Legacy
1996
1997
1999
2002
2004
2006
Today
flickr.com/photos/yodelanecdotal/3620023763/




We strapped ourselves in, believing we could
  make the fastest Yahoo! homepage yet
Performance is hard
The best features for users aren't always the fastest




                                 flickr.com/photos/thetruthabout/2831498922/
Content Optimization Engine
determines which stories to
display at request time
Sites can be completely
customized by the user
Popular search topics are
determined at request time
to display up-to-date info
Random information about
other parts of the Yahoo!
network
Apps provide more info
on-demand
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
flickr.com/photos/thetorpedodog/458336570/




                  Performance reboot
Many of the optimizations made on the previous homepage won't work
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/
Areas of Focus
• Time to interactivity
• Ajax Responsiveness
• Perceived performance




                          flickr.com/photos/hape_gera/2123257808/
The time to interactivity is the
 time between the initial page
request and when the user can
      complete an action
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
Net tab reveals some information
     Where DOMContentLoaded and onload occur
YSlow reports onload time
Useful, but doesn't really determine time to interactivity
Goal:
Ensure interactivity by
 DOMContentLoaded
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/
alistapart.com/articles/understandingprogressiveenhancement




Progressive Enhancement FTW!
    The more tasks that don't require JavaScript,
     the faster the user can complete an action
The page is very functional
even without JavaScript
Not relying on JavaScript for
    everything allows us an
  opportunity to deliver what
appears to be a faster experience
JavaScript
Loading onto the page without pain
Traditional thinking was put scripts at the bottom
<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>
flickr.com/photos/kartik_m/2724121901/




        Our results were upsetting
Putting scripts at the bottom actually caused other problems
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
flickr.com/photos/19613690@N05/3687563687/




In order to fix things, we had to get lazy
stevesouders.com/blog/2009/04/27/loading-scripts-without-blocking/
nczonline.net/blog/2009/07/28/the-best-way-to-load-external-javascript/
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();
        };                                 Dynamically loaded scripts
    }                                      don't block page load

    script.src = url;
    document.getElementsByTagName("head")[0].appendChild(script);
}
<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>
Y.Get.script(YUI.presentation.lazyScriptList,
    { onSuccess: function()
    {
        Y.use("*");
        Y.ModulePlatform.init(Y.dali.config, true);
    }});
First script file




      Everything else
flickr.com/photos/nateandmiranda/2625399653/
       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
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 Flushing
Getting data out to the browser fast
Traditional thinking is to flush after <head>
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/
<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
<div class="hd">

</div>
<!-- flushing here causes the head to render -->
<div class=”bd”>

</div>




   Removing page-level wrapper <div> allows the head to
              render as quickly as possible
Flush




Flush
Performance on the Yahoo! Homepage
Performance on the Yahoo! Homepage
Performance on the Yahoo! Homepage
(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
Areas of Focus
• Time to interactivity
• Ajax Responsiveness
• Perceived performance




                          flickr.com/photos/hape_gera/2123257808/
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.
start                                                        stop




        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
roundtrip
start                                                       stop




                     Roundtrip Time
The first step is the amount of time between when the browser sends
           the request and the time it receives the response
roundtrip      parse
start                                                      stop




                        Parse Time
Next, the JSON response returned from the server has to be parsed
roundtrip      parse       download
start                                                       stop




            JavaScript/CSS Download Time
Each response can indicate it needs more JavaScript/CSS before the
                       content can be used
roundtrip        parse       download         render
 start                                                          stop




                          Render Time
The amount of time it takes to actually change the display via innerHTML
Where We Started
Fixing Roundtrip Time
   What's taking so damn long?
The right-side ads were a roundtrip issue
The server-side ad call took extra time plus the ad markup represented
                   50-60% of the returned markup
“Fixing” the ad
Entire right column now renders in an iframe. This defers the ad call
  until after the app has been loaded in the browser, saving both
      server time for app rendering and bytes in the response.
Fixing Parse Time
 What's taking so freakin' long??
Performance on the Yahoo! Homepage
{
      "msg": "Hello world!",
      "day": 6,
      "found": true,
 }




JSON is super-efficient for transporting numbers, Booleans, simple
                    strings, objects, and arrays
{
    "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         tt<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>ntttt<ul id="p_26583360-settings-menu"
       class="y-menu medium">ntttttnttttt<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>ntttttnttt      </ul>ntt
       </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

      Very inefficient for large HTML strings
       10:10am PDT</p>n   <table class="index-update">n
       class="med-large">n
       textindent">&nbsp;</td>n"
                                                                 <tbody>n
                                   <td class="hide-contents hide-
                                                                                <tr


}
                     Escapement adds a lot of extra bytes
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
Shrinking the size of the HTML by
     deferring the ad helped
  But we still wanted to see if we could eek out better gains
[{
      "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
flickr.com/photos/mattymatt/3017263513/




                 Results were good
But then native JSON parsing hit and a lot of problems went away
Fixing Download Time
  What's taking so (*&#$Q@! long???
On-demand JavaScript/CSS
   downloading hurt app loading
              time
Intended to decrease page load time, and did – but left us with this
                           side effect
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/
After page load, we start to
download JavaScript/CSS for
the apps on the page
After onload




           onload
Fixing Render Time
WTF is taking so (*&#$Q@! long?!?!?
Actually, render time was okay
Results
Areas of Focus
• Time to interactivity
• Ajax Responsiveness
• Perceived performance




                          flickr.com/photos/hape_gera/2123257808/
Don't underestimate the power
        of perception
Initially, the new page was
actually slower to load than the
             previous
    To be expected – a lot more JavaScript and CSS
Blank space is bad
Makes it seem like nothing is happening
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
Initially, apps were
completely blank while
loading (seemed slow)
We changed it to a pseudo-
loaded state, which made
loading seem faster
In the end, user testing showed that
perceived performance of the new page
   was the same as on the old page
Wrap Up
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
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




flickr.com/photos/ficken/1813744832/
Questions?
Etcetera
• My blog:    www.nczonline.net
• My email:   nzakas@yahoo-inc.com
• Twitter:    @slicknet

More Related Content

What's hot

High Performance JavaScript (Amazon DevCon 2011)
High Performance JavaScript (Amazon DevCon 2011)High Performance JavaScript (Amazon DevCon 2011)
High Performance JavaScript (Amazon DevCon 2011)Nicholas Zakas
 
High Performance JavaScript - jQuery Conference SF Bay Area 2010
High Performance JavaScript - jQuery Conference SF Bay Area 2010High Performance JavaScript - jQuery Conference SF Bay Area 2010
High Performance JavaScript - jQuery Conference SF Bay Area 2010Nicholas Zakas
 
Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)Nicholas Zakas
 
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom MenaceBrowser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom MenaceNicholas Zakas
 
jQuery 1.9 and 2.0 - Present and Future
jQuery 1.9 and 2.0 - Present and FuturejQuery 1.9 and 2.0 - Present and Future
jQuery 1.9 and 2.0 - Present and FutureRichard Worth
 
Mobile Web Speed Bumps
Mobile Web Speed BumpsMobile Web Speed Bumps
Mobile Web Speed BumpsNicholas Zakas
 
High Performance Snippets
High Performance SnippetsHigh Performance Snippets
High Performance SnippetsSteve Souders
 
High Performance JavaScript (CapitolJS 2011)
High Performance JavaScript (CapitolJS 2011)High Performance JavaScript (CapitolJS 2011)
High Performance JavaScript (CapitolJS 2011)Nicholas Zakas
 
Building performance into the new yahoo homepage presentation
Building performance into the new yahoo  homepage presentationBuilding performance into the new yahoo  homepage presentation
Building performance into the new yahoo homepage presentationmasudakram
 
Hyperlight Websites - Chris Zacharias
Hyperlight Websites - Chris ZachariasHyperlight Websites - Chris Zacharias
Hyperlight Websites - Chris ZachariasChristopher Zacharias
 
High Performance JavaScript 2011
High Performance JavaScript 2011High Performance JavaScript 2011
High Performance JavaScript 2011Nicholas Zakas
 
Testing Mobile JavaScript
Testing Mobile JavaScriptTesting Mobile JavaScript
Testing Mobile JavaScriptjeresig
 
Learning from the Best jQuery Plugins
Learning from the Best jQuery PluginsLearning from the Best jQuery Plugins
Learning from the Best jQuery PluginsMarc Grabanski
 
Web versus Native: round 1!
Web versus Native: round 1!Web versus Native: round 1!
Web versus Native: round 1!Chris Mills
 
Empowering the "mobile web"
Empowering the "mobile web"Empowering the "mobile web"
Empowering the "mobile web"Chris Mills
 
APIs, now and in the future
APIs, now and in the futureAPIs, now and in the future
APIs, now and in the futureChris Mills
 
APIs for modern web apps
APIs for modern web appsAPIs for modern web apps
APIs for modern web appsChris Mills
 
Forensic Tools for In-Depth Performance Investigations
Forensic Tools for In-Depth Performance InvestigationsForensic Tools for In-Depth Performance Investigations
Forensic Tools for In-Depth Performance InvestigationsNicholas Jansma
 

What's hot (20)

High Performance JavaScript (Amazon DevCon 2011)
High Performance JavaScript (Amazon DevCon 2011)High Performance JavaScript (Amazon DevCon 2011)
High Performance JavaScript (Amazon DevCon 2011)
 
High Performance JavaScript - jQuery Conference SF Bay Area 2010
High Performance JavaScript - jQuery Conference SF Bay Area 2010High Performance JavaScript - jQuery Conference SF Bay Area 2010
High Performance JavaScript - jQuery Conference SF Bay Area 2010
 
Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)
 
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom MenaceBrowser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
 
jQuery 1.9 and 2.0 - Present and Future
jQuery 1.9 and 2.0 - Present and FuturejQuery 1.9 and 2.0 - Present and Future
jQuery 1.9 and 2.0 - Present and Future
 
Mobile Web Speed Bumps
Mobile Web Speed BumpsMobile Web Speed Bumps
Mobile Web Speed Bumps
 
High Performance Snippets
High Performance SnippetsHigh Performance Snippets
High Performance Snippets
 
High Performance JavaScript (CapitolJS 2011)
High Performance JavaScript (CapitolJS 2011)High Performance JavaScript (CapitolJS 2011)
High Performance JavaScript (CapitolJS 2011)
 
Building performance into the new yahoo homepage presentation
Building performance into the new yahoo  homepage presentationBuilding performance into the new yahoo  homepage presentation
Building performance into the new yahoo homepage presentation
 
Hyperlight Websites - Chris Zacharias
Hyperlight Websites - Chris ZachariasHyperlight Websites - Chris Zacharias
Hyperlight Websites - Chris Zacharias
 
High Performance JavaScript 2011
High Performance JavaScript 2011High Performance JavaScript 2011
High Performance JavaScript 2011
 
Testing Mobile JavaScript
Testing Mobile JavaScriptTesting Mobile JavaScript
Testing Mobile JavaScript
 
Cache is King
Cache is KingCache is King
Cache is King
 
Learning from the Best jQuery Plugins
Learning from the Best jQuery PluginsLearning from the Best jQuery Plugins
Learning from the Best jQuery Plugins
 
Web versus Native: round 1!
Web versus Native: round 1!Web versus Native: round 1!
Web versus Native: round 1!
 
Empowering the "mobile web"
Empowering the "mobile web"Empowering the "mobile web"
Empowering the "mobile web"
 
APIs, now and in the future
APIs, now and in the futureAPIs, now and in the future
APIs, now and in the future
 
Frontend SPOF
Frontend SPOFFrontend SPOF
Frontend SPOF
 
APIs for modern web apps
APIs for modern web appsAPIs for modern web apps
APIs for modern web apps
 
Forensic Tools for In-Depth Performance Investigations
Forensic Tools for In-Depth Performance InvestigationsForensic Tools for In-Depth Performance Investigations
Forensic Tools for In-Depth Performance Investigations
 

Similar to Performance on the Yahoo! Homepage

Developing High Performance Web Apps - CodeMash 2011
Developing High Performance Web Apps - CodeMash 2011Developing High Performance Web Apps - CodeMash 2011
Developing High Performance Web Apps - CodeMash 2011Timothy Fisher
 
Developing High Performance Web Apps
Developing High Performance Web AppsDeveloping High Performance Web Apps
Developing High Performance Web AppsTimothy Fisher
 
Cvcc performance tuning
Cvcc performance tuningCvcc performance tuning
Cvcc performance tuningJohn McCaffrey
 
Cache is keeping you from reaching the full potential as a developer (word ca...
Cache is keeping you from reaching the full potential as a developer (word ca...Cache is keeping you from reaching the full potential as a developer (word ca...
Cache is keeping you from reaching the full potential as a developer (word ca...Thomas Audunhus
 
Enough with the javas cript already! de Nicholas Zakas
Enough with the javas cript already! de Nicholas ZakasEnough with the javas cript already! de Nicholas Zakas
Enough with the javas cript already! de Nicholas ZakasKubide
 
Week 05 Web, App and Javascript_Brandon, S.H. Wu
Week 05 Web, App and Javascript_Brandon, S.H. WuWeek 05 Web, App and Javascript_Brandon, S.H. Wu
Week 05 Web, App and Javascript_Brandon, S.H. WuAppUniverz Org
 
Optimising Web Application Frontend
Optimising Web Application FrontendOptimising Web Application Frontend
Optimising Web Application Frontendtkramar
 
JavaScript Performance Patterns
JavaScript Performance PatternsJavaScript Performance Patterns
JavaScript Performance PatternsStoyan Stefanov
 
From Zero to Performance Hero in Minutes - Agile Testing Days 2014 Potsdam
From Zero to Performance Hero in Minutes - Agile Testing Days 2014 PotsdamFrom Zero to Performance Hero in Minutes - Agile Testing Days 2014 Potsdam
From Zero to Performance Hero in Minutes - Agile Testing Days 2014 PotsdamAndreas Grabner
 
Optimization of modern web applications
Optimization of modern web applicationsOptimization of modern web applications
Optimization of modern web applicationsEugene Lazutkin
 
Instant and offline apps with Service Worker
Instant and offline apps with Service WorkerInstant and offline apps with Service Worker
Instant and offline apps with Service WorkerChang W. Doh
 
Building high performance web apps.
Building high performance web apps.Building high performance web apps.
Building high performance web apps.Arshak Movsisyan
 
jQuery Conference San Diego 2014 - Web Performance
jQuery Conference San Diego 2014 - Web PerformancejQuery Conference San Diego 2014 - Web Performance
jQuery Conference San Diego 2014 - Web Performancedmethvin
 
Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)
Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)
Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)Adam Dunford
 
SearchLove San Diego 2018 | Mat Clayton | Site Speed for Digital Marketers
SearchLove San Diego 2018 | Mat Clayton | Site Speed for Digital MarketersSearchLove San Diego 2018 | Mat Clayton | Site Speed for Digital Marketers
SearchLove San Diego 2018 | Mat Clayton | Site Speed for Digital MarketersDistilled
 
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)Steve Souders
 
Changhao jiang facebook
Changhao jiang facebookChanghao jiang facebook
Changhao jiang facebookzipeng zhang
 
Performance and UX
Performance and UXPerformance and UX
Performance and UXPeter Rozek
 
Windy cityrails performance_tuning
Windy cityrails performance_tuningWindy cityrails performance_tuning
Windy cityrails performance_tuningJohn McCaffrey
 

Similar to Performance on the Yahoo! Homepage (20)

Developing High Performance Web Apps - CodeMash 2011
Developing High Performance Web Apps - CodeMash 2011Developing High Performance Web Apps - CodeMash 2011
Developing High Performance Web Apps - CodeMash 2011
 
Developing High Performance Web Apps
Developing High Performance Web AppsDeveloping High Performance Web Apps
Developing High Performance Web Apps
 
Cvcc performance tuning
Cvcc performance tuningCvcc performance tuning
Cvcc performance tuning
 
Cache is keeping you from reaching the full potential as a developer (word ca...
Cache is keeping you from reaching the full potential as a developer (word ca...Cache is keeping you from reaching the full potential as a developer (word ca...
Cache is keeping you from reaching the full potential as a developer (word ca...
 
Enough with the javas cript already! de Nicholas Zakas
Enough with the javas cript already! de Nicholas ZakasEnough with the javas cript already! de Nicholas Zakas
Enough with the javas cript already! de Nicholas Zakas
 
Week 05 Web, App and Javascript_Brandon, S.H. Wu
Week 05 Web, App and Javascript_Brandon, S.H. WuWeek 05 Web, App and Javascript_Brandon, S.H. Wu
Week 05 Web, App and Javascript_Brandon, S.H. Wu
 
Optimising Web Application Frontend
Optimising Web Application FrontendOptimising Web Application Frontend
Optimising Web Application Frontend
 
JavaScript Performance Patterns
JavaScript Performance PatternsJavaScript Performance Patterns
JavaScript Performance Patterns
 
From Zero to Performance Hero in Minutes - Agile Testing Days 2014 Potsdam
From Zero to Performance Hero in Minutes - Agile Testing Days 2014 PotsdamFrom Zero to Performance Hero in Minutes - Agile Testing Days 2014 Potsdam
From Zero to Performance Hero in Minutes - Agile Testing Days 2014 Potsdam
 
Optimization of modern web applications
Optimization of modern web applicationsOptimization of modern web applications
Optimization of modern web applications
 
Instant and offline apps with Service Worker
Instant and offline apps with Service WorkerInstant and offline apps with Service Worker
Instant and offline apps with Service Worker
 
Building high performance web apps.
Building high performance web apps.Building high performance web apps.
Building high performance web apps.
 
jQuery Conference San Diego 2014 - Web Performance
jQuery Conference San Diego 2014 - Web PerformancejQuery Conference San Diego 2014 - Web Performance
jQuery Conference San Diego 2014 - Web Performance
 
Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)
Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)
Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)
 
SearchLove San Diego 2018 | Mat Clayton | Site Speed for Digital Marketers
SearchLove San Diego 2018 | Mat Clayton | Site Speed for Digital MarketersSearchLove San Diego 2018 | Mat Clayton | Site Speed for Digital Marketers
SearchLove San Diego 2018 | Mat Clayton | Site Speed for Digital Marketers
 
Salesforce Performance hacks - Client Side
Salesforce Performance hacks - Client SideSalesforce Performance hacks - Client Side
Salesforce Performance hacks - Client Side
 
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
 
Changhao jiang facebook
Changhao jiang facebookChanghao jiang facebook
Changhao jiang facebook
 
Performance and UX
Performance and UXPerformance and UX
Performance and UX
 
Windy cityrails performance_tuning
Windy cityrails performance_tuningWindy cityrails performance_tuning
Windy cityrails performance_tuning
 

More from Nicholas Zakas

JavaScript APIs you’ve never heard of (and some you have)
JavaScript APIs you’ve never heard of (and some you have)JavaScript APIs you’ve never heard of (and some you have)
JavaScript APIs you’ve never heard of (and some you have)Nicholas Zakas
 
Scalable JavaScript Application Architecture 2012
Scalable JavaScript Application Architecture 2012Scalable JavaScript Application Architecture 2012
Scalable JavaScript Application Architecture 2012Nicholas Zakas
 
Maintainable JavaScript 2012
Maintainable JavaScript 2012Maintainable JavaScript 2012
Maintainable JavaScript 2012Nicholas Zakas
 
Maintainable JavaScript 2011
Maintainable JavaScript 2011Maintainable JavaScript 2011
Maintainable JavaScript 2011Nicholas Zakas
 
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)Nicholas Zakas
 
Scalable JavaScript Application Architecture
Scalable JavaScript Application ArchitectureScalable JavaScript Application Architecture
Scalable JavaScript Application ArchitectureNicholas Zakas
 
Extreme JavaScript Compression With YUI Compressor
Extreme JavaScript Compression With YUI CompressorExtreme JavaScript Compression With YUI Compressor
Extreme JavaScript Compression With YUI CompressorNicholas Zakas
 
Writing Efficient JavaScript
Writing Efficient JavaScriptWriting Efficient JavaScript
Writing Efficient JavaScriptNicholas Zakas
 
Speed Up Your JavaScript
Speed Up Your JavaScriptSpeed Up Your JavaScript
Speed Up Your JavaScriptNicholas Zakas
 
Maintainable JavaScript
Maintainable JavaScriptMaintainable JavaScript
Maintainable JavaScriptNicholas Zakas
 
JavaScript Variable Performance
JavaScript Variable PerformanceJavaScript Variable Performance
JavaScript Variable PerformanceNicholas Zakas
 
The New Yahoo! Homepage and YUI 3
The New Yahoo! Homepage and YUI 3The New Yahoo! Homepage and YUI 3
The New Yahoo! Homepage and YUI 3Nicholas Zakas
 
Test Driven Development With YUI Test (Ajax Experience 2008)
Test Driven Development With YUI Test (Ajax Experience 2008)Test Driven Development With YUI Test (Ajax Experience 2008)
Test Driven Development With YUI Test (Ajax Experience 2008)Nicholas Zakas
 
Enterprise JavaScript Error Handling (Ajax Experience 2008)
Enterprise JavaScript Error Handling (Ajax Experience 2008)Enterprise JavaScript Error Handling (Ajax Experience 2008)
Enterprise JavaScript Error Handling (Ajax Experience 2008)Nicholas Zakas
 

More from Nicholas Zakas (15)

The Pointerless Web
The Pointerless WebThe Pointerless Web
The Pointerless Web
 
JavaScript APIs you’ve never heard of (and some you have)
JavaScript APIs you’ve never heard of (and some you have)JavaScript APIs you’ve never heard of (and some you have)
JavaScript APIs you’ve never heard of (and some you have)
 
Scalable JavaScript Application Architecture 2012
Scalable JavaScript Application Architecture 2012Scalable JavaScript Application Architecture 2012
Scalable JavaScript Application Architecture 2012
 
Maintainable JavaScript 2012
Maintainable JavaScript 2012Maintainable JavaScript 2012
Maintainable JavaScript 2012
 
Maintainable JavaScript 2011
Maintainable JavaScript 2011Maintainable JavaScript 2011
Maintainable JavaScript 2011
 
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
 
Scalable JavaScript Application Architecture
Scalable JavaScript Application ArchitectureScalable JavaScript Application Architecture
Scalable JavaScript Application Architecture
 
Extreme JavaScript Compression With YUI Compressor
Extreme JavaScript Compression With YUI CompressorExtreme JavaScript Compression With YUI Compressor
Extreme JavaScript Compression With YUI Compressor
 
Writing Efficient JavaScript
Writing Efficient JavaScriptWriting Efficient JavaScript
Writing Efficient JavaScript
 
Speed Up Your JavaScript
Speed Up Your JavaScriptSpeed Up Your JavaScript
Speed Up Your JavaScript
 
Maintainable JavaScript
Maintainable JavaScriptMaintainable JavaScript
Maintainable JavaScript
 
JavaScript Variable Performance
JavaScript Variable PerformanceJavaScript Variable Performance
JavaScript Variable Performance
 
The New Yahoo! Homepage and YUI 3
The New Yahoo! Homepage and YUI 3The New Yahoo! Homepage and YUI 3
The New Yahoo! Homepage and YUI 3
 
Test Driven Development With YUI Test (Ajax Experience 2008)
Test Driven Development With YUI Test (Ajax Experience 2008)Test Driven Development With YUI Test (Ajax Experience 2008)
Test Driven Development With YUI Test (Ajax Experience 2008)
 
Enterprise JavaScript Error Handling (Ajax Experience 2008)
Enterprise JavaScript Error Handling (Ajax Experience 2008)Enterprise JavaScript Error Handling (Ajax Experience 2008)
Enterprise JavaScript Error Handling (Ajax Experience 2008)
 

Recently uploaded

IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
RAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AIRAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AIUdaiappa Ramachandran
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
Introduction to Quantum Computing
Introduction to Quantum ComputingIntroduction to Quantum Computing
Introduction to Quantum ComputingGDSC PJATK
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdfJamie (Taka) Wang
 
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataCloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataSafe Software
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 

Recently uploaded (20)

IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
RAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AIRAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AI
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
Introduction to Quantum Computing
Introduction to Quantum ComputingIntroduction to Quantum Computing
Introduction to Quantum Computing
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
 
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataCloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 

Performance on the Yahoo! Homepage

  • 1. flickr.com/photos/eyesplash/4268550236/ Performance on the Yahoo! Homepage Nicholas C. Zakas Principal Front End Engineer, Yahoo! Velocity, June 24 2010
  • 6. The Challenge: Create a new Yahoo! homepage* *add a ton of new functionality **without sacrificing performance
  • 7. By the Numbers 345 110 million million unique users per month unique users per month worldwide in United States (no pressure)
  • 10. 1997
  • 11. 1999
  • 12. 2002
  • 13. 2004
  • 14. 2006
  • 15. Today
  • 16. flickr.com/photos/yodelanecdotal/3620023763/ We strapped ourselves in, believing we could make the fastest Yahoo! homepage yet
  • 17. Performance is hard The best features for users aren't always the fastest flickr.com/photos/thetruthabout/2831498922/
  • 18. Content Optimization Engine determines which stories to display at request time
  • 19. Sites can be completely customized by the user
  • 20. Popular search topics are determined at request time to display up-to-date info
  • 21. Random information about other parts of the Yahoo! network
  • 22. Apps provide more info on-demand
  • 23. 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
  • 24. flickr.com/photos/thetorpedodog/458336570/ Performance reboot Many of the optimizations made on the previous homepage won't work
  • 25. 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/
  • 26. Areas of Focus • Time to interactivity • Ajax Responsiveness • Perceived performance flickr.com/photos/hape_gera/2123257808/
  • 27. The time to interactivity is the time between the initial page request and when the user can complete an action
  • 28. 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
  • 29. Net tab reveals some information Where DOMContentLoaded and onload occur
  • 30. YSlow reports onload time Useful, but doesn't really determine time to interactivity
  • 31. Goal: Ensure interactivity by DOMContentLoaded
  • 32. 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/
  • 33. alistapart.com/articles/understandingprogressiveenhancement Progressive Enhancement FTW! The more tasks that don't require JavaScript, the faster the user can complete an action
  • 34. The page is very functional even without JavaScript
  • 35. Not relying on JavaScript for everything allows us an opportunity to deliver what appears to be a faster experience
  • 36. JavaScript Loading onto the page without pain
  • 37. Traditional thinking was put scripts at the bottom
  • 38. <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>
  • 39. flickr.com/photos/kartik_m/2724121901/ Our results were upsetting Putting scripts at the bottom actually caused other problems
  • 40. 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
  • 44. 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(); }; Dynamically loaded scripts } don't block page load script.src = url; document.getElementsByTagName("head")[0].appendChild(script); }
  • 45. <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>
  • 46. Y.Get.script(YUI.presentation.lazyScriptList, { onSuccess: function() { Y.use("*"); Y.ModulePlatform.init(Y.dali.config, true); }});
  • 47. First script file Everything else
  • 48. flickr.com/photos/nateandmiranda/2625399653/ 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
  • 49. 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
  • 50. Page Flushing Getting data out to the browser fast
  • 51. Traditional thinking is to flush after <head>
  • 52. 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/
  • 53. <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
  • 54. <div class="hd"> </div> <!-- flushing here causes the head to render --> <div class=”bd”> </div> Removing page-level wrapper <div> allows the head to render as quickly as possible
  • 59. (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
  • 60. Areas of Focus • Time to interactivity • Ajax Responsiveness • Perceived performance flickr.com/photos/hape_gera/2123257808/
  • 61. 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.
  • 62. start stop 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
  • 63. roundtrip start stop Roundtrip Time The first step is the amount of time between when the browser sends the request and the time it receives the response
  • 64. roundtrip parse start stop Parse Time Next, the JSON response returned from the server has to be parsed
  • 65. roundtrip parse download start stop JavaScript/CSS Download Time Each response can indicate it needs more JavaScript/CSS before the content can be used
  • 66. roundtrip parse download render start stop Render Time The amount of time it takes to actually change the display via innerHTML
  • 68. Fixing Roundtrip Time What's taking so damn long?
  • 69. The right-side ads were a roundtrip issue The server-side ad call took extra time plus the ad markup represented 50-60% of the returned markup
  • 70. “Fixing” the ad Entire right column now renders in an iframe. This defers the ad call until after the app has been loaded in the browser, saving both server time for app rendering and bytes in the response.
  • 71. Fixing Parse Time What's taking so freakin' long??
  • 73. { "msg": "Hello world!", "day": 6, "found": true, } JSON is super-efficient for transporting numbers, Booleans, simple strings, objects, and arrays
  • 74. { "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 tt<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>ntttt<ul id="p_26583360-settings-menu" class="y-menu medium">ntttttnttttt<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>ntttttnttt </ul>ntt </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 Very inefficient for large HTML strings 10:10am PDT</p>n <table class="index-update">n class="med-large">n textindent">&nbsp;</td>n" <tbody>n <td class="hide-contents hide- <tr } Escapement adds a lot of extra bytes
  • 75. 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
  • 76. Shrinking the size of the HTML by deferring the ad helped But we still wanted to see if we could eek out better gains
  • 77. [{ "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
  • 78. flickr.com/photos/mattymatt/3017263513/ Results were good But then native JSON parsing hit and a lot of problems went away
  • 79. Fixing Download Time What's taking so (*&#$Q@! long???
  • 80. On-demand JavaScript/CSS downloading hurt app loading time Intended to decrease page load time, and did – but left us with this side effect
  • 81. 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/
  • 82. After page load, we start to download JavaScript/CSS for the apps on the page
  • 83. After onload onload
  • 84. Fixing Render Time WTF is taking so (*&#$Q@! long?!?!?
  • 87. Areas of Focus • Time to interactivity • Ajax Responsiveness • Perceived performance flickr.com/photos/hape_gera/2123257808/
  • 88. Don't underestimate the power of perception
  • 89. Initially, the new page was actually slower to load than the previous To be expected – a lot more JavaScript and CSS
  • 90. Blank space is bad Makes it seem like nothing is happening
  • 91. 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
  • 92. Initially, apps were completely blank while loading (seemed slow)
  • 93. We changed it to a pseudo- loaded state, which made loading seem faster
  • 94. In the end, user testing showed that perceived performance of the new page was the same as on the old page
  • 96. 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
  • 97. 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 flickr.com/photos/ficken/1813744832/
  • 99. Etcetera • My blog: www.nczonline.net • My email: nzakas@yahoo-inc.com • Twitter: @slicknet