SlideShare a Scribd company logo
Speed is Essential for a
Great Web Experience

@andydavies




#CanvasConf
Sep 2012
                           http://www.flickr.com/photos/barkaway/342359810
But sometimes other concerns take priority...




                            http://www.flickr.com/photos/randomidea/247994072
“Are we there yet?”


                      http://www.flickr.com/photos/sharynmorrow/643126727
Our perception of response time

  Instant

       Seamless                                                           Yawn!




100ms 1s                                                                 10s

            3s - Recommended         7s - Fortune 500
                 Load Time            Average (2010)


                          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...
Measure Real Users’ Experience

                         27%

                                                     24% of visitors          24%

                                                    waited over 10s
Visitors (%)




                               13%



                    8%               8%
               6%                              6%

                                                               3%   3%
                                                          2%
                                                                         1%

               1    2    3     4     5         6          7    8    9    10   > 10
                                          Load Time (s)
Measuring Real Users - Google Analytics




Relies on Navigation Timing API, can add extra timing calls to page
Measuring Real Users - LogNormal
Measuring Real Users - Torbit Insight
Measuring Real Users - New Relic
webpagetest.org
Waterfall for bbc.co.uk/news
mobitest.akamai.com
Bigger, Faster Servers?


                          http://www.flickr.com/photos/br1dotcom/4297736794
80% plus 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.25          2.5                3.75                5

                              Measured on residential ADSL line using Chrome 19
Fix slow server responses first




    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)
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
Going Faster…




                http://www.flickr.com/photos/mikebaird/2464769129/
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>


 * Bryan and Stephanie Rieger’s major and minor breakpoint approach requires multiple CSS files
Load remaining Javascript late as possible


        .
        .
        .

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

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


            Could you defer some JS until after onload?
Squash text based content - gzip / minify

                              http://www.flickr.com/photos/evdg/298415813
Images are 64% of an ‘average’ web page




                        http://www.flickr.com/photos/zaprittsky/4520788183/
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


 Watch SVG - may not always be smaller than bitmap!
Re-use TCP Connections via HTTP Keep-Alive



                               Orange segments
                             are TCP connections
                              being (re-) opened
news.bbcimg.co.uk
                        static.bbc.co.uk




Increase number of parallel downloads
Sometimes... The Waterfall of Doom!




                  2 seconds! (nearly)
Reduce number of HTTP requests
Cache resources that don’t change ‘often’ forever




(use versions to replace)
                                http://www.flickr.com/photos/sterlingely/64228609
Redirects - necessary but waste time…


                                  Why 2 redirects?




   Expensive over mobile networks due to latency
The Perils of Third Party Javascript...



     “Virgin Media Broadband ISP Users
     Affected by Website Routing Woes”
                      ISP Review, May 26, 2012




     cg-global.maxymiser.com unreachable
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>




 async attribute may be option but not supported by IE & Opera
Argh... My brain hurts!
                     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
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

What's hot

The Need For Speed
The Need For SpeedThe Need For Speed
The Need For Speed
Andy Davies
 
Web Performance in the Age of HTTP2 - Topconf Tallinn 2016 - Holger Bartel
Web Performance in the Age of HTTP2 - Topconf Tallinn 2016 - Holger BartelWeb Performance in the Age of HTTP2 - Topconf Tallinn 2016 - Holger Bartel
Web Performance in the Age of HTTP2 - Topconf Tallinn 2016 - Holger Bartel
Holger Bartel
 
Speed Matters!
Speed Matters!Speed Matters!
Speed Matters!
Andy Davies
 
Web Performance 101
Web Performance 101Web Performance 101
Web Performance 101
Uri Lavi
 
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
Digicure ApS
 
How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...
How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...
How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...
David Kaneda
 
Snakes on the Web
Snakes on the WebSnakes on the Web
Snakes on the Web
Jacob Kaplan-Moss
 
When Ajax Attacks! Web application security fundamentals
When Ajax Attacks! Web application security fundamentalsWhen Ajax Attacks! Web application security fundamentals
When Ajax Attacks! Web application security fundamentals
Simon Willison
 
[cssdevconf] Adaptive Images in Responsive Web Design
[cssdevconf] Adaptive Images in Responsive Web Design[cssdevconf] Adaptive Images in Responsive Web Design
[cssdevconf] Adaptive Images in Responsive Web Design
Christopher Schmitt
 
API Best Practices
API Best PracticesAPI Best Practices
API Best Practices
Uri Lavi
 
Cache is King
Cache is KingCache is King
Cache is King
Steve Souders
 
Build Better Responsive websites. Hrvoje Jurišić
Build Better Responsive websites. Hrvoje JurišićBuild Better Responsive websites. Hrvoje Jurišić
Build Better Responsive websites. Hrvoje Jurišić
MeetMagentoNY2014
 
How fast are we going now?
How fast are we going now?How fast are we going now?
How fast are we going now?
Steve Souders
 
The HTML5 WebSocket API
The HTML5 WebSocket APIThe HTML5 WebSocket API
The HTML5 WebSocket API
David Lindkvist
 
Speed Index, explained!
Speed Index, explained!Speed Index, explained!
Speed Index, explained!
Stefan Baumgartner
 
implement lighthouse-ci with your web development workflow
implement lighthouse-ci with your web development workflowimplement lighthouse-ci with your web development workflow
implement lighthouse-ci with your web development workflow
WordPress
 
Don't make me wait! or Building High-Performance Web Applications
Don't make me wait! or Building High-Performance Web ApplicationsDon't make me wait! or Building High-Performance Web Applications
Don't make me wait! or Building High-Performance Web Applications
Stoyan Stefanov
 
Website performance optimisation
Website performance optimisationWebsite performance optimisation
Website performance optimisation
Webstock
 
[wvbcn] Adaptive Images in Responsive Web Design
[wvbcn] Adaptive Images in Responsive Web Design[wvbcn] Adaptive Images in Responsive Web Design
[wvbcn] Adaptive Images in Responsive Web Design
Christopher Schmitt
 
HTML5 WebSocket Introduction
HTML5 WebSocket IntroductionHTML5 WebSocket Introduction
HTML5 WebSocket Introduction
Marcelo Jabali
 

What's hot (20)

The Need For Speed
The Need For SpeedThe Need For Speed
The Need For Speed
 
Web Performance in the Age of HTTP2 - Topconf Tallinn 2016 - Holger Bartel
Web Performance in the Age of HTTP2 - Topconf Tallinn 2016 - Holger BartelWeb Performance in the Age of HTTP2 - Topconf Tallinn 2016 - Holger Bartel
Web Performance in the Age of HTTP2 - Topconf Tallinn 2016 - Holger Bartel
 
Speed Matters!
Speed Matters!Speed Matters!
Speed Matters!
 
Web Performance 101
Web Performance 101Web Performance 101
Web Performance 101
 
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
 
How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...
How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...
How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...
 
Snakes on the Web
Snakes on the WebSnakes on the Web
Snakes on the Web
 
When Ajax Attacks! Web application security fundamentals
When Ajax Attacks! Web application security fundamentalsWhen Ajax Attacks! Web application security fundamentals
When Ajax Attacks! Web application security fundamentals
 
[cssdevconf] Adaptive Images in Responsive Web Design
[cssdevconf] Adaptive Images in Responsive Web Design[cssdevconf] Adaptive Images in Responsive Web Design
[cssdevconf] Adaptive Images in Responsive Web Design
 
API Best Practices
API Best PracticesAPI Best Practices
API Best Practices
 
Cache is King
Cache is KingCache is King
Cache is King
 
Build Better Responsive websites. Hrvoje Jurišić
Build Better Responsive websites. Hrvoje JurišićBuild Better Responsive websites. Hrvoje Jurišić
Build Better Responsive websites. Hrvoje Jurišić
 
How fast are we going now?
How fast are we going now?How fast are we going now?
How fast are we going now?
 
The HTML5 WebSocket API
The HTML5 WebSocket APIThe HTML5 WebSocket API
The HTML5 WebSocket API
 
Speed Index, explained!
Speed Index, explained!Speed Index, explained!
Speed Index, explained!
 
implement lighthouse-ci with your web development workflow
implement lighthouse-ci with your web development workflowimplement lighthouse-ci with your web development workflow
implement lighthouse-ci with your web development workflow
 
Don't make me wait! or Building High-Performance Web Applications
Don't make me wait! or Building High-Performance Web ApplicationsDon't make me wait! or Building High-Performance Web Applications
Don't make me wait! or Building High-Performance Web Applications
 
Website performance optimisation
Website performance optimisationWebsite performance optimisation
Website performance optimisation
 
[wvbcn] Adaptive Images in Responsive Web Design
[wvbcn] Adaptive Images in Responsive Web Design[wvbcn] Adaptive Images in Responsive Web Design
[wvbcn] Adaptive Images in Responsive Web Design
 
HTML5 WebSocket Introduction
HTML5 WebSocket IntroductionHTML5 WebSocket Introduction
HTML5 WebSocket Introduction
 

Similar to Speed is Essential for a Great Web Experience (Canvas Conf Version)

Web Performance 101 - Gil Givati
Web Performance 101 - Gil GivatiWeb Performance 101 - Gil Givati
Web Performance 101 - Gil Givati
Mika Josting
 
Mobile web performance dwx13
Mobile web performance dwx13Mobile web performance dwx13
Mobile web performance dwx13
Avenga Germany GmbH
 
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
 
Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)
Nicholas Zakas
 
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Nicholas Zakas
 
Raiders of the Fast Start: Frontend Performance Archaeology PerfmattersConf 2018
Raiders of the Fast Start: Frontend Performance Archaeology PerfmattersConf 2018Raiders of the Fast Start: Frontend Performance Archaeology PerfmattersConf 2018
Raiders of the Fast Start: Frontend Performance Archaeology PerfmattersConf 2018
Katie Sylor-Miller
 
[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design
Christopher Schmitt
 
Understanding HTTP & Web Performance
Understanding HTTP & Web PerformanceUnderstanding HTTP & Web Performance
Understanding HTTP & Web Performance
FITC
 
Stefan Judis "Did we(b development) lose the right direction?"
Stefan Judis "Did we(b development) lose the right direction?"Stefan Judis "Did we(b development) lose the right direction?"
Stefan Judis "Did we(b development) lose the right direction?"
Fwdays
 
WebPerformance: Why and How? – Stefan Wintermeyer
WebPerformance: Why and How? – Stefan WintermeyerWebPerformance: Why and How? – Stefan Wintermeyer
WebPerformance: Why and How? – Stefan Wintermeyer
Elixir Club
 
Analyzing the Performance of Mobile Web
Analyzing the Performance of Mobile WebAnalyzing the Performance of Mobile Web
Analyzing the Performance of Mobile Web
Ariya Hidayat
 
JavaScript front end performance optimizations
JavaScript front end performance optimizationsJavaScript front end performance optimizations
JavaScript front end performance optimizations
Chris Love
 
Mobile First Responsive Design
Mobile First Responsive DesignMobile First Responsive Design
Mobile First Responsive Design
Jason Grigsby
 
Cvcc performance tuning
Cvcc performance tuningCvcc performance tuning
Cvcc performance tuning
John McCaffrey
 
Changhao jiang facebook
Changhao jiang facebookChanghao jiang facebook
Changhao jiang facebook
zipeng zhang
 
Server rendering-talk
Server rendering-talkServer rendering-talk
Server rendering-talk
Daiwei Lu
 
[refreshaustin] Adaptive Images in Responsive Web Design
[refreshaustin] Adaptive Images in Responsive Web Design[refreshaustin] Adaptive Images in Responsive Web Design
[refreshaustin] Adaptive Images in Responsive Web Design
Christopher Schmitt
 
Http/2 - What's it all about?
Http/2  - What's it all about?Http/2  - What's it all about?
Http/2 - What's it all about?
Andy Davies
 
NU Web Steering Committee - Oct 11 - Web Performance
NU Web Steering Committee - Oct 11 - Web PerformanceNU Web Steering Committee - Oct 11 - Web Performance
NU Web Steering Committee - Oct 11 - Web Performance
Lee Roberson
 
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps FasterPractical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster
Doris Chen
 

Similar to Speed is Essential for a Great Web Experience (Canvas Conf Version) (20)

Web Performance 101 - Gil Givati
Web Performance 101 - Gil GivatiWeb Performance 101 - Gil Givati
Web Performance 101 - Gil Givati
 
Mobile web performance dwx13
Mobile web performance dwx13Mobile web performance dwx13
Mobile web performance dwx13
 
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
 
Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)
 
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
 
Raiders of the Fast Start: Frontend Performance Archaeology PerfmattersConf 2018
Raiders of the Fast Start: Frontend Performance Archaeology PerfmattersConf 2018Raiders of the Fast Start: Frontend Performance Archaeology PerfmattersConf 2018
Raiders of the Fast Start: Frontend Performance Archaeology PerfmattersConf 2018
 
[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design
 
Understanding HTTP & Web Performance
Understanding HTTP & Web PerformanceUnderstanding HTTP & Web Performance
Understanding HTTP & Web Performance
 
Stefan Judis "Did we(b development) lose the right direction?"
Stefan Judis "Did we(b development) lose the right direction?"Stefan Judis "Did we(b development) lose the right direction?"
Stefan Judis "Did we(b development) lose the right direction?"
 
WebPerformance: Why and How? – Stefan Wintermeyer
WebPerformance: Why and How? – Stefan WintermeyerWebPerformance: Why and How? – Stefan Wintermeyer
WebPerformance: Why and How? – Stefan Wintermeyer
 
Analyzing the Performance of Mobile Web
Analyzing the Performance of Mobile WebAnalyzing the Performance of Mobile Web
Analyzing the Performance of Mobile Web
 
JavaScript front end performance optimizations
JavaScript front end performance optimizationsJavaScript front end performance optimizations
JavaScript front end performance optimizations
 
Mobile First Responsive Design
Mobile First Responsive DesignMobile First Responsive Design
Mobile First Responsive Design
 
Cvcc performance tuning
Cvcc performance tuningCvcc performance tuning
Cvcc performance tuning
 
Changhao jiang facebook
Changhao jiang facebookChanghao jiang facebook
Changhao jiang facebook
 
Server rendering-talk
Server rendering-talkServer rendering-talk
Server rendering-talk
 
[refreshaustin] Adaptive Images in Responsive Web Design
[refreshaustin] Adaptive Images in Responsive Web Design[refreshaustin] Adaptive Images in Responsive Web Design
[refreshaustin] Adaptive Images in Responsive Web Design
 
Http/2 - What's it all about?
Http/2  - What's it all about?Http/2  - What's it all about?
Http/2 - What's it all about?
 
NU Web Steering Committee - Oct 11 - Web Performance
NU Web Steering Committee - Oct 11 - Web PerformanceNU Web Steering Committee - Oct 11 - Web Performance
NU Web Steering Committee - Oct 11 - Web Performance
 
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps FasterPractical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster
 

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
 
The web is too slow
The web is too slow The web is too slow
The web is too slow
Andy Davies
 
What does the browser pre-loader do?
What does the browser pre-loader do?What does the browser pre-loader do?
What does the browser pre-loader do?
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!
 
The web is too slow
The web is too slow The web is too slow
The web is too slow
 
What does the browser pre-loader do?
What does the browser pre-loader do?What does the browser pre-loader do?
What does the browser pre-loader do?
 

Recently uploaded

Google I/O Extended Harare Merged Slides
Google I/O Extended Harare Merged SlidesGoogle I/O Extended Harare Merged Slides
Google I/O Extended Harare Merged Slides
Google Developer Group - Harare
 
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdfAcumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
BrainSell Technologies
 
IPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite SolutionIPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite Solution
IPLOOK Networks
 
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
 
Sonkoloniya documentation - ONEprojukti.pdf
Sonkoloniya documentation - ONEprojukti.pdfSonkoloniya documentation - ONEprojukti.pdf
Sonkoloniya documentation - ONEprojukti.pdf
SubhamMandal40
 
Vulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive OverviewVulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive Overview
Steven Carlson
 
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
 
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes..."Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
Anant Gupta
 
Connector Corner: Leveraging Snowflake Integration for Smarter Decision Making
Connector Corner: Leveraging Snowflake Integration for Smarter Decision MakingConnector Corner: Leveraging Snowflake Integration for Smarter Decision Making
Connector Corner: Leveraging Snowflake Integration for Smarter Decision Making
DianaGray10
 
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
 
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
Muhammad Ali
 
Tailored CRM Software Development for Enhanced Customer Insights
Tailored CRM Software Development for Enhanced Customer InsightsTailored CRM Software Development for Enhanced Customer Insights
Tailored CRM Software Development for Enhanced Customer Insights
SynapseIndia
 
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
 
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python CodebaseEuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
Jimmy Lai
 
The importance of Quality Assurance for ICT Standardization
The importance of Quality Assurance for ICT StandardizationThe importance of Quality Assurance for ICT Standardization
The importance of Quality Assurance for ICT Standardization
Axel Rennoch
 
What's new in android: jetpack compose 2024
What's new in android: jetpack compose 2024What's new in android: jetpack compose 2024
What's new in android: jetpack compose 2024
Toru Wonyoung Choi
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
Tatiana Al-Chueyr
 
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
 
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
sunilverma7884
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
Adam Dunkels
 

Recently uploaded (20)

Google I/O Extended Harare Merged Slides
Google I/O Extended Harare Merged SlidesGoogle I/O Extended Harare Merged Slides
Google I/O Extended Harare Merged Slides
 
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdfAcumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
 
IPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite SolutionIPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite Solution
 
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
 
Sonkoloniya documentation - ONEprojukti.pdf
Sonkoloniya documentation - ONEprojukti.pdfSonkoloniya documentation - ONEprojukti.pdf
Sonkoloniya documentation - ONEprojukti.pdf
 
Vulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive OverviewVulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive Overview
 
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
 
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes..."Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
 
Connector Corner: Leveraging Snowflake Integration for Smarter Decision Making
Connector Corner: Leveraging Snowflake Integration for Smarter Decision MakingConnector Corner: Leveraging Snowflake Integration for Smarter Decision Making
Connector Corner: Leveraging Snowflake Integration for Smarter Decision Making
 
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
 
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
 
Tailored CRM Software Development for Enhanced Customer Insights
Tailored CRM Software Development for Enhanced Customer InsightsTailored CRM Software Development for Enhanced Customer Insights
Tailored CRM Software Development for Enhanced Customer Insights
 
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
 
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python CodebaseEuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
 
The importance of Quality Assurance for ICT Standardization
The importance of Quality Assurance for ICT StandardizationThe importance of Quality Assurance for ICT Standardization
The importance of Quality Assurance for ICT Standardization
 
What's new in android: jetpack compose 2024
What's new in android: jetpack compose 2024What's new in android: jetpack compose 2024
What's new in android: jetpack compose 2024
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
 
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
 
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
 

Speed is Essential for a Great Web Experience (Canvas Conf Version)

  • 1. Speed is Essential for a Great Web Experience @andydavies #CanvasConf Sep 2012 http://www.flickr.com/photos/barkaway/342359810
  • 2. But sometimes other concerns take priority... http://www.flickr.com/photos/randomidea/247994072
  • 3. “Are we there yet?” http://www.flickr.com/photos/sharynmorrow/643126727
  • 4. Our perception of response time Instant Seamless Yawn! 100ms 1s 10s 3s - Recommended 7s - Fortune 500 Load Time Average (2010) 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
  • 11. Measure Real Users’ Experience 27% 24% of visitors 24% waited over 10s Visitors (%) 13% 8% 8% 6% 6% 3% 3% 2% 1% 1 2 3 4 5 6 7 8 9 10 > 10 Load Time (s)
  • 12. Measuring Real Users - Google Analytics Relies on Navigation Timing API, can add extra timing calls to page
  • 13. Measuring Real Users - LogNormal
  • 14. Measuring Real Users - Torbit Insight
  • 15. Measuring Real Users - New Relic
  • 19. Bigger, Faster Servers? http://www.flickr.com/photos/br1dotcom/4297736794
  • 20. 80% plus 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.25 2.5 3.75 5 Measured on residential ADSL line using Chrome 19
  • 21. Fix slow server responses first 4 seconds!
  • 22. 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)
  • 23. 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
  • 24. Going Faster… http://www.flickr.com/photos/mikebaird/2464769129/
  • 25. 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> * Bryan and Stephanie Rieger’s major and minor breakpoint approach requires multiple CSS files
  • 26. Load remaining Javascript late as possible . . . <script src="restofscript.js"></script> </body> </html> One file or many? (Depends on size) Could you defer some JS until after onload?
  • 27. Squash text based content - gzip / minify http://www.flickr.com/photos/evdg/298415813
  • 28. Images are 64% of an ‘average’ web page http://www.flickr.com/photos/zaprittsky/4520788183/
  • 29. Bitmapped Images JPEG PNG GIF Optimise, Optimise, Optimise! (jpegmini, pngmini, Smush.it, ImageOptim, Gifsicle etc.)
  • 30. New Devices, New Challenges... 2 x Resolution = 4 x Pixels! http://www.flickr.com/photos/roopaw/6985954465
  • 31. Some Alternatives CSS SVG Fonts Watch SVG - may not always be smaller than bitmap!
  • 32. Re-use TCP Connections via HTTP Keep-Alive Orange segments are TCP connections being (re-) opened
  • 33. news.bbcimg.co.uk static.bbc.co.uk Increase number of parallel downloads
  • 34. Sometimes... The Waterfall of Doom! 2 seconds! (nearly)
  • 35. Reduce number of HTTP requests
  • 36. Cache resources that don’t change ‘often’ forever (use versions to replace) http://www.flickr.com/photos/sterlingely/64228609
  • 37. Redirects - necessary but waste time… Why 2 redirects? Expensive over mobile networks due to latency
  • 38. The Perils of Third Party Javascript... “Virgin Media Broadband ISP Users Affected by Website Routing Woes” ISP Review, May 26, 2012 cg-global.maxymiser.com unreachable
  • 39. Impact on The Telegraph… Same issue affected many other sites http://bit.ly/Ncy7Rd
  • 40. 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> async attribute may be option but not supported by IE & Opera
  • 41. Argh... My brain hurts! http://www.flickr.com/photos/corneveaux/3248566797
  • 42. Don’t have to do it all by hand http://www.flickr.com/photos/simeon_barkas/2557059247
  • 43. Performance isn’t just for Christmas Measure Optimise Analyse
  • 45. @andydavies andy@asteno.com http://www.slideshare.net/andydavies http://www.flickr.com/photos/auntiep/5024494612
  • 46. Credits All photographs copyright original owners on flickr.com Following pictograms courtesy of The Noun Project