Web Performance Optimisation

  • 462 views
Uploaded on

The Need for Speed, a presentation at the Melbourne SEO Meetup on "Web Performance Optimisation and Why It Matters".

The Need for Speed, a presentation at the Melbourne SEO Meetup on "Web Performance Optimisation and Why It Matters".

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
462
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
3
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. I  feel  the  need…  the  need  for  SPEED!   @chrisburgess                                                                                                                                                                              ChrisBurgess.com.au    
  • 2. Web  performance  op8misa8on  and  why   it  ma=ers  
  • 3. We  know  page  speed  is  a  ranking  factor   for  search  engines  
  • 4. November  13,  2009   Google  first  started  talking  about  speed  4  years  ago   Today  
  • 5. So  we  get  that  Google        thinks  it’s  a  big  deal…  
  • 6. But  remember,  we’re  not  just  op8mising  for   search  engines,  page  speed  is     a  huge  factor  for  users  
  • 7. Data  from  h5p://www.strangeloopnetworks.com/assets/images/Infographics/Web-­‐Stress-­‐Infographic-­‐500.jpg   Image:  h5p://fisEuloFalent.com/wp-­‐content/uploads/2012/06/angry-­‐computer-­‐large-­‐500x320.jpg   78%  of  users  say  they’ve  felt  stress  or  anger  while   using  a  slow  website  
  • 8. Data  from  h5p://www.strangeloopnetworks.com/assets/images/Infographics/Web-­‐Stress-­‐Infographic-­‐500.jpg   Image:  h5p://celebrity-­‐lists.com/wp-­‐content/uploads/2012/03/brad-­‐pi5.jpg   4%  of  people  have  thrown  their  phone  while   using  a  slow  mobile  site  
  • 9. 47%  of  consumers  expect     a  web  page  to  load  in  2  seconds  or  less   Data  from  h5p://blog.kissmetrics.com/loading-­‐Nme/?wide=1   Image  from:  h5p://firewalkercreaNve.com/wp-­‐content/uploads/2011/01/2seconds.jpg  
  • 10. Data  from  h5p://blog.kissmetrics.com/loading-­‐Nme/?wide=1     Page  load  )me  in  seconds   Page  abandonment  %   25%   50%   2   4   6   8   10  
  • 11. Source:  h5p://www.strangeloopnetworks.com/assets/images/Infographics/Web-­‐Stress-­‐Infographic-­‐500.jpg  
  • 12. Why  do  happy  users  ma=er?  
  • 13. Source:  h5p://www.strangeloopnetworks.com/assets/images/Infographics/Web-­‐Stress-­‐Infographic-­‐500.jpg  
  • 14. 1  second   delay   7%     reduc8on    in   conversions   Data  from  h5p://blog.kissmetrics.com/loading-­‐Nme/?wide=1  
  • 15. Data  from  h5p://blog.kissmetrics.com/loading-­‐Nme/?wide=1   Image:  h5p://workforceplanningtools.com.au/wp-­‐content/uploads/2013/01/how-­‐to-­‐lose-­‐money.jpg       If  your  site  made  $100K  a  year   that’s  $7K  in  lost  revenue  for  1  second!  
  • 16. 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  
  • 17. “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:  h5p://www.strangeloopnetworks.com/assets/images/Infographics/Web-­‐Stress-­‐Infographic-­‐500.jpg       Image:  h5p://images.huffingtonpost.com/gen/143651/FLIP-­‐BOOK-­‐RAINBOW.jpg  
  • 18. Source:  h5p://www.strangeloopnetworks.com/assets/images/visualizing_web_performance_poster.jpg-­‐RAINBOW.jpg  
  • 19. 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:  h5p://zoompf.com/blog/2013/08/web-­‐performance-­‐basics-­‐for-­‐the-­‐markeNng-­‐team  
  • 20. How  fast  is  fast  enough?     ▷  Within  the  user  interface  (UI)   ▷  0.1  second  =  User  feels  that  the  system  is  reacNng   instantaneously     ▷  1  second  =  Limit  for  the  user's  flow  of  thought  to  stay   uninterrupted   ▷  10  seconds  =  Limit  for  keeping  the  user's  a5enNon  focused,  any   longer  users  will  want  to  perform  other  tasks  while  waiNng,  so   they  should  be  given  feedback  indicaNng  when  the  computer   expects  to  be  done.   Source:  h5p://www.nngroup.com/arNcles/response-­‐Nmes-­‐3-­‐important-­‐limits/  
  • 21. The  appearance  of  performance…  
  • 22. Preloading  vs  Lazy  Loading   ▷  Preloading   ▷  Lazy  Loading  
  • 23. So  how  do  we  make  our  sites  faster?  
  • 24. Client   side   Server   side   80  /  20  Rule  
  • 25. There  is  no  one  size  fits  all…  
  • 26. You  must  test,  then  test  some  more…  
  • 27. Performance  Tes8ng  vs  Load  Tes8ng  
  • 28. There  are  six  fundamental  reasons  companies   measure  performance  of  their  sites:     ▷  Establish  baselines   ▷  Detect  and  repair  errors   ▷  Measure  the  effecNveness  of  change   ▷  Determine  the  impact  of  an  outage   ▷  Resolve  disputes  with  users   ▷  EsNmate  how  much  capacity  will  be  needed  in   the  future   Source:  “Complete  Web  Monitoring”  Alistair  Croll  and  Sean  Power  
  • 29. Google  Best  Prac8ces   h5ps://developers.google.com/speed/docs/best-­‐pracNces/rules_intro     Yahoo!  Performance  Rules   h5p://developer.yahoo.com/performance/rules.html     …and  there’s  new  content  being  added  all  the  )me.    
  • 30. But  connec8ons  are  gefng  faster,  right?  
  • 31. Source:  h5p://h5parchive.org/  
  • 32. Source:  h5p://h5parchive.org/  
  • 33. Source:  h5p://h5parchive.org/  
  • 34. Processing  generaNon-­‐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-­‐staNsNcs-­‐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-­‐staNsNcs-­‐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)  
  • 35. Also  check  out…     ▷  h5p://compresspng.com/   ▷  h5p://pnggauntlet.com/   ▷  h5p://imageopNm.com/  
  • 36. What  can  make  your  site  slow?     ▷  HosNng   ▷  Use  of  media  (e.g  photos  and  video)   ▷  CSS,  JavaScript,  Fonts   ▷  PlaEorm  (theme,  plugins)   ▷  Errors  and  misconfiguraNon   ▷  SSL  (eek!)  
  • 37. There’s  a  plugin  for  that!     ▷  WP  Minify   h5p://wordpress.org/plugins/wp-­‐minify/   ▷  WP  Smush.it   h5p://wordpress.org/plugins/wp-­‐smushit/   ▷  WP  Super  Cache   h5p://wordpress.org/plugins/wp-­‐super-­‐cache/  (but  there  are  others)   ▷  Plugin  Organizer   h5p://wordpress.org/plugins/plugin-­‐organizer/   ▷  JS  &  CSS  Script  OpNmizer   h5p://wordpress.org/plugins/js-­‐css-­‐script-­‐opNmizer/   ▷  WP-­‐DBManager   h5p://wordpress.org/plugins/wp-­‐dbmanager/   ▷  P3  (Plugin  Performance  Profiler)   h5p://wordpress.org/plugins/p3-­‐profiler/  (see  next  slide)   Source:  “Complete  Web  Monitoring”  Alistair  Croll  and  Sean  Power  
  • 38. P3  Profiler   ▷  h5p://wordpress.org/plugins/p3-­‐profiler/  
  • 39. Look  for:     #  ##############################################################################   #                                                                                                                                              WEB  PERFORMANCE                                                                                                                        #   #  ##############################################################################     h5ps://github.com/h5bp/html5-­‐boilerplate  
  • 40. Does  everybody  know  what  8me  it  is?  
  • 41. Tool  8me  -­‐  tools  for  tes8ng   ▷  WebPageTest.org   ▷  Google  AnalyNcs   ▷  Yslow   ▷  Your  Web  Brower  “Developer  Tools”   ▷  Pingdom   ▷  LoadImpact.com  
  • 42. WebPageTest.org  (Example)  
  • 43. Google  Analy8cs  
  • 44. YSlow  
  • 45. PageSpeed  Extension   Also  check  out  Speed  Tracer  for  web  apps  
  • 46. Web  Browser  (Developer  Tools)  
  • 47. Google  Tools   ▷  h5ps://developers.google.com/speed/pagespeed/  
  • 48. Yo=aa   ▷  h5p://www.yo5aa.com/  
  • 49. •  h5p://loadimpact.com/   Load  Impact  
  • 50. ▷  h5p://www.200Please.com   200Please.com  
  • 51. ▷  h5ps://www.pingdom.com/   Pingdom  
  • 52. More  tools…   ▷  ab   ▷  cURL   ▷  cURL-­‐loader   ▷  h5perf   ▷  jmeter   ▷  Siege  
  • 53. ab  -­‐n  100  -­‐c  10  h=p://example.com/   100  HTTP  GET  requests,  10  requests  at  a  Nme  
  • 54. cmd:~  cb$  ab  -­‐n  100  -­‐c  10  h=p://test.hypercrao.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  Sooware  Founda8on,  h=p://www.apache.org/     Benchmarking  test.hypercrao.com  (be  pa8ent).....done       Server  Sooware:                Apache/2.2.11   Server  Hostname:                test.hypercrao.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)  
  • 55. Other  considera8ons  
  • 56. Mobile  
  • 57. High  defini8on  displays  
  • 58. Social  
  • 59. Where  to  get  more  informa8on  
  • 60. Steve  Souders   Source:  h5p://stevesouders.com/  
  • 61. Planet  Performance   Source:  h5p://www.perfplanet.com/  
  • 62. Source:  h5p://moz.com/ugc/why-­‐site-­‐speed-­‐opNmisaNon-­‐should-­‐be-­‐part-­‐of-­‐your-­‐seo-­‐strategy   Moz  
  • 63. 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   ▷  Sweet  spot  =  aim  for  1  second  or  less   ▷  Loading  cues   ▷  TesNng   ▷  Tools   ▷  Where  to  get  more  informaNon   Source:  “Complete  Web  Monitoring”  Alistair  Croll  and  Sean  Power  
  • 64. 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!  
  • 65. Thank  you