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

@andydavies




Port 80 (#p80N)
May 2012
                           http://www.flickr.com/photos/44442915@N00/5214810596
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




                  Response Time in Man-computer Conversational Transactions
                                                     Robert B. Miller, 1968
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
Google conducted an experiment




 +400ms                     -0.6%
Bing did some experiments too




     +1s
                          $/    - 2.8%
                                         +
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%
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 - Torbit Insight
Measuring Real Users - Torbit Insight




                    (Check out at Log Normal too)
Measuring Real Users - New Relic
webpagetest.org
Waterfall for bbc.co.uk/news
www.blaze.io/mobile
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 artifact 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
Speeding Things Up - The Basics


                              CSS at top

                              Compress
                              Consilidate
                              Minify
                              Reduce Requests
                              Cache Forever

                                  JS at bottom
Proportion of URLs that can be compressed




          ☺
                                          ☹
            http://zoompf.com/blog/2012/05/http-compression-use-by-alexa-top-1000
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.)
CSS Sprites




                    +
       background-position: -408px 0;
       width: 128px;
       height: 128px;

                    =
Data-URIs


<img width="128" height="128"
src="data:image/PNG;base64,
iVBORw0KGgoAAAANSUhEUgAAAIAA

            ...                          =
GAA39eV7u4AAAAAElFTkSuQ" />




            Should be served with GZIP
New Devices, New Challenges...




                2 x Resolution = 4 x Pixels!

                           http://www.flickr.com/photos/roopaw/6985954465
Look Ma, No Images!


border-radius: 20px;




background: linear-gradient(left, #f06, #ff0);




   Watch mobile performance. Remember vendor prefixes!
Vector Graphics FTW?




          SVG: 12 KB vs PNG: 86KB
What about icon / pictogram fonts?



                                  &#x2605; ★
                                  &#x2606; ☆
                                  &#x2665; ♥
                                  &#x2601; ☁

       Heydings by Heydon Works   “Bog Standard Font”
display:none - still downloads images



     “‪#p80n‬ you do get adverts on the smashingmag
       site on smaller viewports. They just hideously
       display:none; so you still down load them :-/”


                                         @sturobson
                                     ‬
Don’t forget about favicon.ico


        1.4 seconds for favicon!
Don’t forget about favicon.ico


           1.4 seconds for favicon!




 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
 lang="en">
 <head>
     <meta http-equiv="Content-Type" content="text/html;
 charset=utf-8" />
Don’t block the browser...




                             http://www.flickr.com/photos/barteko/6128499314
news.bbcimg.co.uk
                         static.bbc.co.uk




Browsers can download resources in parallel
But Sometimes... The Waterfall of Doom!




                  2 seconds! (nearly)
Social buttons break...




                          http://bit.ly/yRjX63
Social buttons break...




                          http://bit.ly/yRjX63
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>
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

Triggers in SQL | Edureka
Triggers in SQL | EdurekaTriggers in SQL | Edureka
Triggers in SQL | EdurekaEdureka!
 
Installation guide for mysql in windows
Installation guide for mysql in windowsInstallation guide for mysql in windows
Installation guide for mysql in windowssharavanakumar10
 
08 Dynamic SQL and Metadata
08 Dynamic SQL and Metadata08 Dynamic SQL and Metadata
08 Dynamic SQL and Metadatarehaniltifat
 
Windows Server 2012 Managing Active Directory Domain
Windows Server 2012 Managing  Active Directory DomainWindows Server 2012 Managing  Active Directory Domain
Windows Server 2012 Managing Active Directory DomainNapoleon NV
 
Network and System Administration chapter 2
Network and System Administration chapter 2Network and System Administration chapter 2
Network and System Administration chapter 2IgguuMuude
 
MySQL Tutorial For Beginners | Relational Database Management System | MySQL ...
MySQL Tutorial For Beginners | Relational Database Management System | MySQL ...MySQL Tutorial For Beginners | Relational Database Management System | MySQL ...
MySQL Tutorial For Beginners | Relational Database Management System | MySQL ...Edureka!
 
Types of attributes (160210107054)
Types of attributes  (160210107054)Types of attributes  (160210107054)
Types of attributes (160210107054)ajay_483
 
Apex and Virtual Private Database
Apex and Virtual Private DatabaseApex and Virtual Private Database
Apex and Virtual Private DatabaseJeffrey Kemp
 
Manipulating Data Oracle Data base
Manipulating Data Oracle Data baseManipulating Data Oracle Data base
Manipulating Data Oracle Data baseSalman Memon
 
Introduction To WS-Policy
Introduction To WS-PolicyIntroduction To WS-Policy
Introduction To WS-PolicyHayati Guvence
 
Structured Query Language (SQL)
Structured Query Language (SQL)Structured Query Language (SQL)
Structured Query Language (SQL)Syed Hassan Ali
 
Windows Server 2008 Active Directory
Windows Server 2008 Active DirectoryWindows Server 2008 Active Directory
Windows Server 2008 Active Directoryanilinvns
 
Introduction to PostgreSQL
Introduction to PostgreSQLIntroduction to PostgreSQL
Introduction to PostgreSQLJoel Brewer
 
9. Object Relational Databases in DBMS
9. Object Relational Databases in DBMS9. Object Relational Databases in DBMS
9. Object Relational Databases in DBMSkoolkampus
 

What's hot (20)

Triggers in SQL | Edureka
Triggers in SQL | EdurekaTriggers in SQL | Edureka
Triggers in SQL | Edureka
 
Installation guide for mysql in windows
Installation guide for mysql in windowsInstallation guide for mysql in windows
Installation guide for mysql in windows
 
08 Dynamic SQL and Metadata
08 Dynamic SQL and Metadata08 Dynamic SQL and Metadata
08 Dynamic SQL and Metadata
 
Windows Server 2012 Managing Active Directory Domain
Windows Server 2012 Managing  Active Directory DomainWindows Server 2012 Managing  Active Directory Domain
Windows Server 2012 Managing Active Directory Domain
 
Database language
Database languageDatabase language
Database language
 
Network and System Administration chapter 2
Network and System Administration chapter 2Network and System Administration chapter 2
Network and System Administration chapter 2
 
Sql and Sql commands
Sql and Sql commandsSql and Sql commands
Sql and Sql commands
 
MySQL Tutorial For Beginners | Relational Database Management System | MySQL ...
MySQL Tutorial For Beginners | Relational Database Management System | MySQL ...MySQL Tutorial For Beginners | Relational Database Management System | MySQL ...
MySQL Tutorial For Beginners | Relational Database Management System | MySQL ...
 
Types of attributes (160210107054)
Types of attributes  (160210107054)Types of attributes  (160210107054)
Types of attributes (160210107054)
 
Apex and Virtual Private Database
Apex and Virtual Private DatabaseApex and Virtual Private Database
Apex and Virtual Private Database
 
Manipulating Data Oracle Data base
Manipulating Data Oracle Data baseManipulating Data Oracle Data base
Manipulating Data Oracle Data base
 
Introduction To WS-Policy
Introduction To WS-PolicyIntroduction To WS-Policy
Introduction To WS-Policy
 
MySQL ppt
MySQL ppt MySQL ppt
MySQL ppt
 
Oracle 10g Introduction 1
Oracle 10g Introduction 1Oracle 10g Introduction 1
Oracle 10g Introduction 1
 
Unit03 dbms
Unit03 dbmsUnit03 dbms
Unit03 dbms
 
Structured Query Language (SQL)
Structured Query Language (SQL)Structured Query Language (SQL)
Structured Query Language (SQL)
 
Windows Server 2008 Active Directory
Windows Server 2008 Active DirectoryWindows Server 2008 Active Directory
Windows Server 2008 Active Directory
 
SQL
SQLSQL
SQL
 
Introduction to PostgreSQL
Introduction to PostgreSQLIntroduction to PostgreSQL
Introduction to PostgreSQL
 
9. Object Relational Databases in DBMS
9. Object Relational Databases in DBMS9. Object Relational Databases in DBMS
9. Object Relational Databases in DBMS
 

Similar to Speed is Essential for a Great Web Experience

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
 
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 ExperienceDigicure ApS
 
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
 
Faster Frontends
Faster FrontendsFaster Frontends
Faster FrontendsAndy Davies
 
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 2018Katie Sylor-Miller
 
Web Performance 101
Web Performance 101Web Performance 101
Web Performance 101Uri Lavi
 
Web Performance 101 - Gil Givati
Web Performance 101 - Gil GivatiWeb Performance 101 - Gil Givati
Web Performance 101 - Gil GivatiMika Josting
 
Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...
Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...
Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...Katie Sylor-Miller
 
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
 
SpeedGeeks
SpeedGeeksSpeedGeeks
SpeedGeeksxlight
 
The web is too slow
The web is too slow The web is too slow
The web is too slow Andy Davies
 
Mobile First Responsive Design
Mobile First Responsive DesignMobile First Responsive Design
Mobile First Responsive DesignJason Grigsby
 
Its timetostopstalling barcelonajs
Its timetostopstalling barcelonajsIts timetostopstalling barcelonajs
Its timetostopstalling barcelonajsDoug Sillars
 
Speed Up Wordpress, Wordpress Horsepower
Speed Up Wordpress, Wordpress HorsepowerSpeed Up Wordpress, Wordpress Horsepower
Speed Up Wordpress, Wordpress HorsepowerRoss Johnson
 
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
 
Imagesandvideo stockholm webmeetup
Imagesandvideo stockholm webmeetupImagesandvideo stockholm webmeetup
Imagesandvideo stockholm webmeetupDoug Sillars
 

Similar to Speed is Essential for a Great Web Experience (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)
 
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
 
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?"
 
Faster Frontends
Faster FrontendsFaster Frontends
Faster Frontends
 
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
 
Web Performance 101
Web Performance 101Web Performance 101
Web Performance 101
 
Web Performance 101 - Gil Givati
Web Performance 101 - Gil GivatiWeb Performance 101 - Gil Givati
Web Performance 101 - Gil Givati
 
Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...
Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...
Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...
 
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
 
In Search of Speed
In Search of SpeedIn Search of Speed
In Search of Speed
 
SpeedGeeks
SpeedGeeksSpeedGeeks
SpeedGeeks
 
Faster web pages
Faster web pagesFaster web pages
Faster web pages
 
Speed Matters!
Speed Matters!Speed Matters!
Speed Matters!
 
The web is too slow
The web is too slow The web is too slow
The web is too slow
 
Mobile First Responsive Design
Mobile First Responsive DesignMobile First Responsive Design
Mobile First Responsive Design
 
Mobile web performance dwx13
Mobile web performance dwx13Mobile web performance dwx13
Mobile web performance dwx13
 
Its timetostopstalling barcelonajs
Its timetostopstalling barcelonajsIts timetostopstalling barcelonajs
Its timetostopstalling barcelonajs
 
Speed Up Wordpress, Wordpress Horsepower
Speed Up Wordpress, Wordpress HorsepowerSpeed Up Wordpress, Wordpress Horsepower
Speed Up Wordpress, Wordpress Horsepower
 
Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)
 
Imagesandvideo stockholm webmeetup
Imagesandvideo stockholm webmeetupImagesandvideo stockholm webmeetup
Imagesandvideo stockholm webmeetup
 

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 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
 
Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?
Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?
Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?Andy Davies
 
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
 

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!
 
Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?
Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?
Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?
 
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?
 

Recently uploaded

Attacking (and Defending) Apache Kafka | Kafka Summit London
Attacking (and Defending) Apache Kafka | Kafka Summit LondonAttacking (and Defending) Apache Kafka | Kafka Summit London
Attacking (and Defending) Apache Kafka | Kafka Summit LondonHostedbyConfluent
 
Fish Plays Pokemon | Kafka Summit London
Fish Plays Pokemon | Kafka Summit LondonFish Plays Pokemon | Kafka Summit London
Fish Plays Pokemon | Kafka Summit LondonHostedbyConfluent
 
Transcript: Book industry state of the nation 2024 - Tech Forum 2024
Transcript: Book industry state of the nation 2024 - Tech Forum 2024Transcript: Book industry state of the nation 2024 - Tech Forum 2024
Transcript: Book industry state of the nation 2024 - Tech Forum 2024BookNet Canada
 
Mastering Kafka Producer Configs: A Guide to Optimizing Performance
Mastering Kafka Producer Configs: A Guide to Optimizing PerformanceMastering Kafka Producer Configs: A Guide to Optimizing Performance
Mastering Kafka Producer Configs: A Guide to Optimizing PerformanceHostedbyConfluent
 
Building a Self-Service Stream Processing Portal: How And Why
Building a Self-Service Stream Processing Portal: How And WhyBuilding a Self-Service Stream Processing Portal: How And Why
Building a Self-Service Stream Processing Portal: How And WhyHostedbyConfluent
 
Book industry state of the nation 2024 - Tech Forum 2024
Book industry state of the nation 2024 - Tech Forum 2024Book industry state of the nation 2024 - Tech Forum 2024
Book industry state of the nation 2024 - Tech Forum 2024BookNet Canada
 
Transcript: Green paths: Learning from publishers’ sustainability journeys - ...
Transcript: Green paths: Learning from publishers’ sustainability journeys - ...Transcript: Green paths: Learning from publishers’ sustainability journeys - ...
Transcript: Green paths: Learning from publishers’ sustainability journeys - ...BookNet Canada
 
Which standard is best for your content?
Which standard is best for your content?Which standard is best for your content?
Which standard is best for your content?Rustici Software
 
#SCIT 2024 LatAm Delegation Overview + SPONSORSHIP.pdf
#SCIT 2024 LatAm Delegation Overview + SPONSORSHIP.pdf#SCIT 2024 LatAm Delegation Overview + SPONSORSHIP.pdf
#SCIT 2024 LatAm Delegation Overview + SPONSORSHIP.pdfREFASHIOND
 
Build Copilots on Streaming Data with Generative AI, Kafka Streams and Flink SQL
Build Copilots on Streaming Data with Generative AI, Kafka Streams and Flink SQLBuild Copilots on Streaming Data with Generative AI, Kafka Streams and Flink SQL
Build Copilots on Streaming Data with Generative AI, Kafka Streams and Flink SQLHostedbyConfluent
 
Modifying Your SQL Streaming Queries on the Fly: The Impossible Trinity
Modifying Your SQL Streaming Queries on the Fly: The Impossible TrinityModifying Your SQL Streaming Queries on the Fly: The Impossible Trinity
Modifying Your SQL Streaming Queries on the Fly: The Impossible TrinityHostedbyConfluent
 
Apache Kafka's Common Pitfalls & Intricacies: A Customer Support Perspective
Apache Kafka's Common Pitfalls & Intricacies: A Customer Support PerspectiveApache Kafka's Common Pitfalls & Intricacies: A Customer Support Perspective
Apache Kafka's Common Pitfalls & Intricacies: A Customer Support PerspectiveHostedbyConfluent
 
AsyncAPI v3: What’s New? | Kafka Summit London
AsyncAPI v3: What’s New? | Kafka Summit LondonAsyncAPI v3: What’s New? | Kafka Summit London
AsyncAPI v3: What’s New? | Kafka Summit LondonHostedbyConfluent
 
Error Handling with Kafka: From Patterns to Code
Error Handling with Kafka: From Patterns to CodeError Handling with Kafka: From Patterns to Code
Error Handling with Kafka: From Patterns to CodeHostedbyConfluent
 
Technology Governance & Migration In The AI Era
Technology Governance & Migration In The AI EraTechnology Governance & Migration In The AI Era
Technology Governance & Migration In The AI Era2toLead Limited
 
Automation Ops Series: Session 3 - Solutions management
Automation Ops Series: Session 3 - Solutions managementAutomation Ops Series: Session 3 - Solutions management
Automation Ops Series: Session 3 - Solutions managementDianaGray10
 
🎶🎵Bo-stream-ian Rhapsody: A Musical Demo of Kafka Connect and Kafka Streams 🎵🎶
🎶🎵Bo-stream-ian Rhapsody: A Musical Demo of Kafka Connect and Kafka Streams 🎵🎶🎶🎵Bo-stream-ian Rhapsody: A Musical Demo of Kafka Connect and Kafka Streams 🎵🎶
🎶🎵Bo-stream-ian Rhapsody: A Musical Demo of Kafka Connect and Kafka Streams 🎵🎶HostedbyConfluent
 
Transport in Open Pits______SM_MI10415MI
Transport in Open Pits______SM_MI10415MITransport in Open Pits______SM_MI10415MI
Transport in Open Pits______SM_MI10415MIRomil Mishra
 
Real-time Geospatial Aircraft Monitoring Using Apache Kafka
Real-time Geospatial Aircraft Monitoring Using Apache KafkaReal-time Geospatial Aircraft Monitoring Using Apache Kafka
Real-time Geospatial Aircraft Monitoring Using Apache KafkaHostedbyConfluent
 
THE STATE OF STARTUP ECOSYSTEM - INDIA x JAPAN 2023
THE STATE OF STARTUP ECOSYSTEM - INDIA x JAPAN 2023THE STATE OF STARTUP ECOSYSTEM - INDIA x JAPAN 2023
THE STATE OF STARTUP ECOSYSTEM - INDIA x JAPAN 2023Joshua Flannery
 

Recently uploaded (20)

Attacking (and Defending) Apache Kafka | Kafka Summit London
Attacking (and Defending) Apache Kafka | Kafka Summit LondonAttacking (and Defending) Apache Kafka | Kafka Summit London
Attacking (and Defending) Apache Kafka | Kafka Summit London
 
Fish Plays Pokemon | Kafka Summit London
Fish Plays Pokemon | Kafka Summit LondonFish Plays Pokemon | Kafka Summit London
Fish Plays Pokemon | Kafka Summit London
 
Transcript: Book industry state of the nation 2024 - Tech Forum 2024
Transcript: Book industry state of the nation 2024 - Tech Forum 2024Transcript: Book industry state of the nation 2024 - Tech Forum 2024
Transcript: Book industry state of the nation 2024 - Tech Forum 2024
 
Mastering Kafka Producer Configs: A Guide to Optimizing Performance
Mastering Kafka Producer Configs: A Guide to Optimizing PerformanceMastering Kafka Producer Configs: A Guide to Optimizing Performance
Mastering Kafka Producer Configs: A Guide to Optimizing Performance
 
Building a Self-Service Stream Processing Portal: How And Why
Building a Self-Service Stream Processing Portal: How And WhyBuilding a Self-Service Stream Processing Portal: How And Why
Building a Self-Service Stream Processing Portal: How And Why
 
Book industry state of the nation 2024 - Tech Forum 2024
Book industry state of the nation 2024 - Tech Forum 2024Book industry state of the nation 2024 - Tech Forum 2024
Book industry state of the nation 2024 - Tech Forum 2024
 
Transcript: Green paths: Learning from publishers’ sustainability journeys - ...
Transcript: Green paths: Learning from publishers’ sustainability journeys - ...Transcript: Green paths: Learning from publishers’ sustainability journeys - ...
Transcript: Green paths: Learning from publishers’ sustainability journeys - ...
 
Which standard is best for your content?
Which standard is best for your content?Which standard is best for your content?
Which standard is best for your content?
 
#SCIT 2024 LatAm Delegation Overview + SPONSORSHIP.pdf
#SCIT 2024 LatAm Delegation Overview + SPONSORSHIP.pdf#SCIT 2024 LatAm Delegation Overview + SPONSORSHIP.pdf
#SCIT 2024 LatAm Delegation Overview + SPONSORSHIP.pdf
 
Build Copilots on Streaming Data with Generative AI, Kafka Streams and Flink SQL
Build Copilots on Streaming Data with Generative AI, Kafka Streams and Flink SQLBuild Copilots on Streaming Data with Generative AI, Kafka Streams and Flink SQL
Build Copilots on Streaming Data with Generative AI, Kafka Streams and Flink SQL
 
Modifying Your SQL Streaming Queries on the Fly: The Impossible Trinity
Modifying Your SQL Streaming Queries on the Fly: The Impossible TrinityModifying Your SQL Streaming Queries on the Fly: The Impossible Trinity
Modifying Your SQL Streaming Queries on the Fly: The Impossible Trinity
 
Apache Kafka's Common Pitfalls & Intricacies: A Customer Support Perspective
Apache Kafka's Common Pitfalls & Intricacies: A Customer Support PerspectiveApache Kafka's Common Pitfalls & Intricacies: A Customer Support Perspective
Apache Kafka's Common Pitfalls & Intricacies: A Customer Support Perspective
 
AsyncAPI v3: What’s New? | Kafka Summit London
AsyncAPI v3: What’s New? | Kafka Summit LondonAsyncAPI v3: What’s New? | Kafka Summit London
AsyncAPI v3: What’s New? | Kafka Summit London
 
Error Handling with Kafka: From Patterns to Code
Error Handling with Kafka: From Patterns to CodeError Handling with Kafka: From Patterns to Code
Error Handling with Kafka: From Patterns to Code
 
Technology Governance & Migration In The AI Era
Technology Governance & Migration In The AI EraTechnology Governance & Migration In The AI Era
Technology Governance & Migration In The AI Era
 
Automation Ops Series: Session 3 - Solutions management
Automation Ops Series: Session 3 - Solutions managementAutomation Ops Series: Session 3 - Solutions management
Automation Ops Series: Session 3 - Solutions management
 
🎶🎵Bo-stream-ian Rhapsody: A Musical Demo of Kafka Connect and Kafka Streams 🎵🎶
🎶🎵Bo-stream-ian Rhapsody: A Musical Demo of Kafka Connect and Kafka Streams 🎵🎶🎶🎵Bo-stream-ian Rhapsody: A Musical Demo of Kafka Connect and Kafka Streams 🎵🎶
🎶🎵Bo-stream-ian Rhapsody: A Musical Demo of Kafka Connect and Kafka Streams 🎵🎶
 
Transport in Open Pits______SM_MI10415MI
Transport in Open Pits______SM_MI10415MITransport in Open Pits______SM_MI10415MI
Transport in Open Pits______SM_MI10415MI
 
Real-time Geospatial Aircraft Monitoring Using Apache Kafka
Real-time Geospatial Aircraft Monitoring Using Apache KafkaReal-time Geospatial Aircraft Monitoring Using Apache Kafka
Real-time Geospatial Aircraft Monitoring Using Apache Kafka
 
THE STATE OF STARTUP ECOSYSTEM - INDIA x JAPAN 2023
THE STATE OF STARTUP ECOSYSTEM - INDIA x JAPAN 2023THE STATE OF STARTUP ECOSYSTEM - INDIA x JAPAN 2023
THE STATE OF STARTUP ECOSYSTEM - INDIA x JAPAN 2023
 

Speed is Essential for a Great Web Experience

Editor's Notes

  1. Andy Davies\n\nSpecialise in making web sites faster, more reliable and helping them scale as they grow\n\nSlides complete will go on Slideshare in the next day or so\n\nIf anyone has any questions or comments feel free to send me a tweet...\n\n\n
  2. \n
  3. \n
  4. How we perceive response times\n\nStrangeloop Networks research into load times of Alexia Top 2000 ecommerce sites \n - Average page load time 11.21s\n - Best 2.2x, worst 40.2s!\n - Only 13 loaded in less that 5s\n\nOur perception of load time is off:\n- Our expectation is faster\n- Perceive load time as 15% slower than reality\n- Recount experience as 35% slower\nStoyan Stefanov - Psychology of Performance\n
  5. Retail task - find and buy a laptop on a leading e-commerce site\nInsurance task - find and buy personal travel insurance on an insurance website. \nEEG &amp; EOG, camera\n
  6. \n\nAlso people&amp;#x2019;s perception of time is faulty... (Stoyan Stefanov, Psychology of Performance)\n - Average person perceives page takes 15% longer to load that reality\n - Will recount it as 35% longer when talking to others\n\n
  7. Amazon - 100 ms delay - sales down 1%\n
  8. \n
  9. ShopzillaUptime 99.51% &gt; 99.97\n\nMozillareduced load time by 2.2 secs = 60 million extra downloads / year\n\nYahootraffic went up 9% for every 400ms improvement\n\nNetflix: Reduced outbound bandwidth by 43%\n\nKerboodle: Reduced hosting costs by over &amp;#x20AC;30,000 per year\n\n
  10. How many have websites?\n\nHow many think theirs is fast?\n\nHow many measure?\n
  11. We are not real users...\n\nActual page load times from a real site, note huge peak of over 10 seconds\n\nMany external factors can affect page load time:\n\n- Browser\n- How they are connected ADSL / mobile / public WiFi\n- Bandwidth\n- Latency\n- Anti-virus\n- Network kit\n- etc\n\nThese factors are beyond our control but to get a true picture of page load times we must measure them in the visitors browser.\n
  12. Navigation Timing API \n - Firefox 7+, IE9+, Chrome 6+, Chrome on ICS\n - NO SAFARI - OS X or iOS!!!\n\nCan script to add extra timings\n\nLow sample rate\n\nAverages!!!\n\nIncrease sample rate from 1% to 100% add:\n\n_gaq.push([&apos;_setSiteSpeedSampleRate&apos;, 100]);\n\nPage load time data collected by default since 16th Nov 2011\n\nGood description of how it works on StackOverflow\n\n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. Some server performance issues can be improved by throwing hardware at it e.g. faster processors, more RAM (Databases love RAM), faster disks.\n\nBut should still look at optimising the back-end as it&amp;#x2019;s an important part of the picture e.g. DB tuning, architectures, reverse proxies etc.\n\nEven without tuning the server can still improve page load times by &amp;#x201C;flushing early&amp;#x201D;\n\n
  20. Even higher on mobile\n
  21. \n
  22. Bursting over 1.5Mbps = Testing Artifact\n
  23. \n
  24. What about CDN?\nWhat about cheating on TCP slow-start\nLinux 2.6.39 increases initcwnd to 10\n
  25. 16% vs 84% - might want to compare against the 1/3 vs 2/3 I generally see\nBased on 97,000 URLs from Alexa Top 1000\nAdd an arrow to red segment saying images...\n
  26. \n
  27. What about PNGs and transparency? - need to cover the issues\n
  28. Traditionally been a pain to create but tools are much better + cSS preprocessors\n
  29. \n
  30. \n
  31. plus more - shadows, text gradients, transforms etc.\n\nbox-shadow:3px 3px 5px 6px #ccc;\n\nMobile impications @brianleroux\n
  32. SVG - 40KB Uncompressed / 12KB Compressed\nPNG - 800x480 - 86KB optimised\n
  33. Scales as user alters text size\n
  34. \n
  35. \n
  36. \n
  37. \n
  38. \n
  39. What if they are slow? down? Or even blocked - country, corporate firewall etc.?\n\n21s before rendering starts when Twitter is down\n\n\n
  40. Don&amp;#x2019;t blindly add third party scripts to a site\n\nMany social sites now have async versions, use the latest snippet.\n\nAddThis doesn&amp;#x2019;t - don&amp;#x2019;t use it\n\nOpenDNS blocked Google&amp;#x2019;s jQuery CDN!\n\nh5bp includes html5shiv from googlecode - it&amp;#x2019;s only 1KB, quicker to load from own site\n
  41. \n
  42. Some things can be automated e.g. compression, minification, merging, image compression plus more sophisticated optimisations.\n\nFrom plugins for Wordpress and web servers, appliances that sit in front of your server farm through to cloud-based optimisation services.\n\nOther are a little more difficult e.g. flush early, improving backed performance, asynchronous loading scripts etc.\n\nAutomation products / tools...\n\nFramework support\n Asset pipeline (Rails)\n Resources plugin (Grails)\n Webassets (Python)\n Assetic (PHP)\n\nCMS plugins\n - W3 Total Cache for Wordpress\n\nServer plugins\n - mod_pagespeed (Apache)\n - reduce requests (IIS)\n - Aptimize (IIS) (&amp;#xA3;)\n - Webo (&amp;#xA3;)\n\nAppliances\n - Strangeloop (&amp;#xA3;)\n - Traditional ADCs do some of this e.g. compression\n\nCloud services\n - Strangeloop (&amp;#xA3;)\n - Torbit (&amp;#xA3;)\n - Blaze.io (&amp;#xA3;)\n - Yotta (&amp;#xA3;)\n - Google&amp;#x2019;s PageSpeed service\n
  43. \n
  44. \n
  45. \n
  46. \n