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

Front End Performance Improvements

Front End Performance Improvements

A Drupal core conversation on about Front End Performance we can make for Drupal 8.

Matt Farina

March 20, 2012
Tweet

More Decks by Matt Farina

Other Decks in Technology

Transcript

  1. Hi, My name is Matt. You might know me as

    mfer. I’ve been Drupaling for almost 7 years. @mattfarina Tuesday, March 20, 12
  2. We’ve Shown We Care About Performance • Numerous DrupalCon sessions

    on performance. • Memcache, APC, Boost, and numerous other performance modules. • Drupal 7 works well with reverse proxys. • Lots of internal optimizations in Drupal. • I could go on and on.... but.... Tuesday, March 20, 12
  3. http://www.stevesouders.com/blog/2012/02/10/the-performance-golden-rule/ 13% 87% Front End Back End The HTTP Archive

    measurement of where time spent generating a page happens for the top 50K sites. Tuesday, March 20, 12
  4. 15% 85% Front End Back End 3% 97% Front End

    Back End Desktop Mobile http://www.readwriteweb.com/hack/2011/06/mobile-page-response.php Tuesday, March 20, 12
  5. http://www.slideshare.net/stoyan/yslow-20-presentation “Yahoo! reported that making pages just 400 milliseconds slower

    resulted in a traffic drop of up to 9%.” * Google, Amazon, and others have found similar results. Tuesday, March 20, 12
  6. In the post-PC era our sites aren’t just competing with

    other sites. They’re competing and working with with native apps. Tuesday, March 20, 12
  7. Others working on Front End Performance • Browser manufacturers working

    on JS, DNS prefetching, and many other techniques. • Mobile networks (4g improvements over 3g) • New Protocols (SPDY) • Linux Kernel TCP Slow-Start Changes Tuesday, March 20, 12
  8. If we’re going to take performance seriously we need to

    improve on Front End Performance in Drupal. Tuesday, March 20, 12
  9. Stuff We Do Well • Lossless compression of our images.

    • Aggregate our CSS and JS. Note, we can improve how we do this. • Extendable image handling. Tuesday, March 20, 12
  10. http://www.itu.int/ITU-D/ict/facts/2011/material/ICTFactsFigures2011.pdf According to ITU (UN agency for information and communications

    technology) in 2011 we only had 45% of 3g or better coverage worldwide. Drupal is Worldwide Tuesday, March 20, 12
  11. 6 The number of parallel connections to a domain across

    all tabs and windows in desktop browsers. Tuesday, March 20, 12
  12. 10x JavaScript on mobile devices (high end ones) takes about

    10x as long to execute on mobile devices compared to desktop computers. Tuesday, March 20, 12
  13. 512MB The amount of RAM in the iPhone 4s and

    iPad 2. Mobile devices typically have 1GB or less of RAM. This helps extend battery life. Tuesday, March 20, 12
  14. Minification (also minimisation or minimization), in computer programming languages and

    especially JavaScript, is the process of removing all unnecessary characters from source code, without changing its functionality. These unnecessary characters usually include white space characters, new line characters, comments, and sometimes block delimiters, which are used to add readability to the code but are not required for it to execute. https://en.wikipedia.org/wiki/Minification_(programming) Tuesday, March 20, 12
  15. Others Minifying Their Production JS jQuery Dojo MooTools YUI SWFObject

    Ext jQuery UI Backbone Underscore Three.js Sharepoint Wordpress Tuesday, March 20, 12
  16. Minify on the fly or ship with minified files? Answer:

    Ship with minifed files Tuesday, March 20, 12
  17. jsmin-php v. UglifyJS • UglifyJS produces smaller files. drupal.js is

    7% smaller. • jsmin-php no longer maintained. • UglifsJS no runtime cost. jsmin-php has runtime cost. drupal.js (.25s) and jquery.js (2.5s) are examples. • Some files (like jQuery ba-bbq) have a second license block half way through file. You can’t automate keeping these. Tuesday, March 20, 12
  18. Add A Toggle To Performance Page This is a screenshot

    from jquery.com. Tuesday, March 20, 12
  19. When Do We Update Minified Files? • When each full

    source JS file is changed? • At release time? A job of the person generating the release? • Automated via a script? We can work out the details in the issue queue. Tuesday, March 20, 12
  20. (function ($) { // Our JS goes here. })(jQuery); (function

    ($, Drupal) { // Our JS goes here. })(jQuery, Drupal); Switch To Currently Oh look, dependency injection. http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth Tuesday, March 20, 12
  21. What’s The Savings? The Original drupal.js = 13852 drupal.min.js =

    3338 24% the size. Modified Version drupal.js = 13868 drupal.min.js = 3132 22.5% the size. Smaller Files and Larger % Savings. Tuesday, March 20, 12
  22. Assetic Some  Good • Can tie in with minification if

    available. • Can use for Image lossless compression when packages available. • Filters, extensions, etc. • Sass, Stylus, Less, CoffeeScript. Needs  Works • No Aggregation. • Sass, Stylus, Less, CoffeeScript. Tuesday, March 20, 12
  23. “We tested our CSS and found 80% wasn’t being used.”

    * Terribly paraphrased from IRC Tuesday, March 20, 12
  24. Undocumented Hack stylesheets[all][] = system.menu.css stylesheets[all][] = system.theme.css stylesheets[all][] =

    system.message.css stylesheets[all][] = system.menu.css Tuesday, March 20, 12
  25. Let’s Add A Documented Feature exclude-stylesheet[] = system.menu.css exclude-stylesheet[] =

    system.theme.css exclude-stylesheet[] = system.message.css exclude-stylesheet[] = system.menu.css Tuesday, March 20, 12
  26. Faster Mobile Sites Wednesday 3:45pm in Room MHB 1A Learn

     What  You  Can  Do  In  Your  Sites  Now Tuesday, March 20, 12
  27. What did you think? Locate this session on the DrupalCon

    Denver website http://denver2012.drupal.org/program Click the “Take the Survey” link. Thank You! Tuesday, March 20, 12