the need for speed - rigor's slides from shopvisible client connect 2012

Presented  by:    Craig  Hyde,  President  &  Co-­‐founder,  Rigor  May  1,  2012  ShopVisible  Client  Connect  2012  

The  Need  for  Speed  Web  Performance  for  Ecommerce  

Connected  via  Web  

Today’s  average  website  consists  of  84  files  downloaded  from  12  domains  totaling  1MB  in  size.  

The  Web  is  Complex  

Source:  hKparchive.org/trends.php  

Source:  nyAmes.com/interacMve/2012/02/29/business/  impaMent-­‐web-­‐users-­‐flee-­‐slow-­‐loading-­‐sites.html  

ExpectaAons  are  High  

Importance  of  Performance    

•   Sales    

Importance  of  Performance    

•   Sales  •   Ad  spend    

Importance  of  Performance    

•   Sales  •   Ad  spend  •   SEO    

Importance  of  Performance    

•   Sales  •   Ad  spend  •   SEO  •   Brand  

Importance  of  Performance    

•   Sales  •   Ad  spend  •   SEO  •   Brand  •   Customers  

By  the  Numbers:  

“Let’s  make  the  web  faster”  –  now  a  factor  in  SEO    250ms  –  Magic  number  for  compeMMve  advantage    400ms  –  Where  fall-­‐off  begins  500ms  –  Results  in  20%  drop  off  in  traffic  

Source:  nyMmes.com/interacMve/2012/02/29/business/  impaMent-­‐web-­‐users-­‐flee-­‐slow-­‐loading-­‐sites.html  

By  the  Numbers:  

By  the  Numbers:  

By  the  Numbers:  

100ms  Page  Load  

1%  Sales  

↑↓   =

Source:  stevesouders.com/docs/wordcamp-­‐20090530.ppt  

By  the  Numbers:  

1s  Page  Load  ↑ = 11%  

Page  Views  ↓

7%  Conversions  

↓

16%  SaMsfacMon  

↓Source:  www.aberdeen.com/aberdeen-­‐library/5136/RA-­‐performance-­‐web-­‐applicaMon.aspx  

From  the  Numbers…  

Poor  performance  hurts:  •   Sales  •   Ad  spend  •   SEO  •   Brand  •   Customers  

What  Now?  Boxes  to  Check  

•  Make  Fewer  HTTP  Requests  

•  Use  a  Content  Delivery  Network  (CDN)  

•  Add  Expires  or  Cache-­‐Control  Header  

•  Gzip  Components  •  Put  Stylesheets  at  Top  •  Put  Scripts  at  BoKom  •  Avoid  CSS  Expressions  •  Make  JavaScript  and  CSS  

External  •  Reduce  DNS  Lookups  •  Minify  JavaScript  and  CSS  •  Avoid  Redirects  •  Remove  Duplicate  Scripts  •  Configure  ETags  •  Make  Ajax  Cacheable  •  Flush  Buffer  Early  •  Use  GET  for  Ajax  

Requests  •  Postload  Components  •  Preload  Components  •  Reduce  the  Number  of  

DOM  Elements  

•  Split  Components  Across  Domains  

•  Minimize  Number  of  iframes  

•  Avoid  404s  •  Reduce  Cookie  Size  •  Use  Cookie-­‐Free  Domains  

for  Components  •  Minimize  DOM  Access  •  Develop  Smart  Event  

Handlers  •  Choose  <link>  Over  

@import  •  Avoid  Filters  •  OpMmize  Images  •  OpMmize  CSS  Sprites  •  Do  Not  Scale  Images  in  

HTML  •  Make  favicon.ico  Small  

and  Cacheable  •  Keep  Components  Under  

25  KB  •  Pack  Components  Into  a  

MulMpart  Document  •  Avoid  Empty  Image  src  

•  Avoid  bad  requests  •  Avoid  CSS  @import  •  Avoid  CSS  expressions  •  Avoid  document.write  •  Combine  external  CSS  •  Combine  external  

JavaScript  •  Combine  images  using  

CSS  sprites  •  Defer  loading  of  

JavaScript  •  Defer  parsing  of  

JavaScript  •  Enable  compression  •  Leverage  browser  caching  •  Leverage  proxy  caching  •  Make  landing  page  

redirects  cacheable  •  Minify  CSS  •  Minify  HTML  •  Minify  JavaScript  •  Minimize  request  size  

•  Minimize  DNS  lookups  •  Minimize  redirects  •  OpMmize  images  •  OpMmize  the  order  of  

styles  and  scripts  •  Parallelize  downloads  

across  hostnames  •  Prefer  asynchronous  

resources  •  Put  CSS  in  the  document  

head  •  Remove  unused  CSS  •  Serve  resources  from  a  

consistent  URL  •  Serve  scaled  images  •  Serve  staMc  content  from  

a  cookieless  domain  •  Specify  a  character  set  •  Specify  image  dimensions  •  Use  efficient  CSS  

selectors  

What  Now?  Technology  to  Buy  

•   More  bandwidth  •   More  servers  •   Bigger  servers  •   Bigger  databases  •   CDNs  •   Hardware  Accelerators  •   Sorware  Accelerators  •   BeKer  sorware  •   IBM  Watson    

Theory  of  Constraints  

Measure,  Measure,  Measure    

•   Measure  •   Profile  •   Monitor    

Find  Your  BoUleneck  

Find  Your  BoUleneck  cont…  

Recap  

1.   Measure  2.   Find  BoKleneck  3.   Fix  BoKleneck  4.   Monitor  

Quick  Tips  

•   Front-­‐end  

Quick  Tips  

•   Front-­‐end  •   Smaller  files  

Quick  Tips  

•   Front-­‐end  •   Smaller  files  •   Fewer  downloads  

Quick  Tips  

•   Front-­‐end  •   Smaller  files  •   Fewer  downloads  •   Shorter  trips  

Quick  Tips  

•   Front-­‐end  •   Smaller  files  •   Fewer  downloads  •   Shorter  trips  •   Cache  everything  

Quick  Tips  

•   Front-­‐end  •   Smaller  files  •   Fewer  downloads  •   Shorter  trips  •   Cache  everything  •   Watch  plug-­‐ins  

Low  Hanging  Fruit  speed.rigor.com  

QuesAons    Speak  up!  

Craig  Hyde  678.467.4378  

craig.hyde@rigor.com  

@craighyde  

Rigor  950  East  Paces  Ferry  Rd  Suite  3300  Atlanta,  Georgia  30326  

 @TeamRigor  404.574.4970  877.4RIGOR1  hUp://rigor.com  

Contact  InformaAon