Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Faster front end performance

530 views

Published on

Faster front end performance for Drupal sites from DrupalCon Chicago.

Published in: Software
  • Be the first to comment

  • Be the first to like this

Faster front end performance

  1. 1. Faster Front End Performance Dan Mouyard Matt Farina
  2. 2. Varnish Web Heads Cluster Web Heads MySQL Slave CDN Opcode Cache Memcache
  3. 3. Front End Performance?
  4. 4. Dan Mouyard (dcmouyard) TerpSys Accessibility & Performance Focused Themer 3 Years With Drupal World Champion Old-Time Piano Player
  5. 5. Matt Farina (mfer) Palantir.net Co-Author of Drupal 7 Module Development Core Contributor Over 5.5 Years With Drupal
  6. 6. Who sees slow sites? http://www.flickr.com/photos/valeriebb/3006348550/
  7. 7. Internet Explorer Users
  8. 8. Other Browsers Internet Explorer 44% 56% http://en.wikipedia.org/wiki/Usage_share_of_web_browsers
  9. 9. http://www.flickr.com/photos/tagzania/3117584313/ Mobile Users
  10. 10. Slow Connection Speeds http://www.flickr.com/photos/csessums/4460821479/
  11. 11. Why Does It Matter?
  12. 12. http://www.flickr.com/photos/vectorportal/4929890104/ Satisfied Users
  13. 13. SEO
  14. 14. Toolbox http://www.flickr.com/photos/dipster1/1403240351/
  15. 15. YSlow
  16. 16. Page Speed
  17. 17. Minify Savings (JSMin)
  18. 18. Logged In
  19. 19. Appearance Editor Yikes!
  20. 20. JSMin YUI Compressor Google Closure Compiler UglifyJS
  21. 21. Waterfall Diagrams
  22. 22. 6 Connections Per Domain
  23. 23. IE 6/7 Two Per Domain
  24. 24. Slow High Speed Connections? 48 KiB/s 384 kbps
  25. 25. Real World Numbers 49 - 514 KiB/s 392 - 4112 kbps
  26. 26. TThhrroottttlliinngg PPrrooxxyy
  27. 27. Pulling From Cache
  28. 28. Under Slow 3G Speeds
  29. 29. Images
  30. 30. Quantity
  31. 31. Filesize
  32. 32. Graphics Interchange Format GIF
  33. 33. JPEG Joint Photographic Experts Group
  34. 34. PNG Portable Network Graphics
  35. 35. Graphics
  36. 36. Graphics PNG8, GIF
  37. 37. Photographs
  38. 38. Photographs JPEG, PNG
  39. 39. PNG Transparency
  40. 40. PNG Transparency No AlphaImageLoader for IE6!
  41. 41. Image Compression
  42. 42. Image Styles
  43. 43. CSS Sprites
  44. 44. CSS Sprites
  45. 45. CSS Sprites
  46. 46. 269.6 kb 37 CSS Images
  47. 47. 88.7 kb 4 CSS Images
  48. 48. Cache Theme Images .htaccess, web.config
  49. 49. CSS & JS
  50. 50. page.tpl.php Placement in Drupal 6 <html> <head> $styles </head> <body> $scripts $closure </body> </html>
  51. 51. html.tpl.php Placement in Drupal 7 <html> <head> $styles </head> <body> $scripts $page_bottom </body> </html>
  52. 52. Selector Performance
  53. 53. Quick! Get that link! <div id="nav"> <ul class="nav-­‐list"> <li class="nav-­‐item"> <a id="menu-­‐link-­‐42" class="nav-­‐link"></a> </li> </ul> </div>
  54. 54. Quick! Get that link! <div id="nav"> <ul class="nav-­‐list"> <li class="nav-­‐item"> <a id="menu-­‐link-­‐42" class="nav-­‐link"></a> </li> </ul> </div> div#nav ul.nav-­‐list li a
  55. 55. Quick! Get that link! <div id="nav"> <ul class="nav-­‐list"> <li class="nav-­‐item"> <a id="menu-­‐link-­‐42" class="nav-­‐link"></a> </li> </ul> </div> #nav .nav-­‐list li a
  56. 56. Quick! Get that link! <div id="nav"> <ul class="nav-­‐list"> <li class="nav-­‐item"> <a id="menu-­‐link-­‐42" class="nav-­‐link"></a> </li> </ul> </div> #nav > .nav-­‐list > li > a
  57. 57. Quick! Get that link! <div id="nav"> <ul class="nav-­‐list"> <li class="nav-­‐item"> <a id="menu-­‐link-­‐42" class="nav-­‐link"></a> </li> </ul> </div> #nav a
  58. 58. Quick! Get that link! <div id="nav"> <ul class="nav-­‐list"> <li class="nav-­‐item"> <a id="menu-­‐link-­‐42" class="nav-­‐link"></a> </li> </ul> </div> #nav a * Never use the universal selector!
  59. 59. Quick! Get that link! <div id="nav"> <ul class="nav-­‐list"> <li class="nav-­‐item"> <a id="menu-­‐link-­‐42" class="nav-­‐link"></a> </li> </ul> </div> #nav .nav-­‐link
  60. 60. Quick! Get that link! <div id="nav"> <ul class="nav-­‐list"> <li class="nav-­‐item"> <a id="menu-­‐link-­‐42" class="nav-­‐link"></a> </li> </ul> </div> #nav #menu-­‐link-­‐42
  61. 61. Quick! Get that link! <div id="nav"> <ul class="nav-­‐list"> <li class="nav-­‐item"> <a id="menu-­‐link-­‐42" class="nav-­‐link"></a> </li> </ul> </div> #menu-­‐link-­‐42
  62. 62. Resources • Even Faster Websites by Steve Souders • Steve Souders blog - http://stevesouders.com/ • Web Performance Best Practices - http:// People view web pages in browsers code.google.html, com/images, speed/css, js page-speed/docs/ rules_intro.server html side performance != seen performance for users • YDN Performance - http://developer.yahoo.com/ performance/
  63. 63. Q&A
  64. 64. What did you think? Locate this session on the DCC website: http://chicago2011.drupal.org/sessions Click the “Take the Survey” link. Thanks!

×