front end performance improvements
DESCRIPTION
A Drupalcon Drupal core conversation on about Front End Performance we can make for Drupal 8.TRANSCRIPT
![Page 1: Front end performance improvements](https://reader036.vdocuments.mx/reader036/viewer/2022062319/5556db45d8b42a0f028b489f/html5/thumbnails/1.jpg)
Tuesday, March 20, 12
![Page 2: Front end performance improvements](https://reader036.vdocuments.mx/reader036/viewer/2022062319/5556db45d8b42a0f028b489f/html5/thumbnails/2.jpg)
Core Conversations
Front End Performance Improvements
Presented by Matt Farina
Tuesday, March 20, 12
![Page 3: Front end performance improvements](https://reader036.vdocuments.mx/reader036/viewer/2022062319/5556db45d8b42a0f028b489f/html5/thumbnails/3.jpg)
Hi, My name is Matt. You might know me as mfer. I’ve been Drupaling for almost 7 years.@mattfarina
Tuesday, March 20, 12
![Page 4: Front end performance improvements](https://reader036.vdocuments.mx/reader036/viewer/2022062319/5556db45d8b42a0f028b489f/html5/thumbnails/4.jpg)
http://www.slideshare.net/mattfarinahttp://speakerdeck.com/u/mattfarina
Download the slides...
Tuesday, March 20, 12
![Page 5: Front end performance improvements](https://reader036.vdocuments.mx/reader036/viewer/2022062319/5556db45d8b42a0f028b489f/html5/thumbnails/5.jpg)
Why is Front EndPerformance Important?
Tuesday, March 20, 12
![Page 6: Front end performance improvements](https://reader036.vdocuments.mx/reader036/viewer/2022062319/5556db45d8b42a0f028b489f/html5/thumbnails/6.jpg)
We’ve Shown We CareAbout 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
![Page 7: Front end performance improvements](https://reader036.vdocuments.mx/reader036/viewer/2022062319/5556db45d8b42a0f028b489f/html5/thumbnails/7.jpg)
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
![Page 8: Front end performance improvements](https://reader036.vdocuments.mx/reader036/viewer/2022062319/5556db45d8b42a0f028b489f/html5/thumbnails/8.jpg)
15%
85%
Front End Back End
3%
97%
Front End Back End
Desktop Mobile
http://www.readwriteweb.com/hack/2011/06/mobile-page-response.phpTuesday, March 20, 12
![Page 9: Front end performance improvements](https://reader036.vdocuments.mx/reader036/viewer/2022062319/5556db45d8b42a0f028b489f/html5/thumbnails/9.jpg)
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
![Page 10: Front end performance improvements](https://reader036.vdocuments.mx/reader036/viewer/2022062319/5556db45d8b42a0f028b489f/html5/thumbnails/10.jpg)
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
![Page 11: Front end performance improvements](https://reader036.vdocuments.mx/reader036/viewer/2022062319/5556db45d8b42a0f028b489f/html5/thumbnails/11.jpg)
Others working onFront 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
![Page 12: Front end performance improvements](https://reader036.vdocuments.mx/reader036/viewer/2022062319/5556db45d8b42a0f028b489f/html5/thumbnails/12.jpg)
http://www.tealeaf.com/customer-experience-management/resource-center/register.php?doc=mobile-cem
85% of mobile users expect sites to load at least as fast as using a desktop
or laptop computer.
Tuesday, March 20, 12
![Page 13: Front end performance improvements](https://reader036.vdocuments.mx/reader036/viewer/2022062319/5556db45d8b42a0f028b489f/html5/thumbnails/13.jpg)
If we’re going to take performanceseriously we need to improve onFront End Performance in Drupal.
Tuesday, March 20, 12
![Page 14: Front end performance improvements](https://reader036.vdocuments.mx/reader036/viewer/2022062319/5556db45d8b42a0f028b489f/html5/thumbnails/14.jpg)
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
![Page 15: Front end performance improvements](https://reader036.vdocuments.mx/reader036/viewer/2022062319/5556db45d8b42a0f028b489f/html5/thumbnails/15.jpg)
Let’s Get Technical AboutWhat’s Happening
Tuesday, March 20, 12
![Page 16: Front end performance improvements](https://reader036.vdocuments.mx/reader036/viewer/2022062319/5556db45d8b42a0f028b489f/html5/thumbnails/16.jpg)
http://www.flickr.com/photos/eliu500/5332240987/
4G will solve our mobile problems, right?
Tuesday, March 20, 12
![Page 17: Front end performance improvements](https://reader036.vdocuments.mx/reader036/viewer/2022062319/5556db45d8b42a0f028b489f/html5/thumbnails/17.jpg)
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
![Page 18: Front end performance improvements](https://reader036.vdocuments.mx/reader036/viewer/2022062319/5556db45d8b42a0f028b489f/html5/thumbnails/18.jpg)
http://www.slideshare.net/guest22d4179/latency-trumps-all
Mobile phone network latency is 2-10x that of wired
connections.
Tuesday, March 20, 12
![Page 19: Front end performance improvements](https://reader036.vdocuments.mx/reader036/viewer/2022062319/5556db45d8b42a0f028b489f/html5/thumbnails/19.jpg)
http://www.stevesouders.com/blog/2010/07/13/velocity-tcp-and-the-lower-bound-of-web-performance/
TCP connections aren’t great for small files (all your non-media assets are small
files). This is due to TCP slow start.
Tuesday, March 20, 12
![Page 20: Front end performance improvements](https://reader036.vdocuments.mx/reader036/viewer/2022062319/5556db45d8b42a0f028b489f/html5/thumbnails/20.jpg)
6The number of parallel connections to a domain
across all tabs and windows in desktop browsers.
Tuesday, March 20, 12
![Page 21: Front end performance improvements](https://reader036.vdocuments.mx/reader036/viewer/2022062319/5556db45d8b42a0f028b489f/html5/thumbnails/21.jpg)
Tuesday, March 20, 12
![Page 22: Front end performance improvements](https://reader036.vdocuments.mx/reader036/viewer/2022062319/5556db45d8b42a0f028b489f/html5/thumbnails/22.jpg)
10xJavaScript on mobile devices (high end
ones) takes about 10x as long to execute on mobile devices compared to desktop
computers.
Tuesday, March 20, 12
![Page 23: Front end performance improvements](https://reader036.vdocuments.mx/reader036/viewer/2022062319/5556db45d8b42a0f028b489f/html5/thumbnails/23.jpg)
512MBThe 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
![Page 24: Front end performance improvements](https://reader036.vdocuments.mx/reader036/viewer/2022062319/5556db45d8b42a0f028b489f/html5/thumbnails/24.jpg)
Part 1: Minify All Core JavaScript
Tuesday, March 20, 12
![Page 25: Front end performance improvements](https://reader036.vdocuments.mx/reader036/viewer/2022062319/5556db45d8b42a0f028b489f/html5/thumbnails/25.jpg)
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
![Page 26: Front end performance improvements](https://reader036.vdocuments.mx/reader036/viewer/2022062319/5556db45d8b42a0f028b489f/html5/thumbnails/26.jpg)
Original 24% the Size
Minified drupal.js
Tuesday, March 20, 12
![Page 27: Front end performance improvements](https://reader036.vdocuments.mx/reader036/viewer/2022062319/5556db45d8b42a0f028b489f/html5/thumbnails/27.jpg)
Others Minifying Their Production JS
jQuery Dojo MooTools YUI
SWFObject Ext jQuery UI Backbone
Underscore Three.js Sharepoint Wordpress
Tuesday, March 20, 12
![Page 28: Front end performance improvements](https://reader036.vdocuments.mx/reader036/viewer/2022062319/5556db45d8b42a0f028b489f/html5/thumbnails/28.jpg)
Minify on the fly or shipwith minified files?
Answer: Ship with minifed files
Tuesday, March 20, 12
![Page 29: Front end performance improvements](https://reader036.vdocuments.mx/reader036/viewer/2022062319/5556db45d8b42a0f028b489f/html5/thumbnails/29.jpg)
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
![Page 30: Front end performance improvements](https://reader036.vdocuments.mx/reader036/viewer/2022062319/5556db45d8b42a0f028b489f/html5/thumbnails/30.jpg)
Add A Toggle To Performance Page
This is a screenshot from jquery.com.
Tuesday, March 20, 12
![Page 31: Front end performance improvements](https://reader036.vdocuments.mx/reader036/viewer/2022062319/5556db45d8b42a0f028b489f/html5/thumbnails/31.jpg)
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
![Page 32: Front end performance improvements](https://reader036.vdocuments.mx/reader036/viewer/2022062319/5556db45d8b42a0f028b489f/html5/thumbnails/32.jpg)
Want Minified Core JS in D7?Speedy Module
http://drupal.org/project/speedy
Tuesday, March 20, 12
![Page 33: Front end performance improvements](https://reader036.vdocuments.mx/reader036/viewer/2022062319/5556db45d8b42a0f028b489f/html5/thumbnails/33.jpg)
Part 2: Use the JavaScriptModule Pattern
Tuesday, March 20, 12
![Page 34: Front end performance improvements](https://reader036.vdocuments.mx/reader036/viewer/2022062319/5556db45d8b42a0f028b489f/html5/thumbnails/34.jpg)
(function ($) {
// Our JS goes here.
})(jQuery);
(function ($, Drupal) {
// Our JS goes here.
})(jQuery, Drupal);
Switch ToCurrently
Oh look, dependency injection.
http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-DepthTuesday, March 20, 12
![Page 35: Front end performance improvements](https://reader036.vdocuments.mx/reader036/viewer/2022062319/5556db45d8b42a0f028b489f/html5/thumbnails/35.jpg)
What’s The Savings?
The Originaldrupal.js = 13852drupal.min.js = 333824% the size.
Modified Versiondrupal.js = 13868drupal.min.js = 313222.5% the size.
Smaller Files and Larger % Savings.
Tuesday, March 20, 12
![Page 36: Front end performance improvements](https://reader036.vdocuments.mx/reader036/viewer/2022062319/5556db45d8b42a0f028b489f/html5/thumbnails/36.jpg)
http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth
Learn More About The Module Pattern!
Tuesday, March 20, 12
![Page 37: Front end performance improvements](https://reader036.vdocuments.mx/reader036/viewer/2022062319/5556db45d8b42a0f028b489f/html5/thumbnails/37.jpg)
Part 3: Make JS and CSSHandling Pluggable
Tuesday, March 20, 12
![Page 38: Front end performance improvements](https://reader036.vdocuments.mx/reader036/viewer/2022062319/5556db45d8b42a0f028b489f/html5/thumbnails/38.jpg)
Example 1: google.com mobile
Page assets are cached in local storage.
Tuesday, March 20, 12
![Page 39: Front end performance improvements](https://reader036.vdocuments.mx/reader036/viewer/2022062319/5556db45d8b42a0f028b489f/html5/thumbnails/39.jpg)
Example 2: Lazy Evaluation
http://calendar.perfplanet.com/2011/lazy-evaluation-of-commonjs-modules/Tuesday, March 20, 12
![Page 40: Front end performance improvements](https://reader036.vdocuments.mx/reader036/viewer/2022062319/5556db45d8b42a0f028b489f/html5/thumbnails/40.jpg)
Example 3: Bundled Aggregation
Tuesday, March 20, 12
![Page 41: Front end performance improvements](https://reader036.vdocuments.mx/reader036/viewer/2022062319/5556db45d8b42a0f028b489f/html5/thumbnails/41.jpg)
http://drupal.org/node/352951
Let’s Make it Pluggable!
Tuesday, March 20, 12
![Page 42: Front end performance improvements](https://reader036.vdocuments.mx/reader036/viewer/2022062319/5556db45d8b42a0f028b489f/html5/thumbnails/42.jpg)
In Discussion: AsseticPHP 5.3 Asset (JS/CSS) Management
https://github.com/kriswallsmith/asseticNote, the developer has offered to help.
Tuesday, March 20, 12
![Page 43: Front end performance improvements](https://reader036.vdocuments.mx/reader036/viewer/2022062319/5556db45d8b42a0f028b489f/html5/thumbnails/43.jpg)
AsseticSome 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
![Page 44: Front end performance improvements](https://reader036.vdocuments.mx/reader036/viewer/2022062319/5556db45d8b42a0f028b489f/html5/thumbnails/44.jpg)
Part 4: Exclude CSS Files
Tuesday, March 20, 12
![Page 45: Front end performance improvements](https://reader036.vdocuments.mx/reader036/viewer/2022062319/5556db45d8b42a0f028b489f/html5/thumbnails/45.jpg)
“We tested our CSS and found 80% wasn’t being used.”* Terribly paraphrased from IRC
Tuesday, March 20, 12
![Page 46: Front end performance improvements](https://reader036.vdocuments.mx/reader036/viewer/2022062319/5556db45d8b42a0f028b489f/html5/thumbnails/46.jpg)
Undocumented Hack
stylesheets[all][] = system.menu.cssstylesheets[all][] = system.theme.cssstylesheets[all][] = system.message.cssstylesheets[all][] = system.menu.css
Tuesday, March 20, 12
![Page 47: Front end performance improvements](https://reader036.vdocuments.mx/reader036/viewer/2022062319/5556db45d8b42a0f028b489f/html5/thumbnails/47.jpg)
Let’s Add A Documented Feature
exclude-stylesheet[] = system.menu.cssexclude-stylesheet[] = system.theme.cssexclude-stylesheet[] = system.message.cssexclude-stylesheet[] = system.menu.css
Tuesday, March 20, 12
![Page 48: Front end performance improvements](https://reader036.vdocuments.mx/reader036/viewer/2022062319/5556db45d8b42a0f028b489f/html5/thumbnails/48.jpg)
Faster Mobile SitesWednesday 3:45pm in Room MHB 1A
Learn What You Can Do In Your Sites Now
Tuesday, March 20, 12
![Page 49: Front end performance improvements](https://reader036.vdocuments.mx/reader036/viewer/2022062319/5556db45d8b42a0f028b489f/html5/thumbnails/49.jpg)
Questions?
Tuesday, March 20, 12
![Page 50: Front end performance improvements](https://reader036.vdocuments.mx/reader036/viewer/2022062319/5556db45d8b42a0f028b489f/html5/thumbnails/50.jpg)
What did you think?Locate this session on theDrupalCon Denver website
http://denver2012.drupal.org/program
Click the “Take the Survey” link.
Thank You!
Tuesday, March 20, 12