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

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

Michael Herchel

October 19, 2013
Tweet

More Decks by Michael Herchel

Other Decks in Technology

Transcript

  1. @mikeherchel  
    Mike  Herchel    
    @mikeherchel  
     

    View Slide

  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

    View Slide

  3. @mikeherchel  

    View Slide

  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!!

    View Slide

  5. @mikeherchel  
    h-p://minus.com/msM8y8nyh#1e  

    View Slide

  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...

    View Slide

  7. @mikeherchel  
    More  so  for  mobile...
    You're  not  just  
    compe?ng  with  
    other  sites.  You're  
    compe?ng  with  
    na?ve  apps.  

    View Slide

  8. @mikeherchel  
    More  so  for  mobile...
    Mobile  First  =  Mobile  
    Performance  First    
    Start  thinking  about  performance  at  the  
    design  stage  (  -­‐  Dave  Olsen)  

    View Slide

  9. @mikeherchel  

    View Slide

  10. @mikeherchel  
    Keep  It  Simple,  Stupid!

    View Slide

  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)  

    View Slide

  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  

    View Slide

  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!  

    View Slide

  14. @mikeherchel  
    SERVER-SIDE
    CACHING
    ...  Or  how  the  pros  do  it.  

    View Slide

  15. @mikeherchel  
    Normal  Hos@ng  Environment

    View Slide

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

    View Slide

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

    View Slide

  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  

    View Slide

  19. @mikeherchel  
    Reverse  Proxy  caching  goodness...

    View Slide

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

    View Slide

  21. @mikeherchel  

    View Slide

  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.  

    View Slide

  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.  

    View Slide

  24. @mikeherchel  
    Views  Block  Caching

    View Slide

  25. @mikeherchel  

    View Slide

  26. @mikeherchel  
    BEWARE  the  Bloated  Codebase!

    View Slide

  27. @mikeherchel  

    View Slide

  28. @mikeherchel  

    View Slide

  29. @mikeherchel  

    View Slide

  30. @mikeherchel  
    Not  all  modules  are  bad...  
     
    There  are  modules  that  will  lend  you  a  
    hand  in  increasing  your  page  speed...  

    View Slide

  31. @mikeherchel  
    Lots  of  results  in  your  views?
    •  Views  Lite  Pager  
    h-p://drupal.org/project/views_litepager  
     
    (No  SQL  COUNT()'s  in  Query)  

    View Slide

  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!)  

    View Slide

  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  .  

    View Slide

  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  

    View Slide

  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.  

    View Slide

  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!  

    View Slide

  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)  

    View Slide

  38. @mikeherchel  
    FRONT-END
    PERFORMANCE

    View Slide

  39. @mikeherchel  
    80-­‐90%  of  the  end-­‐user  response  @me  is  spent  on  the  frontend.  Start  there.  
    -­‐  Steve  Souders  

    View Slide

  40. @mikeherchel  
    Performance  Golden  Rule

    View Slide

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

    View Slide

  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  

    View Slide

  43. @mikeherchel  
    Aggregate  your  damned  CSS  &  JS,  Fool!
    …And,  Stay  in  School!

    View Slide

  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/  

    View Slide

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

    View Slide

  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")    :)  

    View Slide

  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  

    View Slide

  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

    View Slide

  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  

    View Slide

  50. @mikeherchel  
    The  ?me  it  takes  to  download  your  webpage…  
    IS TOO DAMNED
    HIGH!!!

    View Slide

  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)    

    View Slide

  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/  

    View Slide

  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.    

    View Slide

  54. @mikeherchel  
    Quick  Chrome  Tools  Overview
    [Demo  Time!]  

    View Slide

  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  

    View Slide

  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  

    View Slide

  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/  

    View Slide

  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….  

    View Slide

  59. @mikeherchel  

    View Slide