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

1. Tuesday, March 20, 12

2. Core Conversations
Front End Performance
Improvements
Presented by Matt Farina
Tuesday, March 20, 12

3. Hi, My name is Matt.You might
know me as mfer. I’ve been
Drupaling for almost 7 years.
@mattfarina
Tuesday, March 20, 12

4. Download the slides...
http://www.slideshare.net/mattfarina
http://speakerdeck.com/u/mattfarina
Tuesday, March 20, 12

5. Why is Front End
Performance Important?
Tuesday, March 20, 12

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. 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. Front End Back End Front End Back End
15% 3%
85% 97%
Desktop Mobile
http://www.readwriteweb.com/hack/2011/06/mobile-page-response.php
Tuesday, March 20, 12

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-presentation
Tuesday, March 20, 12

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

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-cem
Tuesday, March 20, 12

13. If we’re going to take performance
seriously we need to improve on
Front End Performance in Drupal.
Tuesday, March 20, 12

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. Let’s Get Technical About
What’s Happening
Tuesday, March 20, 12

16. 4G will solve our mobile problems, right?
http://www.flickr.com/photos/eliu500/5332240987/
Tuesday, March 20, 12

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.pdf
Tuesday, March 20, 12

18. Mobile phone network
latency is 2-10x that of wired
connections.
http://www.slideshare.net/guest22d4179/latency-trumps-all
Tuesday, March 20, 12

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. 6
The number of parallel connections to a domain
across all tabs and windows in desktop browsers.
Tuesday, March 20, 12

21. Tuesday, March 20, 12

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. 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. Part 1: Minify All Core
JavaScript
Tuesday, March 20, 12

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. Original 24% the Size
Minified drupal.js
Tuesday, March 20, 12

27. Others Minifying Their Production JS
jQuery Dojo MooTools YUI
SWFObject Ext jQuery UI Backbone
Underscore Three.js Sharepoint Wordpress
Tuesday, March 20, 12

28. Minify on the fly or ship
with minified files?
Answer: Ship with minifed files
Tuesday, March 20, 12

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. Add A Toggle To Performance Page
This is a screenshot from jquery.com.
Tuesday, March 20, 12

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. Want Minified Core JS in D7?
Speedy Module
http://drupal.org/project/speedy
Tuesday, March 20, 12

33. Part 2: Use the JavaScript
Module Pattern
Tuesday, March 20, 12

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-Depth
Tuesday, March 20, 12

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. Learn More About The Module Pattern!
http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth
Tuesday, March 20, 12

37. Part 3: Make JS and CSS
Handling Pluggable
Tuesday, March 20, 12

38. Example 1: google.com mobile
Page assets are cached in local storage.
Tuesday, March 20, 12

39. Example 2: Lazy Evaluation
http://calendar.perfplanet.com/2011/lazy-evaluation-of-commonjs-modules/
Tuesday, March 20, 12

40. Example 3: Bundled Aggregation
Tuesday, March 20, 12

41. Let’s Make it Pluggable!
http://drupal.org/node/352951
Tuesday, March 20, 12

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. 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. Part 4: Exclude CSS Files
Tuesday, March 20, 12

45. “We tested our CSS and
found 80% wasn’t being
used.”
* Terribly paraphrased from IRC
Tuesday, March 20, 12

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

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.css
Tuesday, March 20, 12

48. Learn What You Can Do In Your Sites Now
Faster Mobile Sites
Wednesday 3:45pm in Room MHB 1A
Tuesday, March 20, 12

49. Questions?
Tuesday, March 20, 12

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