SlideShare une entreprise Scribd logo
1  sur  54
Télécharger pour lire hors ligne
Speed is Essential for a
Great Web Experience

@andydavies




#oredev
Nov 2012
                           http://www.flickr.com/photos/dex1138/7879381800
Performance isn’t always a priority




                           http://www.flickr.com/photos/randomidea/247994072
“Has it loaded yet?”


                       http://www.flickr.com/photos/kindofindie/4099768084
Our perception of response time

  Instant

       Seamless                                                           Yawn!




100ms 1s                                                                 10s

            3s - Recommended         6.5s - Alexa 2000
                 Load Time               Fall 2012


                          Response Time in Man-computer Conversational Transactions
                                                             Robert B. Miller, 1968
“50% more concentration when using
       badly performing web sites”
                                                    Foviance
                  http://www.flickr.com/photos/yourdon/3366991042
Effect of delay on abandonment rate...




      Abandonment rate over 200+ sites / 177+ million page views over 2 weeks - http://www.measureworks.nl / Gomez
Bing did some experiments




     +1s
                            $/
                             - 2.8%
                                      +
Wallmart made some improvements




     -1s                      +2%
Shopzilla cut page load time by 5 seconds!



  +12%          +25%                                -50%

   $$$

                       http://velocityconf.com/velocity2009/public/schedule/detail/7709
Measuring page load time...


                              http://www.flickr.com/photos/wwarby/7109538317
W3C Navigation Timing API
                                    navigaAonStart,
                                        redirectStart,
                                         redirectEnd,
                                             fetchStart,
                                                    domainLookupStart,
                                                        domainLookupEnd,
                                                               connectStart,
                                                                    (secureConnecAonStart),
                                                                      connectEnd,
                                                                         requestStart,
                                                                                 responseStart,
                                                                                          responseEnd,


 Prompt,
                         App,
   for,     redirect,            DNS,     TCP,           Request,         Response,               Processing,             onLoad,
                        cache,
 unload,
           unload,
                                                                                                                                      loadEventEnd,
                                                                                                                                   loadEventStart,
                                                                                                                          domComplete,
                                                                                                                       domContentLoaded,
                                                                                                                  domInteracAve,
                                                                                                                domLoading,
                                        unloadEnd,
                                    unloadStart,

                                                                                                         http://www.w3.org/TR/navigation-timing/
Navigation Timing Data in Google Analytics




                      Text




           Other Real User Monitoring tools available
Example of Real Users Experience

                         27%
Visitors (%)




                               13%



                    8%               8%
               6%                              6%

                                                               3%   3%
                                                          2%
                                                                         1%

               1    2    3     4     5         6          7    8    9    10
                                          Load Time (s)
Example of Real Users Experience

                         27%

                                                                              24%
Visitors (%)




                               13%



                    8%               8%
               6%                              6%

                                                               3%   3%
                                                          2%
                                                                         1%

               1    2    3     4     5         6          7    8    9    10   > 10
                                          Load Time (s)
Synthetic Monitoring

                    3
Response Time (s)




                    2




                    1




                    0
                        1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 16 27 28 29 30
                                                        September 2012
Examining the detail...

                          http://www.flickr.com/photos/arnybo/2679622216
Browser Plugins




         YSlow    PageSpeed
webpagetest.org
Waterfall for bbc.co.uk/news
mobitest.akamai.com




                Alternatively, could use Chrome / Safari
                remote debugging to generate HAR
Bigger, Faster Servers?


                          http://www.flickr.com/photos/getbutterfly/6317955134
Over 80% of page load time is on front-end

                                                                   Backend
 news.bbc.co.uk
                                                                   Frontend
      ebay.co.uk

debenhams.co.uk

   direct.gov.uk

   amazon.co.uk

  mumsnet.com

  guardian.co.uk

                   0   1        2               3              4              5

                           Measured via residential ADSL line using Google Chrome
But don’t forget to fix slow server responses




    4 seconds!
Bandwidth (often) isn’t the bottleneck



2.0

1.5

1.0

0.5


  0s                   5s                                      10s

                 news.bbc.co.uk tested via webpagetest.org throttled at 1.5Mbps
                                    (bursts over 1.5Mbps are artefact of testing)
“More Bandwidth Doesn’t Matter (much)”
                                                                                    Mike Belshe




                 3.11s
Page Load Time




                         1.95s
                                 1.63s
                                         1.50s    1.44s    1.41s    1.39s   1.38s     1.37s   1.36s




                  1       2       3       4         5       6        7       8          9         10
                                                 Bandwidth (Mbps)
Visualising TCP




                  Carlos Bueno (@archivd) https://vimeo.com/14439742
Impact of Latency


                     4



                     3
Page Load Time (s)




                     2



                     1




                         0   20   40   60   80    100    120    140     160   180   200   220   240
                                                 Round Trip Time (ms)
Minimum round trips to download a file

                                                             (TCP Segments)
285kB


214kB


143kB


 71kB

 Size
        1   2    3    4   5   6     7      8      9     10      11

        Round Trips               TCP and the Lower Bound of Web Performance
                                                                  John Rauser
Latency is Our Biggest Enemy



  “In 2012, the average worldwide RTT to Google is still
  ~100ms, and ~50-60ms within the US.”



  “we are looking at 100-1000ms RTT range on mobile”

                                                               Ilya Grigorik




            http://www.igvita.com/2012/07/19/latency-the-new-web-performance-bottleneck/
3G Radio Resource Control

                     Idle for 12s


           IDLE                           CELL_FACH
                     1s delay



   1-2s delay!
                     CELL_DCH                  Idle for 5s

 Exact timings vary and depend on carrier NOT device
                       http://web.eecs.umich.edu/~fengqian/paper/3g_imc10.pdf
Going Faster…




                http://www.flickr.com/photos/mikebaird/2464769129/
Speeding Things Up - Some Basics




     ★   Compress
     ★   Minify
     ★   Reduce Requests
     ★   Cache
     ★   HTTP Keep-Alive
     ★   Use a CDN?
What’s the web made of?

                                                         Images
                                                         Scripts
                                                         Stylesheets
                                                         HTML
                                                         Flash
                                                         Other




                   Composition of ‘average’ web page via httparchive.org
Bitmapped Images




    JPEG                            PNG                           GIF


       Optimise, Optimise, Optimise!
           (jpegmini, pngmini, Smush.it, ImageOptim, Gifsicle etc.)
New Devices, New Challenges...




                2 x Resolution = 4 x Pixels!

                           http://www.flickr.com/photos/roopaw/6985954465
Some Alternatives




       CSS                 SVG                 Fonts


Bitmaps still a challenge but interesting experiments around
It’s no longer a desktop world




                             http://www.flickr.com/photos/adactio/6960610178
Go “Mobile First” for Responsive Designs




                                  http://seesparkbox.com
Use “Right-sized” Images




                                            http://www.flickr.com/photos/emzee/139794246


Standards support (picture? srcset?) is coming but unclear when!
Meanwhile services such as sencha.io, resrc.it and JS libraries -
picturefill.js, foresight.js can help.
Minimise browser blocking...




                               http://www.flickr.com/photos/barteko/6128499314
Parallel Downloads

                                    news.bbcimg.co.uk
                                    static.bbc.co.uk




  Domain Sharding increases number of parallel downloads but…

  …more connections may not be a good idea on mobile
  …may also interfere with multiplexing in protocols like SPDY
Get the <head> straight

<!doctype html>
<html>
<head>
                                                          CSS before JS
  <meta charset="utf-8">                                 Ideally one file*
  <title>This is my title<title>

  <link rel="stylesheet" href="styles.css" type="text/css" />

  <script src="script.js"></script>

    .
    .                                                   Only JS needed
    .                                                   during page load
</head>


           * Depends on size and whether major / minor breakpoints used
Load remaining Javascript late as possible


           .
           .
           .

        <script src="restofscript.js"></script>

      </body>
      </html>
                                             One file or many?
                                             (Depends on size)


Script loaders can help but scripts aren’t discoverable by pre-fetcher
The Script Tag



        <script src=″…″></script>



    Until the script has executed, the rendering of
            all elements below is blocked!
“Virgin Media Broadband ISP Users
Affected by Website Routing Woes”
                                                            ISP Review, May 26, 2012




Customer jcmm33 said:
“Same issue here as well, been like this all day. Sites like
autotrader.co.uk don’t appear to be accessible, others like
the telegraph.co.uk are waiting on other components to
download (content from sites like cg-global.maxymiser.com,
pixel.quantserve.com).”



     http://www.ispreview.co.uk/index.php/2012/05/uk-virgin-media-broadband-isp-users-affected-by-website-routing-woes.html
Impact on The Telegraph…




Same issue affected many other sites   http://bit.ly/Ncy7Rd
Load Third Party scripts asynchronously


 <script type="text/javascript">
   function() {
     var js = document.createElement('script');
     js.async = true;
     js.src = 'myscript.js';
     var e = document.getElementsByTagName('script')[0];
     e.parentNode.insertBefore(js, first);
   })();
 </script>




     Or use a script loader - labjs, requirejs, yepnope etc.
Lots of factors to think about...

                             http://www.flickr.com/photos/corneveaux/3248566797
Don’t have to do it all by hand

            http://www.flickr.com/photos/simeon_barkas/2557059247
Performance isn’t just for Christmas

                     Measure




          Optimise             Analyse
Measure Impact on Business Goals




                           http://www.flickr.com/photos/safari_vacation/5961260280
http://www.flickr.com/photos/jurvetson/6212582593
@andydavies
         andy@asteno.com
http://www.slideshare.net/andydavies




                       http://www.flickr.com/photos/auntiep/5024494612
Credits


All photographs copyright original owners on flickr.com

Following pictograms courtesy of The Noun Project

Contenu connexe

Similaire à Speed is Essential for a Great Web Experience (oredev)

Speed is Essential for a Great Web Experience (Canvas Conf Version)
Speed is Essential for a Great Web Experience (Canvas Conf Version)Speed is Essential for a Great Web Experience (Canvas Conf Version)
Speed is Essential for a Great Web Experience (Canvas Conf Version)Andy Davies
 
Tellurium.A.New.Approach.For.Web.Testing.V5
Tellurium.A.New.Approach.For.Web.Testing.V5Tellurium.A.New.Approach.For.Web.Testing.V5
Tellurium.A.New.Approach.For.Web.Testing.V5John.Jian.Fang
 
2014 11-18 rip onload
2014 11-18 rip onload2014 11-18 rip onload
2014 11-18 rip onloadBuddy Brewer
 
Tellurium.A.New.Approach.For.Web.Testing
Tellurium.A.New.Approach.For.Web.TestingTellurium.A.New.Approach.For.Web.Testing
Tellurium.A.New.Approach.For.Web.TestingJohn.Jian.Fang
 
Fronteers Spring Conference Amsterdam 2016 keynote
Fronteers Spring Conference Amsterdam 2016 keynote Fronteers Spring Conference Amsterdam 2016 keynote
Fronteers Spring Conference Amsterdam 2016 keynote Kristian Sköld
 
Securing Web Applications
Securing Web ApplicationsSecuring Web Applications
Securing Web Applicationsgoodfriday
 
Comet: an Overview and a New Solution Called Jabbify
Comet: an Overview and a New Solution Called JabbifyComet: an Overview and a New Solution Called Jabbify
Comet: an Overview and a New Solution Called JabbifyBrian Moschel
 
Comet, Simplified, with Jabbify Comet Service
Comet, Simplified, with Jabbify Comet ServiceComet, Simplified, with Jabbify Comet Service
Comet, Simplified, with Jabbify Comet ServiceBrian Moschel
 
Exploring Terracotta
Exploring TerracottaExploring Terracotta
Exploring TerracottaAlex Miller
 
Jboye slides-27-02-2013
Jboye slides-27-02-2013Jboye slides-27-02-2013
Jboye slides-27-02-2013Torben Rimmer
 
More Secrets of JavaScript Libraries
More Secrets of JavaScript LibrariesMore Secrets of JavaScript Libraries
More Secrets of JavaScript Librariesjeresig
 
Speed is Essential for a Great Web Experience
Speed is Essential for a Great Web ExperienceSpeed is Essential for a Great Web Experience
Speed is Essential for a Great Web ExperienceAndy Davies
 
Performance, Games, and Distributed Testing in JavaScript
Performance, Games, and Distributed Testing in JavaScriptPerformance, Games, and Distributed Testing in JavaScript
Performance, Games, and Distributed Testing in JavaScriptjeresig
 
Metrics, metrics everywhere (but where the heck do you start?)
Metrics, metrics everywhere (but where the heck do you start?) Metrics, metrics everywhere (but where the heck do you start?)
Metrics, metrics everywhere (but where the heck do you start?) SOASTA
 
Metrics, metrics everywhere (but where the heck do you start?)
Metrics, metrics everywhere (but where the heck do you start?)Metrics, metrics everywhere (but where the heck do you start?)
Metrics, metrics everywhere (but where the heck do you start?)Tammy Everts
 
Velocity NYC: Metrics, metrics everywhere (but where the heck do you start?)
Velocity NYC: Metrics, metrics everywhere (but where the heck do you start?)Velocity NYC: Metrics, metrics everywhere (but where the heck do you start?)
Velocity NYC: Metrics, metrics everywhere (but where the heck do you start?)Cliff Crocker
 
A Modern Approach to Performance Monitoring
A Modern Approach to Performance MonitoringA Modern Approach to Performance Monitoring
A Modern Approach to Performance MonitoringCliff Crocker
 
Edge 2014: A Modern Approach to Performance Monitoring
Edge 2014: A Modern Approach to Performance MonitoringEdge 2014: A Modern Approach to Performance Monitoring
Edge 2014: A Modern Approach to Performance MonitoringAkamai Technologies
 
Rail Performance in the Cloud - Opening
Rail Performance in the Cloud - OpeningRail Performance in the Cloud - Opening
Rail Performance in the Cloud - OpeningEngine Yard
 

Similaire à Speed is Essential for a Great Web Experience (oredev) (20)

Speed is Essential for a Great Web Experience (Canvas Conf Version)
Speed is Essential for a Great Web Experience (Canvas Conf Version)Speed is Essential for a Great Web Experience (Canvas Conf Version)
Speed is Essential for a Great Web Experience (Canvas Conf Version)
 
Tellurium.A.New.Approach.For.Web.Testing.V5
Tellurium.A.New.Approach.For.Web.Testing.V5Tellurium.A.New.Approach.For.Web.Testing.V5
Tellurium.A.New.Approach.For.Web.Testing.V5
 
2014 11-18 rip onload
2014 11-18 rip onload2014 11-18 rip onload
2014 11-18 rip onload
 
Tellurium.A.New.Approach.For.Web.Testing
Tellurium.A.New.Approach.For.Web.TestingTellurium.A.New.Approach.For.Web.Testing
Tellurium.A.New.Approach.For.Web.Testing
 
Fronteers Spring Conference Amsterdam 2016 keynote
Fronteers Spring Conference Amsterdam 2016 keynote Fronteers Spring Conference Amsterdam 2016 keynote
Fronteers Spring Conference Amsterdam 2016 keynote
 
Securing Web Applications
Securing Web ApplicationsSecuring Web Applications
Securing Web Applications
 
Comet: an Overview and a New Solution Called Jabbify
Comet: an Overview and a New Solution Called JabbifyComet: an Overview and a New Solution Called Jabbify
Comet: an Overview and a New Solution Called Jabbify
 
Comet, Simplified, with Jabbify Comet Service
Comet, Simplified, with Jabbify Comet ServiceComet, Simplified, with Jabbify Comet Service
Comet, Simplified, with Jabbify Comet Service
 
Exploring Terracotta
Exploring TerracottaExploring Terracotta
Exploring Terracotta
 
Jboye slides-27-02-2013
Jboye slides-27-02-2013Jboye slides-27-02-2013
Jboye slides-27-02-2013
 
CloudKit
CloudKitCloudKit
CloudKit
 
More Secrets of JavaScript Libraries
More Secrets of JavaScript LibrariesMore Secrets of JavaScript Libraries
More Secrets of JavaScript Libraries
 
Speed is Essential for a Great Web Experience
Speed is Essential for a Great Web ExperienceSpeed is Essential for a Great Web Experience
Speed is Essential for a Great Web Experience
 
Performance, Games, and Distributed Testing in JavaScript
Performance, Games, and Distributed Testing in JavaScriptPerformance, Games, and Distributed Testing in JavaScript
Performance, Games, and Distributed Testing in JavaScript
 
Metrics, metrics everywhere (but where the heck do you start?)
Metrics, metrics everywhere (but where the heck do you start?) Metrics, metrics everywhere (but where the heck do you start?)
Metrics, metrics everywhere (but where the heck do you start?)
 
Metrics, metrics everywhere (but where the heck do you start?)
Metrics, metrics everywhere (but where the heck do you start?)Metrics, metrics everywhere (but where the heck do you start?)
Metrics, metrics everywhere (but where the heck do you start?)
 
Velocity NYC: Metrics, metrics everywhere (but where the heck do you start?)
Velocity NYC: Metrics, metrics everywhere (but where the heck do you start?)Velocity NYC: Metrics, metrics everywhere (but where the heck do you start?)
Velocity NYC: Metrics, metrics everywhere (but where the heck do you start?)
 
A Modern Approach to Performance Monitoring
A Modern Approach to Performance MonitoringA Modern Approach to Performance Monitoring
A Modern Approach to Performance Monitoring
 
Edge 2014: A Modern Approach to Performance Monitoring
Edge 2014: A Modern Approach to Performance MonitoringEdge 2014: A Modern Approach to Performance Monitoring
Edge 2014: A Modern Approach to Performance Monitoring
 
Rail Performance in the Cloud - Opening
Rail Performance in the Cloud - OpeningRail Performance in the Cloud - Opening
Rail Performance in the Cloud - Opening
 

Plus de Andy Davies

Fast Fashion… How Missguided revolutionised their approach to site performanc...
Fast Fashion… How Missguided revolutionised their approach to site performanc...Fast Fashion… How Missguided revolutionised their approach to site performanc...
Fast Fashion… How Missguided revolutionised their approach to site performanc...Andy Davies
 
Fast Fashion… How Missguided revolutionised their approach to site performanc...
Fast Fashion… How Missguided revolutionised their approach to site performanc...Fast Fashion… How Missguided revolutionised their approach to site performanc...
Fast Fashion… How Missguided revolutionised their approach to site performanc...Andy Davies
 
AB Testing, Ads and other 3rd party tags - London WebPerf - March 2018
AB Testing, Ads and other 3rd party tags - London WebPerf - March 2018AB Testing, Ads and other 3rd party tags - London WebPerf - March 2018
AB Testing, Ads and other 3rd party tags - London WebPerf - March 2018Andy Davies
 
AB Testing, Ads and other 3rd party tags - SmashingConf London - 2018
AB Testing, Ads and other 3rd party tags - SmashingConf London - 2018AB Testing, Ads and other 3rd party tags - SmashingConf London - 2018
AB Testing, Ads and other 3rd party tags - SmashingConf London - 2018Andy Davies
 
Inspecting iOS App Traffic with JavaScript - JSOxford - Jan 2018
Inspecting iOS App Traffic with JavaScript - JSOxford - Jan 2018Inspecting iOS App Traffic with JavaScript - JSOxford - Jan 2018
Inspecting iOS App Traffic with JavaScript - JSOxford - Jan 2018Andy Davies
 
Selling Performance - Bristol WebPerf Meetup 2017-07-20
Selling Performance - Bristol WebPerf Meetup 2017-07-20Selling Performance - Bristol WebPerf Meetup 2017-07-20
Selling Performance - Bristol WebPerf Meetup 2017-07-20Andy Davies
 
Speed: The 'Forgotten' Conversion Factor
Speed: The 'Forgotten' Conversion FactorSpeed: The 'Forgotten' Conversion Factor
Speed: The 'Forgotten' Conversion FactorAndy Davies
 
Building an Appier Web - London Web Standards - Nov 2016
Building an Appier Web -  London Web Standards - Nov 2016Building an Appier Web -  London Web Standards - Nov 2016
Building an Appier Web - London Web Standards - Nov 2016Andy Davies
 
Building an Appier Web - Velocity Amsterdam 2016
Building an Appier Web - Velocity Amsterdam 2016Building an Appier Web - Velocity Amsterdam 2016
Building an Appier Web - Velocity Amsterdam 2016Andy Davies
 
The Case for HTTP/2 - GreeceJS - June 2016
The Case for HTTP/2 -  GreeceJS - June 2016The Case for HTTP/2 -  GreeceJS - June 2016
The Case for HTTP/2 - GreeceJS - June 2016Andy Davies
 
Building an Appier Web - May 2016
Building an Appier Web - May 2016Building an Appier Web - May 2016
Building an Appier Web - May 2016Andy Davies
 
The Fast, The Slow and The Unconverted - Emerce Conversion 2016
The Fast, The Slow and The Unconverted -  Emerce Conversion 2016The Fast, The Slow and The Unconverted -  Emerce Conversion 2016
The Fast, The Slow and The Unconverted - Emerce Conversion 2016Andy Davies
 
The Case for HTTP/2 - Internetdagarna 2015 - Stockholm
The Case for HTTP/2  - Internetdagarna 2015 - StockholmThe Case for HTTP/2  - Internetdagarna 2015 - Stockholm
The Case for HTTP/2 - Internetdagarna 2015 - StockholmAndy Davies
 
Making Mobile Sites Faster
Making Mobile Sites FasterMaking Mobile Sites Faster
Making Mobile Sites FasterAndy Davies
 
The Case for HTTP/2 - EpicFEL Sept 2015
The Case for HTTP/2 - EpicFEL Sept 2015The Case for HTTP/2 - EpicFEL Sept 2015
The Case for HTTP/2 - EpicFEL Sept 2015Andy Davies
 
Speed matters, So why is your site so slow?
Speed matters, So why is your site so slow?Speed matters, So why is your site so slow?
Speed matters, So why is your site so slow?Andy Davies
 
The Case for HTTP/2
The Case for HTTP/2The Case for HTTP/2
The Case for HTTP/2Andy Davies
 
Speed is Essential for a Great Web Experience
Speed is Essential for a Great Web ExperienceSpeed is Essential for a Great Web Experience
Speed is Essential for a Great Web ExperienceAndy Davies
 

Plus de Andy Davies (20)

Fast Fashion… How Missguided revolutionised their approach to site performanc...
Fast Fashion… How Missguided revolutionised their approach to site performanc...Fast Fashion… How Missguided revolutionised their approach to site performanc...
Fast Fashion… How Missguided revolutionised their approach to site performanc...
 
Fast Fashion… How Missguided revolutionised their approach to site performanc...
Fast Fashion… How Missguided revolutionised their approach to site performanc...Fast Fashion… How Missguided revolutionised their approach to site performanc...
Fast Fashion… How Missguided revolutionised their approach to site performanc...
 
AB Testing, Ads and other 3rd party tags - London WebPerf - March 2018
AB Testing, Ads and other 3rd party tags - London WebPerf - March 2018AB Testing, Ads and other 3rd party tags - London WebPerf - March 2018
AB Testing, Ads and other 3rd party tags - London WebPerf - March 2018
 
AB Testing, Ads and other 3rd party tags - SmashingConf London - 2018
AB Testing, Ads and other 3rd party tags - SmashingConf London - 2018AB Testing, Ads and other 3rd party tags - SmashingConf London - 2018
AB Testing, Ads and other 3rd party tags - SmashingConf London - 2018
 
Inspecting iOS App Traffic with JavaScript - JSOxford - Jan 2018
Inspecting iOS App Traffic with JavaScript - JSOxford - Jan 2018Inspecting iOS App Traffic with JavaScript - JSOxford - Jan 2018
Inspecting iOS App Traffic with JavaScript - JSOxford - Jan 2018
 
Selling Performance - Bristol WebPerf Meetup 2017-07-20
Selling Performance - Bristol WebPerf Meetup 2017-07-20Selling Performance - Bristol WebPerf Meetup 2017-07-20
Selling Performance - Bristol WebPerf Meetup 2017-07-20
 
Speed: The 'Forgotten' Conversion Factor
Speed: The 'Forgotten' Conversion FactorSpeed: The 'Forgotten' Conversion Factor
Speed: The 'Forgotten' Conversion Factor
 
Building an Appier Web - London Web Standards - Nov 2016
Building an Appier Web -  London Web Standards - Nov 2016Building an Appier Web -  London Web Standards - Nov 2016
Building an Appier Web - London Web Standards - Nov 2016
 
Building an Appier Web - Velocity Amsterdam 2016
Building an Appier Web - Velocity Amsterdam 2016Building an Appier Web - Velocity Amsterdam 2016
Building an Appier Web - Velocity Amsterdam 2016
 
The Case for HTTP/2 - GreeceJS - June 2016
The Case for HTTP/2 -  GreeceJS - June 2016The Case for HTTP/2 -  GreeceJS - June 2016
The Case for HTTP/2 - GreeceJS - June 2016
 
Building an Appier Web - May 2016
Building an Appier Web - May 2016Building an Appier Web - May 2016
Building an Appier Web - May 2016
 
The Fast, The Slow and The Unconverted - Emerce Conversion 2016
The Fast, The Slow and The Unconverted -  Emerce Conversion 2016The Fast, The Slow and The Unconverted -  Emerce Conversion 2016
The Fast, The Slow and The Unconverted - Emerce Conversion 2016
 
The Case for HTTP/2 - Internetdagarna 2015 - Stockholm
The Case for HTTP/2  - Internetdagarna 2015 - StockholmThe Case for HTTP/2  - Internetdagarna 2015 - Stockholm
The Case for HTTP/2 - Internetdagarna 2015 - Stockholm
 
Making Mobile Sites Faster
Making Mobile Sites FasterMaking Mobile Sites Faster
Making Mobile Sites Faster
 
The Case for HTTP/2 - EpicFEL Sept 2015
The Case for HTTP/2 - EpicFEL Sept 2015The Case for HTTP/2 - EpicFEL Sept 2015
The Case for HTTP/2 - EpicFEL Sept 2015
 
Speed matters, So why is your site so slow?
Speed matters, So why is your site so slow?Speed matters, So why is your site so slow?
Speed matters, So why is your site so slow?
 
The Case for HTTP/2
The Case for HTTP/2The Case for HTTP/2
The Case for HTTP/2
 
HTTP2 is Here!
HTTP2 is Here!HTTP2 is Here!
HTTP2 is Here!
 
Speed Matters!
Speed Matters!Speed Matters!
Speed Matters!
 
Speed is Essential for a Great Web Experience
Speed is Essential for a Great Web ExperienceSpeed is Essential for a Great Web Experience
Speed is Essential for a Great Web Experience
 

Dernier

UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
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
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
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
 
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
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
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
 
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
 
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
 
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
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 

Dernier (20)

UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
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.
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
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
 
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
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
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
 
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
 
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
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 

Speed is Essential for a Great Web Experience (oredev)

  • 1. Speed is Essential for a Great Web Experience @andydavies #oredev Nov 2012 http://www.flickr.com/photos/dex1138/7879381800
  • 2. Performance isn’t always a priority http://www.flickr.com/photos/randomidea/247994072
  • 3. “Has it loaded yet?” http://www.flickr.com/photos/kindofindie/4099768084
  • 4. Our perception of response time Instant Seamless Yawn! 100ms 1s 10s 3s - Recommended 6.5s - Alexa 2000 Load Time Fall 2012 Response Time in Man-computer Conversational Transactions Robert B. Miller, 1968
  • 5. “50% more concentration when using badly performing web sites” Foviance http://www.flickr.com/photos/yourdon/3366991042
  • 6. Effect of delay on abandonment rate... Abandonment rate over 200+ sites / 177+ million page views over 2 weeks - http://www.measureworks.nl / Gomez
  • 7. Bing did some experiments +1s $/ - 2.8% +
  • 8. Wallmart made some improvements -1s +2%
  • 9. Shopzilla cut page load time by 5 seconds! +12% +25% -50% $$$ http://velocityconf.com/velocity2009/public/schedule/detail/7709
  • 10. Measuring page load time... http://www.flickr.com/photos/wwarby/7109538317
  • 11. W3C Navigation Timing API navigaAonStart, redirectStart, redirectEnd, fetchStart, domainLookupStart, domainLookupEnd, connectStart, (secureConnecAonStart), connectEnd, requestStart, responseStart, responseEnd, Prompt, App, for, redirect, DNS, TCP, Request, Response, Processing, onLoad, cache, unload, unload, loadEventEnd, loadEventStart, domComplete, domContentLoaded, domInteracAve, domLoading, unloadEnd, unloadStart, http://www.w3.org/TR/navigation-timing/
  • 12. Navigation Timing Data in Google Analytics Text Other Real User Monitoring tools available
  • 13. Example of Real Users Experience 27% Visitors (%) 13% 8% 8% 6% 6% 3% 3% 2% 1% 1 2 3 4 5 6 7 8 9 10 Load Time (s)
  • 14. Example of Real Users Experience 27% 24% Visitors (%) 13% 8% 8% 6% 6% 3% 3% 2% 1% 1 2 3 4 5 6 7 8 9 10 > 10 Load Time (s)
  • 15. Synthetic Monitoring 3 Response Time (s) 2 1 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 16 27 28 29 30 September 2012
  • 16. Examining the detail... http://www.flickr.com/photos/arnybo/2679622216
  • 17. Browser Plugins YSlow PageSpeed
  • 20. mobitest.akamai.com Alternatively, could use Chrome / Safari remote debugging to generate HAR
  • 21. Bigger, Faster Servers? http://www.flickr.com/photos/getbutterfly/6317955134
  • 22. Over 80% of page load time is on front-end Backend news.bbc.co.uk Frontend ebay.co.uk debenhams.co.uk direct.gov.uk amazon.co.uk mumsnet.com guardian.co.uk 0 1 2 3 4 5 Measured via residential ADSL line using Google Chrome
  • 23. But don’t forget to fix slow server responses 4 seconds!
  • 24. Bandwidth (often) isn’t the bottleneck 2.0 1.5 1.0 0.5 0s 5s 10s news.bbc.co.uk tested via webpagetest.org throttled at 1.5Mbps (bursts over 1.5Mbps are artefact of testing)
  • 25. “More Bandwidth Doesn’t Matter (much)” Mike Belshe 3.11s Page Load Time 1.95s 1.63s 1.50s 1.44s 1.41s 1.39s 1.38s 1.37s 1.36s 1 2 3 4 5 6 7 8 9 10 Bandwidth (Mbps)
  • 26. Visualising TCP Carlos Bueno (@archivd) https://vimeo.com/14439742
  • 27. Impact of Latency 4 3 Page Load Time (s) 2 1 0 20 40 60 80 100 120 140 160 180 200 220 240 Round Trip Time (ms)
  • 28. Minimum round trips to download a file (TCP Segments) 285kB 214kB 143kB 71kB Size 1 2 3 4 5 6 7 8 9 10 11 Round Trips TCP and the Lower Bound of Web Performance John Rauser
  • 29. Latency is Our Biggest Enemy “In 2012, the average worldwide RTT to Google is still ~100ms, and ~50-60ms within the US.” “we are looking at 100-1000ms RTT range on mobile” Ilya Grigorik http://www.igvita.com/2012/07/19/latency-the-new-web-performance-bottleneck/
  • 30. 3G Radio Resource Control Idle for 12s IDLE CELL_FACH 1s delay 1-2s delay! CELL_DCH Idle for 5s Exact timings vary and depend on carrier NOT device http://web.eecs.umich.edu/~fengqian/paper/3g_imc10.pdf
  • 31. Going Faster… http://www.flickr.com/photos/mikebaird/2464769129/
  • 32. Speeding Things Up - Some Basics ★ Compress ★ Minify ★ Reduce Requests ★ Cache ★ HTTP Keep-Alive ★ Use a CDN?
  • 33. What’s the web made of? Images Scripts Stylesheets HTML Flash Other Composition of ‘average’ web page via httparchive.org
  • 34. Bitmapped Images JPEG PNG GIF Optimise, Optimise, Optimise! (jpegmini, pngmini, Smush.it, ImageOptim, Gifsicle etc.)
  • 35. New Devices, New Challenges... 2 x Resolution = 4 x Pixels! http://www.flickr.com/photos/roopaw/6985954465
  • 36. Some Alternatives CSS SVG Fonts Bitmaps still a challenge but interesting experiments around
  • 37. It’s no longer a desktop world http://www.flickr.com/photos/adactio/6960610178
  • 38. Go “Mobile First” for Responsive Designs http://seesparkbox.com
  • 39. Use “Right-sized” Images http://www.flickr.com/photos/emzee/139794246 Standards support (picture? srcset?) is coming but unclear when! Meanwhile services such as sencha.io, resrc.it and JS libraries - picturefill.js, foresight.js can help.
  • 40. Minimise browser blocking... http://www.flickr.com/photos/barteko/6128499314
  • 41. Parallel Downloads news.bbcimg.co.uk static.bbc.co.uk Domain Sharding increases number of parallel downloads but… …more connections may not be a good idea on mobile …may also interfere with multiplexing in protocols like SPDY
  • 42. Get the <head> straight <!doctype html> <html> <head> CSS before JS <meta charset="utf-8"> Ideally one file* <title>This is my title<title> <link rel="stylesheet" href="styles.css" type="text/css" /> <script src="script.js"></script> . . Only JS needed . during page load </head> * Depends on size and whether major / minor breakpoints used
  • 43. Load remaining Javascript late as possible . . . <script src="restofscript.js"></script> </body> </html> One file or many? (Depends on size) Script loaders can help but scripts aren’t discoverable by pre-fetcher
  • 44. The Script Tag <script src=″…″></script> Until the script has executed, the rendering of all elements below is blocked!
  • 45. “Virgin Media Broadband ISP Users Affected by Website Routing Woes” ISP Review, May 26, 2012 Customer jcmm33 said: “Same issue here as well, been like this all day. Sites like autotrader.co.uk don’t appear to be accessible, others like the telegraph.co.uk are waiting on other components to download (content from sites like cg-global.maxymiser.com, pixel.quantserve.com).” http://www.ispreview.co.uk/index.php/2012/05/uk-virgin-media-broadband-isp-users-affected-by-website-routing-woes.html
  • 46. Impact on The Telegraph… Same issue affected many other sites http://bit.ly/Ncy7Rd
  • 47. Load Third Party scripts asynchronously <script type="text/javascript"> function() { var js = document.createElement('script'); js.async = true; js.src = 'myscript.js'; var e = document.getElementsByTagName('script')[0]; e.parentNode.insertBefore(js, first); })(); </script> Or use a script loader - labjs, requirejs, yepnope etc.
  • 48. Lots of factors to think about... http://www.flickr.com/photos/corneveaux/3248566797
  • 49. Don’t have to do it all by hand http://www.flickr.com/photos/simeon_barkas/2557059247
  • 50. Performance isn’t just for Christmas Measure Optimise Analyse
  • 51. Measure Impact on Business Goals http://www.flickr.com/photos/safari_vacation/5961260280
  • 53. @andydavies andy@asteno.com http://www.slideshare.net/andydavies http://www.flickr.com/photos/auntiep/5024494612
  • 54. Credits All photographs copyright original owners on flickr.com Following pictograms courtesy of The Noun Project