Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Forty-six Rules and Methods to Make Drupal Hella-Fast!

Forty-six Rules and Methods to Make Drupal Hella-Fast!

As given at Drupalcamp Atlanta 2013

96152416ecb494209fa7ff4edf0cde31?s=128

Michael Herchel

October 19, 2013
Tweet

Transcript

  1. @mikeherchel   Mike  Herchel     @mikeherchel    

  2. @mikeherchel   WHAT TO EXPECT •  Why does website speed

    matter? •  “Backend” tuning and caching (server stuff) •  Drupal tuning •  Front-end tuning (theming) •  Testing and baselines
  3. @mikeherchel  

  4. @mikeherchel   PAGE SPEED MATTERS •  Adding half a second

    to a search results page can decrease traffic and ad revenues by 20 percent (Google) •  Amazon found that every additional 100 milliseconds of load time decreased sales by 1 percent!!
  5. @mikeherchel   h-p://minus.com/msM8y8nyh#1e  

  6. @mikeherchel   97%  of  mobile   response  ?me   happens

     at  the     front  end   h-p://www.webperformancetoday.com/2011/04/20/desktop-­‐vs-­‐mobile-­‐web-­‐page-­‐load-­‐speed/   More  so  for  mobile...
  7. @mikeherchel   More  so  for  mobile... You're  not  just  

    compe?ng  with   other  sites.  You're   compe?ng  with   na?ve  apps.  
  8. @mikeherchel   More  so  for  mobile... Mobile  First  =  Mobile

      Performance  First     Start  thinking  about  performance  at  the   design  stage  (  -­‐  Dave  Olsen)  
  9. @mikeherchel  

  10. @mikeherchel   Keep  It  Simple,  Stupid!

  11. @mikeherchel   First rule of K*I*S*S* If  you  have  a

     slow  site  that  shouldn't  be  slow,     don't  throw  complexity  at  the  problem.       This  means  troubleshoot  the  actual  issue     (applica?on,  db,  hardware,  etc)  
  12. @mikeherchel   Tune  your  Webserver •  Apache   o  Lower

     max-­‐clients  in  h-pd.conf   (prevents  hard  drive  swap  space  usage)        (Total  Memory  -­‐  Opera?ng  System  Memory  -­‐  MySQL  memory)  /  Size  Per  Apache  process        4096MB  -­‐  512MB  -­‐  2048MB  /  100MB  =  15  Max-­‐Clients  
  13. @mikeherchel   Tuning  your  database •  MySQL  Tuner  (h-p://mysqltuner.pl)  

      •  Percona  Configura?on  Wizard  =  Great  Start!     (h-ps://tools.percona.com/wizard)     •  Use  Innodb  (this  is  the  default  for  D7)     •  Increase  Innodb  Buffer  Size!     •  MySQL  Query  Cache     •  Check  your  slow  query  logs!  
  14. @mikeherchel   SERVER-SIDE CACHING ...  Or  how  the  pros  do

     it.  
  15. @mikeherchel   Normal  Hos@ng  Environment

  16. @mikeherchel   Add  some  Redis  /  Memcached  db  caching...

  17. @mikeherchel   Throw  in  a  liHle  Opcode  Caching...

  18. @mikeherchel   PHP  /  APC  Configura@on •  PHP  Memory  Limit

      •  APC   apc.php  Download  this  from   h-p://pecl.php.net/package/APC   apc.shm_size  =  64M   apc.include_once_override  =  1   h-p://2bits.com/ar?cles/high-­‐php-­‐execu?on-­‐?mes-­‐drupal-­‐and-­‐tuning-­‐apc-­‐includeonce-­‐performance.html  
  19. @mikeherchel   Reverse  Proxy  caching  goodness...

  20. @mikeherchel   ...With  a  CDN  on  top!

  21. @mikeherchel  

  22. @mikeherchel   Welcome  to  the  Convoluted  World  of   Drupal

     Caching! Breakdown  of  Drupal's  Performance  Admin   Cache  pages  for  anonymous  users:  Stores  en?re  HTML   in  cache  db  table  (or  memcached/redis).    Also,  enables   external  caching  (Varnish,  Browser).     Cache  Blocks:  Basic  caching  for  blocks.  Note  that   blocks  created  by  views  must  be  explicitly  enabled  for   caching.     Amount  of  Bme  before  page  cache  is  cleared.  Note!   This  needs  to  be  enabled  for  Block  Cache!   Uses  PHP  library  to  Gzip  html.   KEEP  THESE  CHECKED  DAMNIT!  :)   Only  affects  external  caches  (Varnish,  browers).  Sets   cache-­‐control  max-­‐age  value.  
  23. @mikeherchel   Views  Caching  Explained Query  Results  Cache:  Caches  db

     results  for  set  ?me   period  (does  what  you  think  it  does).     Rendered  Output  Cache:  Does  not  cache  db  query.  This   will  query  the  db  (or  query  results  cache),  and  if  there  is   no  change  it  will  output  rendered  html.  If  there  *is*  a   change,  it  will  regenerate  and  cache  resul?ng  html.  
  24. @mikeherchel   Views  Block  Caching

  25. @mikeherchel  

  26. @mikeherchel   BEWARE  the  Bloated  Codebase!

  27. @mikeherchel  

  28. @mikeherchel  

  29. @mikeherchel  

  30. @mikeherchel   Not  all  modules  are  bad...     There

     are  modules  that  will  lend  you  a   hand  in  increasing  your  page  speed...  
  31. @mikeherchel   Lots  of  results  in  your  views? •  Views

     Lite  Pager   h-p://drupal.org/project/views_litepager     (No  SQL  COUNT()'s  in  Query)  
  32. @mikeherchel   Lots  of  anonymous  traffic  and  using  Godaddy  or

      another  crappy  host?   •  Boost   h-p://drupal.org/project/boost     Does  what  Varnish  does  –  but     doesn’t  require  external  service.   This  will  work  on  most  shared     hosts  and  will  drama?cally  speed     up  anonymous  page  requests!  (Plus  it  has  26  essen:al  vitamins  &   minerals!)  
  33. @mikeherchel   Lots  of  authen@cated  traffic  slowing  down  your  server?

    •  Authcache   h-p://drupal.org/project/authcache       Aoer  a  page  is  loaded  by  the  browser,   a  second  HTTP  request  may  be     performed  via  Ajax.  This  ini?ates  a     lightweight  DRUPAL_BOOTSTRAP_   SESSION  that  allows  SQL  queries  to     be  executed,  and  returns  any     user-­‐customized  data  to  the  page  .  
  34. @mikeherchel   Complex  data  types  slowing  down  your  database? • 

    En?ty  Cache   h-p://drupal.org/project/en?tycache     Useful  ONLY  for  large  site  with  lots  of  fields  and  references  your  en?ty  types.  Mostly  useful  for  scalability.   Good  discussion  at  h-p://groups.drupal.org/node/292348  
  35. @mikeherchel   Lots  of  large  images  sucking  up  bandwidth? • 

    ImageAPI  Op?mize   h-p://drupal.org/project/imageapi_op?mize     Losslessly  op?mizes  an  image  when  it  is  saved.     o  Supports  3rd  party  services.   o  Integrates  into  D7  core's  image  styles.  
  36. @mikeherchel   Want  to  cut  down  your  HTTP  Requests? • Advanced

     CSS/JS  Aggrega?on   h-p://drupal.org/project/advagg/     Just  released  stable  version  for  7.x  this  month!!!     Lots  of  cool  features:     o Pre-­‐gzipped  and  compressed  css,js   o Bundle  css,  js  into  one  or  more  file   o Minifica?on   o Much  more!  
  37. @mikeherchel   Modules  to  help  troubleshoot  Drupal  performance  issues • Devel

      h-p://drupal.org/project/devel   o  Query  Log   o  XHProf  support  (must  have  XHProf     installed  on  server)   o  Page  Timer   o  Memory  Usage     • Performance  Logging  and  Monitoring   h-p://drupal.org/project/performance   o  Enables  awesome  performance  logs   o  Can  log  directly  to  DB  -­‐  only  do  this  on  dev  sites   o  On  live  sites  can  log  to  cache  services  (memcache,  apc,  etc)  
  38. @mikeherchel   FRONT-END PERFORMANCE

  39. @mikeherchel   80-­‐90%  of  the  end-­‐user  response  @me  is  spent

     on  the  frontend.  Start  there.   -­‐  Steve  Souders  
  40. @mikeherchel   Performance  Golden  Rule

  41. @mikeherchel   Limit  HTTP  Requests •  What  is  a  HTTP

     Request?  
  42. @mikeherchel   Limit  HTTP  Requests •  "The  fastest  HTTP  Request

     is  the  one  not  made."  -­‐  Chris  Coyier*       •  Modern  Browsers  are  limited  to  6  parallel  connec?ons  (per  server)     •  Design  and  Theme  your  website  with  HTTP  Requests  in  mind     •  CSS  Image  Sprites   •  Inline  Images  (Base64  encoding)   •  Icon  Fonts  
  43. @mikeherchel   Aggregate  your  damned  CSS  &  JS,  Fool! …And,

     Stay  in  School!
  44. @mikeherchel   What  is  a  CSS  Image  Sprite?   • 

    Combine  all  CSS  background  images   into  one  image.     •  Use  CSS's  background-­‐posi?on   property  to  move  the  background   image  into  correct  placement     •  PITA  (but  worth  it)     •  Sass  &  Compass  do  it  for  free!  (YA-­‐   AAAYYY!!)  h-p://compass-­‐style.org/reference/compass/   helpers/sprites/  
  45. @mikeherchel   Inline  Images  in  CSS  &  HTML  (Data  URI's)

    Did  you  know??   Warning! IE8 and up Only! Plus IE only supports <=32KB images!
  46. @mikeherchel   Inline  Images  in  CSS  &  HTML  (Data  URI's)

    •  Saves  an  HTTP  Request!  :)     •  But,  it  makes  your  CSS  or  HTML  file  longer  :(     •  Unless...  you  make  sure  the  files  are  being  compressed  by  your  web  server.  The   total  size  will  (about)  even  out  in  the  end!  :)     •  But,  its  a  PITA  ...you  have  to  upload  your  image  to  a  website  that  converts  it.  :(     •  Unless...  you  use  Sass/Compass!   inline-­‐image("../images/background-­‐pa-ern.png")    :)  
  47. @mikeherchel   Spread  your  HTTP  requests  across  mul@ple   servers!

    •  6  parallel  HTTP  requests  per  server   o  Use  Google  CDN  for  Jquery!  Its  free  and  browser  may  already  have  it  cached!   h-ps://github.com/mherchel/bastard/blob/master/template.php   template.php  
  48. @mikeherchel   Spread  your  HTTP  requests  across  mul@ple   servers!

    Use  a  Content  Delivery  Network!   CDNs  can  spread  assets  across  mul?ple  servers:      sta?c1.yourcdn.com    sta?c2.yourcdn.com    ...   Also,  CDNs  can  serve     assets  from  loca?ons     that  are  physically     closer  to  you.  This  is     a  huge  win  in  the  war     against  latency!   THE ASSETS! CDN ALL
  49. @mikeherchel   Efficient  HTML  Markup! •  Clean  your  HTML,  and

     your  CSS  will  follow.  -­‐  Lara     Swanson  at  h-p://alistapart.com/ar?cle/improving-­‐ux-­‐   through-­‐front-­‐end-­‐performance     •  Not  so  easy  to  do  in  Drupal!  So,  here's  some  easy  ?ps:     o  Create  or  use  a  minimal  base  theme.  Don't  get  stuck     with  unnecessary  wrapper  elements  (Looking  at  you  Omega  3.x!).     o  Modify  Views  to  output  seman?c  HTML  Elements     o  Or  use  the  Fences  Module!  h-p://drupal.org/project/fences  
  50. @mikeherchel   The  ?me  it  takes  to  download  your  webpage…

      IS TOO DAMNED HIGH!!!
  51. @mikeherchel   Lower  your  bandwidth! •  Make  sure  your  host

     is  gzipping  sta?c  assets!   •  Make  sure  sta?c  assets  are  able  to  be  cached  by  your  browser!   •  Op?mize  your  images!  (use  that  image  api  op?mizer  module  or  do  it  manually)   •  Use  JPGs  instead  of  PNGs  when  you  can   •  Don't  use  a  lot  of  images!     •  Don't  load  unnecessary  images  in  mobile  css  (progressive  enhancement)   •  Use  responsive  image  solu?ons   o  Borealis  Responsive  Images  (h-ps://drupal.org/project/borealis)     o  Clientside  Adap?ve  Images  (h-ps://drupal.org/project/cs_adap?ve_image)    
  52. @mikeherchel   Efficient  CSS  Markup! •  Limit  the  nes?ng  of

     your  selectors  to  as  li-le  as  possible     •  Don't  use  elements  as  selectors.  Use  IDs  or  classes  instead.     •  This  is  baaaadd...     •  Use       Instead  of     •  Limit  CSS3  selectors  (:nth-­‐child(),  :last-­‐child,  etc)   h-p://css-­‐tricks.com/efficiently-­‐rendering-­‐css/  
  53. @mikeherchel   Efficient  JavaScript! •  Pay  A-en?on  to  your  JS

     performance!     •  JS  execu?on  take  approx  10x  longer  on  mobile  devices  (due  to  less  RAM  and  CPU)     •  Async  and  deferred  JS  execu?on  -­‐  h-p://www.html5rocks.com/   en/tutorials/async/deferred/  and  h-p://peter.sh/experiments/asynchronous   -­‐and-­‐deferred-­‐javascript-­‐execu?on-­‐explained/     •  h-p://jsperf.com  -­‐  aims  to  provide    an  easy  way  to     create  and  share  test  cases,  comparing  the  perform-­‐   ance  of  different  JS  snippets  by  running  benchmarks.    
  54. @mikeherchel   Quick  Chrome  Tools  Overview [Demo  Time!]  

  55. @mikeherchel   General  Resources •  High  Performance  on  groups.drupal.org  h-p://groups.drupal.org/high-­‐performance

        •  Beginner's  Guide  to  Caching  Data  in  Drupal  7  (in  code)   h-p://www.lullabot.com/blog/ar?cles/beginners-­‐guide-­‐caching-­‐data-­‐drupal-­‐7     •  Top  15  Drupal  performance  ?ps h-p://www.netmagazine.com/features/top-­‐15-­‐drupal-­‐performance-­‐?ps     •  DrupalCon  Sydney:  Performance  Tough  Love h-p://www.youtube.com/watch?v=WoFBAGHvAFA  
  56. @mikeherchel   Backend  Resources •  Video:  An  Overview  of  Performance

     &  Scalability  by  Nate  Haug  (This  is   awesome)h-p://drupalize.me/videos/overview-­‐performance-­‐scalability     •  Every  damned  thing  on  2bits.com  h-p://2bits.com/     •  ...including  Xen  vs  Virtuozzo  (Cloud  compu?ng) h-p://2bits.com/ar?cles/common-­‐issues-­‐and-­‐solu?ons-­‐dealing-­‐cloud-­‐   compu?ng-­‐and-­‐vps-­‐performance-­‐issues-­‐drupal.html  
  57. @mikeherchel   Front-­‐end  Resources •  High  Performance  Web  Sites  Blog

     -­‐  Steve  Souders   (Lots  of  great  JS  op?miza?on  ?ps)h-p://stevesouders.com/     •  Presenta?on:  Even  Faster  Websites  (Steve  Souders) h-p://www.slideshare.net/souders/sxsw-­‐even-­‐faster-­‐web-­‐sites     •  Let’s  Do  Simple  Stuff  to  Make  Our  Websites  Faster  (Chris  Coyier) h-p://css-­‐tricks.com/video-­‐screencasts/114-­‐lets-­‐do-­‐simple-­‐stuff-­‐to-­‐make-­‐our-­‐websites-­‐faster/  
  58. @mikeherchel   And  in  closing... •  Don't  forget  about  tonight's

     aoerparty  in  the  lobby     •  Thanks  to  Drupalcamp  Atlanta  and  all  its  awesome  sponsors!     •  The  date  for  Florida  Drupalcamp  has  been  announced!  March  8th  in  Winter  Park!     •  Go  Gators  (beat  Mizzou)!!     •  I'm  on  Twi-er  at  @mikeherchel     •  And,  Remember….  
  59. @mikeherchel