Faster front end performance
•
0 likes•591 views
This document summarizes a presentation about improving front-end performance for Drupal websites. The presentation was given by Dan Mouyard and Matt Farina and covered various techniques for optimizing assets, network performance, and code efficiency to make sites load faster. These included using Varnish, caching, image optimization, CSS sprites, minifying code, proper stylesheet and script placement, and optimized selector performance. The document provided examples and resources for further information.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Faster front end performance
Similar to Faster front end performance (20)
More from Matthew Farina
More from Matthew Farina (19)
Recently uploaded
Recently uploaded (20)
Faster front end performance
- 1. Faster Front End Performance Dan Mouyard Matt Farina
- 2. Varnish Web Heads Cluster Web Heads MySQL Slave CDN Opcode Cache Memcache
- 6. Dan Mouyard (dcmouyard) TerpSys Accessibility & Performance Focused Themer 3 Years With Drupal World Champion Old-Time Piano Player
- 7. Matt Farina (mfer) Palantir.net Co-Author of Drupal 7 Module Development Core Contributor Over 5.5 Years With Drupal
- 8. Who sees slow sites? http://www.flickr.com/photos/valeriebb/3006348550/
- 10. Other Browsers Internet Explorer 44% 56% http://en.wikipedia.org/wiki/Usage_share_of_web_browsers
- 12. Slow Connection Speeds http://www.flickr.com/photos/csessums/4460821479/
- 13. Why Does It Matter?
- 15. SEO
- 17. YSlow
- 18. Page Speed
- 20. Logged In
- 22. JSMin YUI Compressor Google Closure Compiler UglifyJS
- 26. 6 Connections Per Domain
- 27. IE 6/7 Two Per Domain
- 28. Slow High Speed Connections? 48 KiB/s 384 kbps
- 29. Real World Numbers 49 - 514 KiB/s 392 - 4112 kbps
- 33. Under Slow 3G Speeds
- 34. Images
- 35. Quantity
- 36. Filesize
- 37. Graphics Interchange Format GIF
- 38. JPEG Joint Photographic Experts Group
- 39. PNG Portable Network Graphics
- 40. Graphics
- 42. Photographs
- 46. PNG Transparency
- 47. PNG Transparency No AlphaImageLoader for IE6!
- 50. Image Styles
- 51. CSS Sprites
- 52. CSS Sprites
- 53. CSS Sprites
- 57. 269.6 kb 37 CSS Images
- 58. 88.7 kb 4 CSS Images
- 59. Cache Theme Images .htaccess, web.config
- 60. CSS & JS
- 61. page.tpl.php Placement in Drupal 6 <html> <head> $styles </head> <body> $scripts $closure </body> </html>
- 62. html.tpl.php Placement in Drupal 7 <html> <head> $styles </head> <body> $scripts $page_bottom </body> </html>
- 64. 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>
- 65. 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
- 66. 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
- 67. 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
- 68. 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
- 69. 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!
- 70. 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
- 71. 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
- 72. 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
- 73. 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/
- 74. Q&A
- 75. What did you think? Locate this session on the DCC website: http://chicago2011.drupal.org/sessions Click the “Take the Survey” link. Thanks!