$30 off During Our Annual Pro Sale. View Details »

The Need for Speed

Chris Burgess
September 04, 2013

The Need for Speed

Web Performance Optimisation and Why It Matters

Chris Burgess

September 04, 2013
Tweet

More Decks by Chris Burgess

Other Decks in Technology

Transcript

  1. But  remember,  we’re  not  just  op8mising  for   search  engines,

     page  speed  is     a  huge  factor  for  users  
  2. 47%  of  consumers  expect     a  web  page  to

     load  in  2  seconds  or  less   Data  from  h2p://blog.kissmetrics.com/loading-­‐Lme/?wide=1   Image  from:  h2p://firewalkercreaLve.com/wp-­‐content/uploads/2011/01/2seconds.jpg  
  3. Data  from  h2p://blog.kissmetrics.com/loading-­‐Lme/?wide=1     Page  load  )me  in  seconds

      Page  abandonment  %   25%   50%   2   4   6   8   10  
  4. 1  second   delay   7%     reduc8on  

     in   conversions   Data  from  h2p://blog.kissmetrics.com/loading-­‐Lme/?wide=1  
  5. So  happy  users  are  more  likely  to:     ▷ 

    Hang  around  longer   ▷  Come  back  to  your  site   ▷  Become  engaged   ▷  Convert   ▷  Talk  about  your  site   ▷  Share  your  content   ▷  Link  to  your  site  
  6. “We  want  you  to  be  able  to  flick  from  one

     page  to  another  as   quickly  as  you  can  flick  a  page  in  a  book.  So  we’re  aiming  very   very  high  …  at  something  like  100  milliseconds”     –  Urs  Hölzle,  Senior  VP  Opera5ons,  Google   Source:  h2p://www.strangeloopnetworks.com/assets/images/Infographics/Web-­‐Stress-­‐Infographic-­‐500.jpg       Image:  h2p://images.huffingtonpost.com/gen/143651/FLIP-­‐BOOK-­‐RAINBOW.jpg  
  7. In  2010,  the  Mozilla  team  found  the  Firefox   download

     page  was  loading  in  7  seconds.       …by  reducing  the  average  page  load  8me  by  2.2   seconds,  they  saw  a  15.4%  increase  in  downloads.   Source:  h2p://zoompf.com/blog/2013/08/web-­‐performance-­‐basics-­‐for-­‐the-­‐markeLng-­‐team  
  8. How  fast  is  fast  enough?     ▷  Within  the

     user  interface  (UI),  app  etc.   ▷  0.1  second  =  User  feels  that  the  system  is  reacLng   instantaneously     ▷  1  second  =  Limit  for  the  user's  flow  of  thought  to  stay   uninterrupted   ▷  10  seconds  =  Limit  for  keeping  the  user's  a2enLon  focused,  any   longer  users  will  want  to  perform  other  tasks  while  waiLng,  so   they  should  be  given  feedback  indicaLng  when  the  computer   expects  to  be  done.   Source:  h2p://www.nngroup.com/arLcles/response-­‐Lmes-­‐3-­‐important-­‐limits/  
  9. There  are  six  fundamental  reasons  companies   measure  performance  of

     their  sites:     ▷  Establish  baselines   ▷  Detect  and  repair  errors   ▷  Measure  the  effecLveness  of  change   ▷  Determine  the  impact  of  an  outage   ▷  Resolve  disputes  with  users   ▷  EsLmate  how  much  capacity  will  be  needed  in   the  future   Source:  “Complete  Web  Monitoring”  Alistair  Croll  and  Sean  Power  
  10. Google  Best  Prac8ces   h2ps://developers.google.com/speed/docs/best-­‐pracLces/rules_intro     Yahoo!  Performance  Rules

      h2p://developer.yahoo.com/performance/rules.html     …and  there’s  new  content  being  added  all  the  )me.    
  11. Processing  generaLon-­‐generosity…   —  [original]  300  x  178:  Reduced  by

     8.9%  (5.3  KB)   —  [thumbnail]  150  x  150:  Reduced  by  11.5%  (3.1  KB)   —  [medium]  300  x  178:  Reduced  by  8.9%  (5.3  KB)     Processing  optus_rockcorps_infographic_print…   —  [original]  600  x  1286:  Reduced  by  8.0%  (15.2  KB)   —  [thumbnail]  150  x  150:  Reduced  by  6.1%  (596  B)   —  [medium]  140  x  300:  Reduced  by  6.5%  (1.1  KB)   —  [large]  477  x  1024:  Reduced  by  7.6%  (10.2  KB)     Processing  australian-­‐social-­‐media-­‐staLsLcs-­‐2012-­‐vs-­‐2013_small…   —  [original]  600  x  450:  Reduced  by  11.4%  (7.8  KB)   —  [thumbnail]  150  x  150:  Reduced  by  8.1%  (666  B)   —  [medium]  300  x  225:  Reduced  by  8.7%  (1.7  KB)     Processing  australian-­‐social-­‐media-­‐staLsLcs-­‐2012-­‐vs-­‐2013_large…   —  [original]  1020  x  765:  Reduced  by  14.8%  (21.6  KB)   —  [thumbnail]  150  x  150:  Reduced  by  7.5%  (633  B)   —  [medium]  300  x  225:  Reduced  by  8.2%  (1.6  KB)  
  12. What  can  make  your  site  slow?     ▷  HosLng

      ▷  Use  of  media  (e.g  photos  and  video)   ▷  CSS,  JavaScript,  Fonts   ▷  PlaCorm  (theme,  plugins)   ▷  Errors  and  misconfiguraLon   ▷  SSL  (eek!)  
  13. There’s  a  plugin  for  that!     ▷  WP  Minify

      h2p://wordpress.org/plugins/wp-­‐minify/   ▷  WP  Smush.it   h2p://wordpress.org/plugins/wp-­‐smushit/   ▷  WP  Super  Cache   h2p://wordpress.org/plugins/wp-­‐super-­‐cache/  (but  there  are  others)   ▷  Plugin  Organizer   h2p://wordpress.org/plugins/plugin-­‐organizer/   ▷  JS  &  CSS  Script  OpLmizer   h2p://wordpress.org/plugins/js-­‐css-­‐script-­‐opLmizer/   ▷  WP-­‐DBManager   h2p://wordpress.org/plugins/wp-­‐dbmanager/   ▷  P3  (Plugin  Performance  Profiler)   h2p://wordpress.org/plugins/p3-­‐profiler/  (see  next  slide)   Source:  “Complete  Web  Monitoring”  Alistair  Croll  and  Sean  Power  
  14. Look  for:     #  ##############################################################################   #    

                                                                                                                                             WEB  PERFORMANCE                                                                                                                        #   #  ##############################################################################     h2ps://github.com/h5bp/html5-­‐boilerplate  
  15. Tool  8me  -­‐  tools  for  tes8ng   ▷  WebPageTest.org  

    ▷  Google  AnalyLcs   ▷  Yslow   ▷  Your  Web  Browser  “Developer  Tools”   ▷  Pingdom   ▷  LoadImpact.com   ▷  Blitz.io   ▷  New  Relic  
  16. More  tools…   ▷  ab   ▷  cURL   ▷ 

    cURL-­‐loader   ▷  h2perf   ▷  jmeter   ▷  Siege   box:~  user$  ab  -­‐n  100  -­‐c  10  h=p://test.example.com/   This  is  ApacheBench,  Version  2.3  <$Revision:  655654  $>   Copyright  1996  Adam  Twiss,  Zeus  Technology  Ltd,  h=p://www.zeustech.net/   Licensed  to  The  Apache  Sotware  Founda8on,  h=p://www.apache.org/     Benchmarking  test.example.com  (be  pa8ent).....done       Server  Sotware:                Apache/2.2.11   Server  Hostname:                test.example.com   Server  Port:                        80     Document  Path:                    /   Document  Length:                22595  bytes     Concurrency  Level:            10   Time  taken  for  tests:      8.553  seconds   Complete  requests:            100   Failed  requests:                0   Write  errors:                      0   Total  transferred:            2303528  bytes   HTML  transferred:              2281598  bytes   Requests  per  second:        11.69  [#/sec]  (mean)   Time  per  request:              855.335  [ms]  (mean)   Time  per  request:              85.533  [ms]  (mean,  across  all  concurrent  requests)   Transfer  rate:                    263.00  [Kbytes/sec]  received     Connec8on  Times  (ms)                              min    mean[+/-­‐sd]  median      max   Connect:              30      33      2.0          33            39   Processing:      350    764  281.9        707        1495   Wai8ng:            220    474  233.2        388        1115   Total:                382    797  282.7        739        1531     Percentage  of  the  requests  served  within  a  certain  8me  (ms)      50%        739      66%        802      75%        876      80%        995      90%      1333      95%      1440      98%      1461      99%      1531    100%      1531  (longest  request)  
  17. box:~  user$  ab  -­‐n  100  -­‐c  10  h=p://test.example.com/   This

     is  ApacheBench,  Version  2.3  <$Revision:  655654  $>   Copyright  1996  Adam  Twiss,  Zeus  Technology  Ltd,  h=p://www.zeustech.net/   Licensed  to  The  Apache  Sotware  Founda8on,  h=p://www.apache.org/     Benchmarking  test.example.com  (be  pa8ent).....done       Server  Sotware:                Apache/2.2.11   Server  Hostname:                test.example.com   Server  Port:                        80     Document  Path:                    /   Document  Length:                22595  bytes     Concurrency  Level:            10   Time  taken  for  tests:      8.553  seconds   Complete  requests:            100   Failed  requests:                0   Write  errors:                      0   Total  transferred:            2303528  bytes   HTML  transferred:              2281598  bytes   Requests  per  second:        11.69  [#/sec]  (mean)   Time  per  request:              855.335  [ms]  (mean)   Time  per  request:              85.533  [ms]  (mean,  across  all  concurrent  requests)   Transfer  rate:                    263.00  [Kbytes/sec]  received     Connec8on  Times  (ms)                              min    mean[+/-­‐sd]  median      max   Connect:              30      33      2.0          33            39   Processing:      350    764  281.9        707        1495   Wai8ng:            220    474  233.2        388        1115   Total:                382    797  282.7        739        1531     Percentage  of  the  requests  served  within  a  certain  8me  (ms)      50%        739      66%        802      75%        876      80%        995      90%      1333      95%      1440      98%      1461      99%      1531    100%      1531  (longest  request)  
  18. Recap     So  we’ve  talked  about:   ▷  Why

     speed  is  important  and  how  it  can  help  your  site   ▷  Why  it’s  important  to  keep  users  happy   ▷  TesLng   ▷  Tools   ▷  Where  to  get  more  informaLon   Source:  “Complete  Web  Monitoring”  Alistair  Croll  and  Sean  Power  
  19. In  summary…   Search  engines  care  about  speed…   Users

     care  about  speed…   Search  engines  care  about  users…     So  you  should  feel  the  need…  the  need  for  speed!