Front End Performance Improvements

Slide 1

Slide 1 text

Tuesday, March 20, 12

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

http://www.slideshare.net/stoyan/yslow-20-presentation “Yahoo! reported that making pages just 400 milliseconds slower resulted in a trafﬁc drop of up to 9%.” * Google, Amazon, and others have found similar results. Tuesday, March 20, 12

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Let’s Get Technical About What’s Happening Tuesday, March 20, 12

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

http://www.stevesouders.com/blog/2010/07/13/velocity-tcp-and-the-lower-bound-of-web-performance/ TCP connections aren’t great for small ﬁles (all your non-media assets are small ﬁles). This is due to TCP slow start. Tuesday, March 20, 12

Slide 20

Slide 20 text

6 The number of parallel connections to a domain across all tabs and windows in desktop browsers. Tuesday, March 20, 12

Slide 21

Slide 21 text

Tuesday, March 20, 12

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Part 1: Minify All Core JavaScript Tuesday, March 20, 12

Slide 25

Slide 25 text

Miniﬁcation (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/Miniﬁcation_(programming) Tuesday, March 20, 12

Slide 26

Slide 26 text

Original 24% the Size Miniﬁed drupal.js Tuesday, March 20, 12

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

Add A Toggle To Performance Page This is a screenshot from jquery.com. Tuesday, March 20, 12

Slide 31

Slide 31 text

When Do We Update Miniﬁed Files? • When each full source JS ﬁle 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

Slide 32

Slide 32 text

Want Miniﬁed Core JS in D7? Speedy Module http://drupal.org/project/speedy Tuesday, March 20, 12

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

(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

Slide 35

Slide 35 text

What’s The Savings? The Original drupal.js = 13852 drupal.min.js = 3338 24% the size. Modiﬁed Version drupal.js = 13868 drupal.min.js = 3132 22.5% the size. Smaller Files and Larger % Savings. Tuesday, March 20, 12

Slide 36

Slide 36 text

http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth Learn More About The Module Pattern! Tuesday, March 20, 12

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

Example 3: Bundled Aggregation Tuesday, March 20, 12

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

Assetic Some Good • Can tie in with miniﬁcation 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

Slide 44

Slide 44 text

Part 4: Exclude CSS Files Tuesday, March 20, 12

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

Questions? Tuesday, March 20, 12

Slide 50

Slide 50 text

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