front end performance improvements

Tuesday, March 20, 12

Core Conversations

Front End Performance Improvements

Presented by Matt Farina


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


http://www.slideshare.net/mattfarinahttp://speakerdeck.com/u/mattfarina

Download the slides...


http://www.slideshare.net/mattfarina




Why is Front EndPerformance Important?


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


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.




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

http://www.akamai.com/html/about/press/releases/2010/press_061410.html


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.




In the post-PC era our sites aren’t just competing with other sites. They’re competing and working with with native apps.


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


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.


http://www.slideshare.net/Gomez_Inc/gomez-mobile-web-experience-survey-why-the-mobile-web-is-disappointing-end-users

http://www.slideshare.net/Gomez_Inc/gomez-mobile-web-experience-survey-why-the-mobile-web-is-disappointing-end-users

If we’re going to take performanceseriously we need to improve onFront End Performance in Drupal.


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.


Let’s Get Technical AboutWhat’s Happening


http://www.flickr.com/photos/eliu500/5332240987/

4G will solve our mobile problems, right?




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




http://www.slideshare.net/guest22d4179/latency-trumps-all

Mobile phone network latency is 2-10x that of wired

connections.




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.




6The number of parallel connections to a domain

across all tabs and windows in desktop browsers.


10xJavaScript on mobile devices (high end

ones) takes about 10x as long to execute on mobile devices compared to desktop

computers.


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.


Part 1: Minify All Core JavaScript


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

https://en.wikipedia.org/wiki/Minification_(programming)

https://en.wikipedia.org/wiki/Minification_(programming)

Original 24% the Size

Minified drupal.js


Others Minifying Their Production JS

jQuery Dojo MooTools YUI

SWFObject Ext jQuery UI Backbone

Underscore Three.js Sharepoint Wordpress


Minify on the fly or shipwith minified files?

Answer: Ship with minifed files


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.


Add A Toggle To Performance Page

This is a screenshot from jquery.com.


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.


Want Minified Core JS in D7?Speedy Module

http://drupal.org/project/speedy


https://developers.google.com/pagespeed/


Part 2: Use the JavaScriptModule Pattern


(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

http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth


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.



Learn More About The Module Pattern!




Part 3: Make JS and CSSHandling Pluggable


Example 1: google.com mobile

Page assets are cached in local storage.


Example 2: Lazy Evaluation

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

http://calendar.perfplanet.com/2011/lazy-evaluation-of-commonjs-modules/

http://calendar.perfplanet.com/2011/lazy-evaluation-of-commonjs-modules/

Example 3: Bundled Aggregation


http://drupal.org/node/352951

Let’s Make it Pluggable!




In Discussion: AsseticPHP 5.3 Asset (JS/CSS) Management

https://github.com/kriswallsmith/asseticNote, the developer has offered to help.




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.


Part 4: Exclude CSS Files


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


Undocumented Hack

stylesheets[all][] = system.menu.cssstylesheets[all][] = system.theme.cssstylesheets[all][] = system.message.cssstylesheets[all][] = system.menu.css


Let’s Add A Documented Feature

exclude-stylesheet[] = system.menu.cssexclude-stylesheet[] = system.theme.cssexclude-stylesheet[] = system.message.cssexclude-stylesheet[] = system.menu.css


Faster Mobile SitesWednesday 3:45pm in Room MHB 1A

Learn What You Can Do In Your Sites Now


Questions?


What did you think?Locate this session on theDrupalCon Denver website

http://denver2012.drupal.org/program

Click the “Take the Survey” link.

Thank You!




front end performance improvements

Technology

desktop mobile http

onfront end performance

endback end

performance page

mobile networks

mobile problems

mobile users

http archive measurement