Your SlideShare is downloading. ×
0
I	
  feel	
  the	
  need…	
  the	
  need	
  for	
  SPEED!	
  
@chrisburgess	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
 ...
Web	
  performance	
  op8misa8on	
  and	
  why	
  
it	
  ma=ers	
  
We	
  know	
  page	
  speed	
  is	
  a	
  ranking	
  factor	
  
for	
  search	
  engines	
  
November	
  13,	
  2009	
  
Google	
  first	
  started	
  talking	
  about	
  speed	
  4	
  years	
  ago	
  
Today	
  
So	
  we	
  get	
  that	
  Google	
  	
  	
  	
  thinks	
  it’s	
  a	
  big	
  deal…	
  
But	
  remember,	
  we’re	
  not	
  just	
  op8mising	
  for	
  
search	
  engines,	
  page	
  speed	
  is	
  	
  
a	
  hu...
Data	
  from	
  h5p://www.strangeloopnetworks.com/assets/images/Infographics/Web-­‐Stress-­‐Infographic-­‐500.jpg	
  
Imag...
Data	
  from	
  h5p://www.strangeloopnetworks.com/assets/images/Infographics/Web-­‐Stress-­‐Infographic-­‐500.jpg	
  
Imag...
47%	
  of	
  consumers	
  expect	
  	
  
a	
  web	
  page	
  to	
  load	
  in	
  2	
  seconds	
  or	
  less	
  
Data	
  fr...
Data	
  from	
  h5p://blog.kissmetrics.com/loading-­‐Nme/?wide=1	
  	
  
Page	
  load	
  )me	
  in	
  seconds	
  
Page	
  ...
Source:	
  h5p://www.strangeloopnetworks.com/assets/images/Infographics/Web-­‐Stress-­‐Infographic-­‐500.jpg	
  
Why	
  do	
  happy	
  users	
  ma=er?	
  
Source:	
  h5p://www.strangeloopnetworks.com/assets/images/Infographics/Web-­‐Stress-­‐Infographic-­‐500.jpg	
  
1	
  second	
  
delay	
  
7%	
  	
  
reduc8on	
  
	
  in	
  
conversions	
  
Data	
  from	
  h5p://blog.kissmetrics.com/lo...
Data	
  from	
  h5p://blog.kissmetrics.com/loading-­‐Nme/?wide=1	
  
Image:	
  h5p://workforceplanningtools.com.au/wp-­‐co...
So	
  happy	
  users	
  are	
  more	
  likely	
  to:	
  
	
  
▷  Hang	
  around	
  longer	
  
▷  Come	
  back	
  to	
  you...
“We	
  want	
  you	
  to	
  be	
  able	
  to	
  flick	
  from	
  one	
  page	
  to	
  another	
  as	
  
quickly	
  as	
  yo...
Source:	
  h5p://www.strangeloopnetworks.com/assets/images/visualizing_web_performance_poster.jpg-­‐RAINBOW.jpg	
  
In	
  2010,	
  the	
  Mozilla	
  team	
  found	
  the	
  Firefox	
  
download	
  page	
  was	
  loading	
  in	
  7	
  seco...
How	
  fast	
  is	
  fast	
  enough?	
  
	
  
▷  Within	
  the	
  user	
  interface	
  (UI)	
  
▷  0.1	
  second	
  =	
  U...
The	
  appearance	
  of	
  performance…	
  
Preloading	
  vs	
  Lazy	
  Loading	
  
▷  Preloading	
  
▷  Lazy	
  Loading	
  
So	
  how	
  do	
  we	
  make	
  our	
  sites	
  faster?	
  
Client	
  
side	
  
Server	
  
side	
  
80	
  /	
  20	
  Rule	
  
There	
  is	
  no	
  one	
  size	
  fits	
  all…	
  
You	
  must	
  test,	
  then	
  test	
  some	
  more…	
  
Performance	
  Tes8ng	
  vs	
  Load	
  Tes8ng	
  
There	
  are	
  six	
  fundamental	
  reasons	
  companies	
  
measure	
  performance	
  of	
  their	
  sites:	
  
	
  
▷ ...
Google	
  Best	
  Prac8ces	
  
h5ps://developers.google.com/speed/docs/best-­‐pracNces/rules_intro	
  
	
  
Yahoo!	
  Perf...
But	
  connec8ons	
  are	
  gefng	
  faster,	
  right?	
  
Source:	
  h5p://h5parchive.org/	
  
Source:	
  h5p://h5parchive.org/	
  
Source:	
  h5p://h5parchive.org/	
  
Processing	
  generaNon-­‐generosity…	
  
—	
  [original]	
  300	
  x	
  178:	
  Reduced	
  by	
  8.9%	
  (5.3	
  KB)	
  
...
Also	
  check	
  out…	
  
	
  
▷  h5p://compresspng.com/	
  
▷  h5p://pnggauntlet.com/	
  
▷  h5p://imageopNm.com/	
  
What	
  can	
  make	
  your	
  site	
  slow?	
  
	
  
▷  HosNng	
  
▷  Use	
  of	
  media	
  (e.g	
  photos	
  and	
  vide...
There’s	
  a	
  plugin	
  for	
  that!	
  
	
  
▷  WP	
  Minify	
  
h5p://wordpress.org/plugins/wp-­‐minify/	
  
▷  WP	
  ...
P3	
  Profiler	
  
▷  h5p://wordpress.org/plugins/p3-­‐profiler/	
  
Look	
  for:	
  
	
  
#	
  ##############################################################################	
  
#	
  	
  	
 ...
Does	
  everybody	
  know	
  what	
  8me	
  it	
  is?	
  
Tool	
  8me	
  -­‐	
  tools	
  for	
  tes8ng	
  
▷  WebPageTest.org	
  
▷  Google	
  AnalyNcs	
  
▷  Yslow	
  
▷  Your	
  ...
WebPageTest.org	
  (Example)	
  
Google	
  Analy8cs	
  
YSlow	
  
PageSpeed	
  Extension	
  
Also	
  check	
  out	
  Speed	
  Tracer	
  for	
  web	
  apps	
  
Web	
  Browser	
  (Developer	
  Tools)	
  
Google	
  Tools	
  
▷  h5ps://developers.google.com/speed/pagespeed/	
  
Yo=aa	
  
▷  h5p://www.yo5aa.com/	
  
•  h5p://loadimpact.com/	
  
Load	
  Impact	
  
▷  h5p://www.200Please.com	
  
200Please.com	
  
▷  h5ps://www.pingdom.com/	
  
Pingdom	
  
More	
  tools…	
  
▷  ab	
  
▷  cURL	
  
▷  cURL-­‐loader	
  
▷  h5perf	
  
▷  jmeter	
  
▷  Siege	
  
ab	
  -­‐n	
  100	
  -­‐c	
  10	
  h=p://example.com/	
  
100	
  HTTP	
  GET	
  requests,	
  10	
  requests	
  at	
  a	
  ...
cmd:~	
  cb$	
  ab	
  -­‐n	
  100	
  -­‐c	
  10	
  h=p://test.hypercrao.com/	
  
This	
  is	
  ApacheBench,	
  Version	
  ...
Other	
  considera8ons	
  
Mobile	
  
High	
  defini8on	
  displays	
  
Social	
  
Where	
  to	
  get	
  more	
  informa8on	
  
Steve	
  Souders	
  
Source:	
  h5p://stevesouders.com/	
  
Planet	
  Performance	
  
Source:	
  h5p://www.perfplanet.com/	
  
Source:	
  h5p://moz.com/ugc/why-­‐site-­‐speed-­‐opNmisaNon-­‐should-­‐be-­‐part-­‐of-­‐your-­‐seo-­‐strategy	
  
Moz	
  
Recap	
  
	
  
So	
  we’ve	
  talked	
  about:	
  
▷  Why	
  speed	
  is	
  important	
  and	
  how	
  it	
  can	
  help	
...
In	
  summary…	
  
Search	
  engines	
  care	
  about	
  speed…	
  
Users	
  care	
  about	
  speed…	
  
Search	
  engines...
Thank	
  you	
  
Web Performance Optimisation
Web Performance Optimisation
Web Performance Optimisation
Web Performance Optimisation
Web Performance Optimisation
Web Performance Optimisation
Web Performance Optimisation
Web Performance Optimisation
Web Performance Optimisation
Web Performance Optimisation
Web Performance Optimisation
Web Performance Optimisation
Upcoming SlideShare
Loading in...5
×

Web Performance Optimisation

642

Published on

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

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
642
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
4
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Web Performance Optimisation"

  1. 1. I  feel  the  need…  the  need  for  SPEED!   @chrisburgess                                                                                                                                                                              ChrisBurgess.com.au    
  2. 2. Web  performance  op8misa8on  and  why   it  ma=ers  
  3. 3. We  know  page  speed  is  a  ranking  factor   for  search  engines  
  4. 4. November  13,  2009   Google  first  started  talking  about  speed  4  years  ago   Today  
  5. 5. So  we  get  that  Google        thinks  it’s  a  big  deal…  
  6. 6. But  remember,  we’re  not  just  op8mising  for   search  engines,  page  speed  is     a  huge  factor  for  users  
  7. 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. 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. 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. 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. 11. Source:  h5p://www.strangeloopnetworks.com/assets/images/Infographics/Web-­‐Stress-­‐Infographic-­‐500.jpg  
  12. 12. Why  do  happy  users  ma=er?  
  13. 13. Source:  h5p://www.strangeloopnetworks.com/assets/images/Infographics/Web-­‐Stress-­‐Infographic-­‐500.jpg  
  14. 14. 1  second   delay   7%     reduc8on    in   conversions   Data  from  h5p://blog.kissmetrics.com/loading-­‐Nme/?wide=1  
  15. 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. 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. 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. 18. Source:  h5p://www.strangeloopnetworks.com/assets/images/visualizing_web_performance_poster.jpg-­‐RAINBOW.jpg  
  19. 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. 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. 21. The  appearance  of  performance…  
  22. 22. Preloading  vs  Lazy  Loading   ▷  Preloading   ▷  Lazy  Loading  
  23. 23. So  how  do  we  make  our  sites  faster?  
  24. 24. Client   side   Server   side   80  /  20  Rule  
  25. 25. There  is  no  one  size  fits  all…  
  26. 26. You  must  test,  then  test  some  more…  
  27. 27. Performance  Tes8ng  vs  Load  Tes8ng  
  28. 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. 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. 30. But  connec8ons  are  gefng  faster,  right?  
  31. 31. Source:  h5p://h5parchive.org/  
  32. 32. Source:  h5p://h5parchive.org/  
  33. 33. Source:  h5p://h5parchive.org/  
  34. 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. 35. Also  check  out…     ▷  h5p://compresspng.com/   ▷  h5p://pnggauntlet.com/   ▷  h5p://imageopNm.com/  
  36. 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. 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. 38. P3  Profiler   ▷  h5p://wordpress.org/plugins/p3-­‐profiler/  
  39. 39. Look  for:     #  ##############################################################################   #                                                                                                                                              WEB  PERFORMANCE                                                                                                                        #   #  ##############################################################################     h5ps://github.com/h5bp/html5-­‐boilerplate  
  40. 40. Does  everybody  know  what  8me  it  is?  
  41. 41. Tool  8me  -­‐  tools  for  tes8ng   ▷  WebPageTest.org   ▷  Google  AnalyNcs   ▷  Yslow   ▷  Your  Web  Brower  “Developer  Tools”   ▷  Pingdom   ▷  LoadImpact.com  
  42. 42. WebPageTest.org  (Example)  
  43. 43. Google  Analy8cs  
  44. 44. YSlow  
  45. 45. PageSpeed  Extension   Also  check  out  Speed  Tracer  for  web  apps  
  46. 46. Web  Browser  (Developer  Tools)  
  47. 47. Google  Tools   ▷  h5ps://developers.google.com/speed/pagespeed/  
  48. 48. Yo=aa   ▷  h5p://www.yo5aa.com/  
  49. 49. •  h5p://loadimpact.com/   Load  Impact  
  50. 50. ▷  h5p://www.200Please.com   200Please.com  
  51. 51. ▷  h5ps://www.pingdom.com/   Pingdom  
  52. 52. More  tools…   ▷  ab   ▷  cURL   ▷  cURL-­‐loader   ▷  h5perf   ▷  jmeter   ▷  Siege  
  53. 53. ab  -­‐n  100  -­‐c  10  h=p://example.com/   100  HTTP  GET  requests,  10  requests  at  a  Nme  
  54. 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. 55. Other  considera8ons  
  56. 56. Mobile  
  57. 57. High  defini8on  displays  
  58. 58. Social  
  59. 59. Where  to  get  more  informa8on  
  60. 60. Steve  Souders   Source:  h5p://stevesouders.com/  
  61. 61. Planet  Performance   Source:  h5p://www.perfplanet.com/  
  62. 62. Source:  h5p://moz.com/ugc/why-­‐site-­‐speed-­‐opNmisaNon-­‐should-­‐be-­‐part-­‐of-­‐your-­‐seo-­‐strategy   Moz  
  63. 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. 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. 65. Thank  you  
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×