SlideShare a Scribd company logo
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

More Related Content

Similar to 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.V5
John.Jian.Fang
 
2014 11-18 rip onload
2014 11-18 rip onload2014 11-18 rip onload
2014 11-18 rip onload
Buddy 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.Testing
John.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 Applications
goodfriday
 
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
Brian Moschel
 
Comet, Simplified, with Jabbify Comet Service
Comet, Simplified, with Jabbify Comet ServiceComet, Simplified, with Jabbify Comet Service
Comet, Simplified, with Jabbify Comet Service
Brian Moschel
 
Exploring Terracotta
Exploring TerracottaExploring Terracotta
Exploring Terracotta
Alex Miller
 
Jboye slides-27-02-2013
Jboye slides-27-02-2013Jboye slides-27-02-2013
Jboye slides-27-02-2013
Torben Rimmer
 
CloudKit
CloudKitCloudKit
CloudKit
Jon Crosby
 
More Secrets of JavaScript Libraries
More Secrets of JavaScript LibrariesMore Secrets of JavaScript Libraries
More Secrets of JavaScript Libraries
jeresig
 
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
Andy 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 JavaScript
jeresig
 
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
 
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
 
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
 
A Modern Approach to Performance Monitoring
A Modern Approach to Performance MonitoringA Modern Approach to Performance Monitoring
A Modern Approach to Performance Monitoring
Cliff 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 Monitoring
Akamai Technologies
 
Rail Performance in the Cloud - Opening
Rail Performance in the Cloud - OpeningRail Performance in the Cloud - Opening
Rail Performance in the Cloud - Opening
Engine Yard
 

Similar to 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?)
 
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?)
 
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?)
 
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
 

More from 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 2018
Andy 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 - 2018
Andy 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 2018
Andy 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-20
Andy Davies
 
Speed: The 'Forgotten' Conversion Factor
Speed: The 'Forgotten' Conversion FactorSpeed: The 'Forgotten' Conversion Factor
Speed: The 'Forgotten' Conversion Factor
Andy 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 2016
Andy 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 2016
Andy 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 2016
Andy Davies
 
Building an Appier Web - May 2016
Building an Appier Web - May 2016Building an Appier Web - May 2016
Building an Appier Web - May 2016
Andy 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 2016
Andy 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 - Stockholm
Andy Davies
 
Making Mobile Sites Faster
Making Mobile Sites FasterMaking Mobile Sites Faster
Making Mobile Sites Faster
Andy 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 2015
Andy 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/2
Andy Davies
 
HTTP2 is Here!
HTTP2 is Here!HTTP2 is Here!
HTTP2 is Here!
Andy Davies
 
Speed Matters!
Speed Matters!Speed Matters!
Speed Matters!
Andy 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 Experience
Andy Davies
 

More from 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
 

Recently uploaded

Using LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and MilvusUsing LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and Milvus
Zilliz
 
Opencast Summit 2024 — Opencast @ University of Münster
Opencast Summit 2024 — Opencast @ University of MünsterOpencast Summit 2024 — Opencast @ University of Münster
Opencast Summit 2024 — Opencast @ University of Münster
Matthias Neugebauer
 
How UiPath Discovery Suite supports identification of Agentic Process Automat...
How UiPath Discovery Suite supports identification of Agentic Process Automat...How UiPath Discovery Suite supports identification of Agentic Process Automat...
How UiPath Discovery Suite supports identification of Agentic Process Automat...
DianaGray10
 
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptxUse Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
SynapseIndia
 
Communications Mining Series - Zero to Hero - Session 3
Communications Mining Series - Zero to Hero - Session 3Communications Mining Series - Zero to Hero - Session 3
Communications Mining Series - Zero to Hero - Session 3
DianaGray10
 
Camunda Chapter NY Meetup July 2024.pptx
Camunda Chapter NY Meetup July 2024.pptxCamunda Chapter NY Meetup July 2024.pptx
Camunda Chapter NY Meetup July 2024.pptx
ZachWylie3
 
Zaitechno Handheld Raman Spectrometer.pdf
Zaitechno Handheld Raman Spectrometer.pdfZaitechno Handheld Raman Spectrometer.pdf
Zaitechno Handheld Raman Spectrometer.pdf
AmandaCheung15
 
kk vathada _digital transformation frameworks_2024.pdf
kk vathada _digital transformation frameworks_2024.pdfkk vathada _digital transformation frameworks_2024.pdf
kk vathada _digital transformation frameworks_2024.pdf
KIRAN KV
 
Generative AI Reasoning Tech Talk - July 2024
Generative AI Reasoning Tech Talk - July 2024Generative AI Reasoning Tech Talk - July 2024
Generative AI Reasoning Tech Talk - July 2024
siddu769252
 
Mastering OnlyFans Clone App Development: Key Strategies for Success
Mastering OnlyFans Clone App Development: Key Strategies for SuccessMastering OnlyFans Clone App Development: Key Strategies for Success
Mastering OnlyFans Clone App Development: Key Strategies for Success
David Wilson
 
leewayhertz.com-Generative AI tech stack Frameworks infrastructure models and...
leewayhertz.com-Generative AI tech stack Frameworks infrastructure models and...leewayhertz.com-Generative AI tech stack Frameworks infrastructure models and...
leewayhertz.com-Generative AI tech stack Frameworks infrastructure models and...
alexjohnson7307
 
Integrating Kafka with MuleSoft 4 and usecase
Integrating Kafka with MuleSoft 4 and usecaseIntegrating Kafka with MuleSoft 4 and usecase
Integrating Kafka with MuleSoft 4 and usecase
shyamraj55
 
Feature sql server terbaru performance.pptx
Feature sql server terbaru performance.pptxFeature sql server terbaru performance.pptx
Feature sql server terbaru performance.pptx
ssuser1915fe1
 
Vulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive OverviewVulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive Overview
Steven Carlson
 
Uncharted Together- Navigating AI's New Frontiers in Libraries
Uncharted Together- Navigating AI's New Frontiers in LibrariesUncharted Together- Navigating AI's New Frontiers in Libraries
Uncharted Together- Navigating AI's New Frontiers in Libraries
Brian Pichman
 
Retrieval Augmented Generation Evaluation with Ragas
Retrieval Augmented Generation Evaluation with RagasRetrieval Augmented Generation Evaluation with Ragas
Retrieval Augmented Generation Evaluation with Ragas
Zilliz
 
Computer HARDWARE presenattion by CWD students class 10
Computer HARDWARE presenattion by CWD students class 10Computer HARDWARE presenattion by CWD students class 10
Computer HARDWARE presenattion by CWD students class 10
ankush9927
 
LeadMagnet IQ Review: Unlock the Secret to Effortless Traffic and Leads.pdf
LeadMagnet IQ Review:  Unlock the Secret to Effortless Traffic and Leads.pdfLeadMagnet IQ Review:  Unlock the Secret to Effortless Traffic and Leads.pdf
LeadMagnet IQ Review: Unlock the Secret to Effortless Traffic and Leads.pdf
SelfMade bd
 
Step-By-Step Process to Develop a Mobile App From Scratch
Step-By-Step Process to Develop a Mobile App From ScratchStep-By-Step Process to Develop a Mobile App From Scratch
Step-By-Step Process to Develop a Mobile App From Scratch
softsuave
 
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
alexjohnson7307
 

Recently uploaded (20)

Using LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and MilvusUsing LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and Milvus
 
Opencast Summit 2024 — Opencast @ University of Münster
Opencast Summit 2024 — Opencast @ University of MünsterOpencast Summit 2024 — Opencast @ University of Münster
Opencast Summit 2024 — Opencast @ University of Münster
 
How UiPath Discovery Suite supports identification of Agentic Process Automat...
How UiPath Discovery Suite supports identification of Agentic Process Automat...How UiPath Discovery Suite supports identification of Agentic Process Automat...
How UiPath Discovery Suite supports identification of Agentic Process Automat...
 
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptxUse Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
 
Communications Mining Series - Zero to Hero - Session 3
Communications Mining Series - Zero to Hero - Session 3Communications Mining Series - Zero to Hero - Session 3
Communications Mining Series - Zero to Hero - Session 3
 
Camunda Chapter NY Meetup July 2024.pptx
Camunda Chapter NY Meetup July 2024.pptxCamunda Chapter NY Meetup July 2024.pptx
Camunda Chapter NY Meetup July 2024.pptx
 
Zaitechno Handheld Raman Spectrometer.pdf
Zaitechno Handheld Raman Spectrometer.pdfZaitechno Handheld Raman Spectrometer.pdf
Zaitechno Handheld Raman Spectrometer.pdf
 
kk vathada _digital transformation frameworks_2024.pdf
kk vathada _digital transformation frameworks_2024.pdfkk vathada _digital transformation frameworks_2024.pdf
kk vathada _digital transformation frameworks_2024.pdf
 
Generative AI Reasoning Tech Talk - July 2024
Generative AI Reasoning Tech Talk - July 2024Generative AI Reasoning Tech Talk - July 2024
Generative AI Reasoning Tech Talk - July 2024
 
Mastering OnlyFans Clone App Development: Key Strategies for Success
Mastering OnlyFans Clone App Development: Key Strategies for SuccessMastering OnlyFans Clone App Development: Key Strategies for Success
Mastering OnlyFans Clone App Development: Key Strategies for Success
 
leewayhertz.com-Generative AI tech stack Frameworks infrastructure models and...
leewayhertz.com-Generative AI tech stack Frameworks infrastructure models and...leewayhertz.com-Generative AI tech stack Frameworks infrastructure models and...
leewayhertz.com-Generative AI tech stack Frameworks infrastructure models and...
 
Integrating Kafka with MuleSoft 4 and usecase
Integrating Kafka with MuleSoft 4 and usecaseIntegrating Kafka with MuleSoft 4 and usecase
Integrating Kafka with MuleSoft 4 and usecase
 
Feature sql server terbaru performance.pptx
Feature sql server terbaru performance.pptxFeature sql server terbaru performance.pptx
Feature sql server terbaru performance.pptx
 
Vulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive OverviewVulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive Overview
 
Uncharted Together- Navigating AI's New Frontiers in Libraries
Uncharted Together- Navigating AI's New Frontiers in LibrariesUncharted Together- Navigating AI's New Frontiers in Libraries
Uncharted Together- Navigating AI's New Frontiers in Libraries
 
Retrieval Augmented Generation Evaluation with Ragas
Retrieval Augmented Generation Evaluation with RagasRetrieval Augmented Generation Evaluation with Ragas
Retrieval Augmented Generation Evaluation with Ragas
 
Computer HARDWARE presenattion by CWD students class 10
Computer HARDWARE presenattion by CWD students class 10Computer HARDWARE presenattion by CWD students class 10
Computer HARDWARE presenattion by CWD students class 10
 
LeadMagnet IQ Review: Unlock the Secret to Effortless Traffic and Leads.pdf
LeadMagnet IQ Review:  Unlock the Secret to Effortless Traffic and Leads.pdfLeadMagnet IQ Review:  Unlock the Secret to Effortless Traffic and Leads.pdf
LeadMagnet IQ Review: Unlock the Secret to Effortless Traffic and Leads.pdf
 
Step-By-Step Process to Develop a Mobile App From Scratch
Step-By-Step Process to Develop a Mobile App From ScratchStep-By-Step Process to Develop a Mobile App From Scratch
Step-By-Step Process to Develop a Mobile App From Scratch
 
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
 

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