Tuesday, March 20, 12
Core Conversations                        Front End Performance                            Improvements                   ...
Hi, My name is Matt.You might                        know me as mfer. I’ve been                        Drupaling for almos...
Download the slides...          http://www.slideshare.net/mattfarina                        http://speakerdeck.com/u/mattf...
Why is Front End                        Performance Important?Tuesday, March 20, 12
We’ve Shown We Care                             About Performance                        • Numerous DrupalCon sessions on ...
The HTTP Archive measurement of where                   time spent generating a page happens for                          ...
Front End        Back End                           Front End              Back End                             15%       ...
“Yahoo! reported that making                pages just 400 milliseconds                 slower resulted in a traffic       ...
In the post-PC era our                        sites aren’t just competing                         with other sites. They’r...
Others working on                             Front End Performance                  • Browser manufacturers working on JS...
85% of mobile users expect sites to               load at least as fast as using a desktop                         or lapt...
If we’re going to take performance                    seriously we need to improve on                    Front End Perform...
Stuff We Do Well                        • Lossless compression of our images.                        • Aggregate our CSS a...
Let’s Get Technical About                            What’s HappeningTuesday, March 20, 12
4G will solve our mobile problems, right?                        http://www.flickr.com/photos/eliu500/5332240987/Tuesday, M...
Drupal is Worldwide                        According to ITU (UN agency for                        information and communic...
Mobile phone network                latency is 2-10x that of wired                        connections.                    ...
TCP connections aren’t great for small                        files (all your non-media assets are small                   ...
6        The number of parallel connections to a domain       across all tabs and windows in desktop browsers.Tuesday, Mar...
Tuesday, March 20, 12
10x                 JavaScript on mobile devices (high end               ones) takes about 10x as long to execute on      ...
512MB                 The amount of RAM in the iPhone 4s and               iPad 2. Mobile devices typically have 1GB or   ...
Part 1: Minify All Core                              JavaScriptTuesday, March 20, 12
Minification (also minimisation or minimization), in       computer programming languages and especially       JavaScript, ...
Original          24% the Size                             Minified drupal.jsTuesday, March 20, 12
Others Minifying Their Production JS              jQuery             Dojo         MooTools            YUI         SWFObjec...
Minify on the fly or ship                          with minified files?                        Answer: Ship with minifed files...
jsmin-php v. UglifyJS                        • UglifyJS produces smaller files. drupal.js is 7%                         sma...
Add A Toggle To Performance Page                         This is a screenshot from jquery.com.Tuesday, March 20, 12
When Do We Update Minified Files?                        • When each full source JS file is changed?                        ...
Want Minified Core JS in D7?                                 Speedy Module                              http://drupal.org/p...
Part 2: Use the JavaScript                              Module PatternTuesday, March 20, 12
Currently                                            Switch To                    (function ($) {                         ...
What’s The Savings?                          The Original                          drupal.js = 13852                      ...
Learn More About The Module Pattern!                http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Dept...
Part 3: Make JS and CSS                          Handling PluggableTuesday, March 20, 12
Example 1: google.com mobile                             Page assets are cached in local storage.Tuesday, March 20, 12
Example 2: Lazy Evaluation                        http://calendar.perfplanet.com/2011/lazy-evaluation-of-commonjs-modules/...
Example 3: Bundled AggregationTuesday, March 20, 12
Let’s Make it Pluggable!                         http://drupal.org/node/352951Tuesday, March 20, 12
In Discussion: Assetic                        PHP 5.3 Asset (JS/CSS) Management                             https://github...
Assetic                        Some  Good                        • Can tie in with minification if available.              ...
Part 4: Exclude CSS FilesTuesday, March 20, 12
“We tested our CSS and                        found 80% wasn’t being                        used.”                        ...
Undocumented Hack                stylesheets[all][]   =   system.menu.css                stylesheets[all][]   =   system.t...
Let’s Add A Documented Feature             exclude-stylesheet[]      =   system.menu.css             exclude-stylesheet[] ...
Learn  What  You  Can  Do  In  Your  Sites  Now                                 Faster Mobile Sites                       ...
Questions?Tuesday, March 20, 12
What did you think?                         Locate this session on the                         DrupalCon Denver website   ...
Upcoming SlideShare
Loading in...5
×

Front end performance improvements

3,116

Published on

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

Published in: Technology, Design
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,116
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
44
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Front end performance improvements

  1. 1. Tuesday, March 20, 12
  2. 2. Core Conversations Front End Performance Improvements Presented by Matt FarinaTuesday, March 20, 12
  3. 3. Hi, My name is Matt.You might know me as mfer. I’ve been Drupaling for almost 7 years. @mattfarinaTuesday, March 20, 12
  4. 4. Download the slides... http://www.slideshare.net/mattfarina http://speakerdeck.com/u/mattfarinaTuesday, March 20, 12
  5. 5. Why is Front End Performance Important?Tuesday, March 20, 12
  6. 6. 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
  7. 7. The HTTP Archive measurement of where time spent generating a page happens for the top 50K sites. Front End Back End 13% 87% http://www.stevesouders.com/blog/2012/02/10/the-performance-golden-rule/Tuesday, March 20, 12
  8. 8. Front End Back End Front End Back End 15% 3% 85% 97% Desktop Mobile http://www.readwriteweb.com/hack/2011/06/mobile-page-response.phpTuesday, March 20, 12
  9. 9. “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. http://www.slideshare.net/stoyan/yslow-20-presentationTuesday, March 20, 12
  10. 10. 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
  11. 11. 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 ChangesTuesday, March 20, 12
  12. 12. 85% of mobile users expect sites to load at least as fast as using a desktop or laptop computer. http://www.tealeaf.com/customer-experience-management/resource-center/register.php?doc=mobile-cemTuesday, March 20, 12
  13. 13. If we’re going to take performance seriously we need to improve on Front End Performance in Drupal.Tuesday, March 20, 12
  14. 14. 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
  15. 15. Let’s Get Technical About What’s HappeningTuesday, March 20, 12
  16. 16. 4G will solve our mobile problems, right? http://www.flickr.com/photos/eliu500/5332240987/Tuesday, March 20, 12
  17. 17. Drupal is Worldwide According to ITU (UN agency for information and communications technology) in 2011 we only had 45% of 3g or better coverage worldwide. http://www.itu.int/ITU-D/ict/facts/2011/material/ICTFactsFigures2011.pdfTuesday, March 20, 12
  18. 18. Mobile phone network latency is 2-10x that of wired connections. http://www.slideshare.net/guest22d4179/latency-trumps-allTuesday, March 20, 12
  19. 19. TCP connections aren’t great for small files (all your non-media assets are small files). This is due to TCP slow start. http://www.stevesouders.com/blog/2010/07/13/velocity-tcp-and-the-lower-bound-of-web-performance/Tuesday, March 20, 12
  20. 20. 6 The number of parallel connections to a domain across all tabs and windows in desktop browsers.Tuesday, March 20, 12
  21. 21. Tuesday, March 20, 12
  22. 22. 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
  23. 23. 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
  24. 24. Part 1: Minify All Core JavaScriptTuesday, March 20, 12
  25. 25. 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
  26. 26. Original 24% the Size Minified drupal.jsTuesday, March 20, 12
  27. 27. Others Minifying Their Production JS jQuery Dojo MooTools YUI SWFObject Ext jQuery UI Backbone Underscore Three.js Sharepoint WordpressTuesday, March 20, 12
  28. 28. Minify on the fly or ship with minified files? Answer: Ship with minifed filesTuesday, March 20, 12
  29. 29. 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
  30. 30. Add A Toggle To Performance Page This is a screenshot from jquery.com.Tuesday, March 20, 12
  31. 31. 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
  32. 32. Want Minified Core JS in D7? Speedy Module http://drupal.org/project/speedyTuesday, March 20, 12
  33. 33. Part 2: Use the JavaScript Module PatternTuesday, March 20, 12
  34. 34. Currently Switch To (function ($) { (function ($, Drupal) { // Our JS goes here. // Our JS goes here. })(jQuery); })(jQuery, Drupal); Oh look, dependency injection. http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-DepthTuesday, March 20, 12
  35. 35. 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
  36. 36. Learn More About The Module Pattern! http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-DepthTuesday, March 20, 12
  37. 37. Part 3: Make JS and CSS Handling PluggableTuesday, March 20, 12
  38. 38. Example 1: google.com mobile Page assets are cached in local storage.Tuesday, March 20, 12
  39. 39. Example 2: Lazy Evaluation http://calendar.perfplanet.com/2011/lazy-evaluation-of-commonjs-modules/Tuesday, March 20, 12
  40. 40. Example 3: Bundled AggregationTuesday, March 20, 12
  41. 41. Let’s Make it Pluggable! http://drupal.org/node/352951Tuesday, March 20, 12
  42. 42. In Discussion: Assetic PHP 5.3 Asset (JS/CSS) Management https://github.com/kriswallsmith/assetic Note, the developer has offered to help.Tuesday, March 20, 12
  43. 43. 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
  44. 44. Part 4: Exclude CSS FilesTuesday, March 20, 12
  45. 45. “We tested our CSS and found 80% wasn’t being used.” * Terribly paraphrased from IRCTuesday, March 20, 12
  46. 46. Undocumented Hack stylesheets[all][] = system.menu.css stylesheets[all][] = system.theme.css stylesheets[all][] = system.message.css stylesheets[all][] = system.menu.cssTuesday, March 20, 12
  47. 47. 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.cssTuesday, March 20, 12
  48. 48. Learn  What  You  Can  Do  In  Your  Sites  Now Faster Mobile Sites Wednesday 3:45pm in Room MHB 1ATuesday, March 20, 12
  49. 49. Questions?Tuesday, March 20, 12
  50. 50. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×