Notes from Faster Frontend Drupal, Presentation by Matt Farina

Notes taken from presentation at DrupalCon 2012 given by Matt Farina. (Slideshare)

Slideshows for mobile?

Responsive Images

Remove image styles metadata

Gzip Everything

RoundTrip Time (RTT)

Length of time it takes to send a request and for it to come back.

CDNs

Mobile networks have 2 to 10x longer latency than wired connections.

Cut down on parallel connections:

  1. Use CSS Imagesprites.
  2. Enable CSS and JavaScript aggregation

  3. Adding an Expires header to components. Drupal 7 core does this already.

Go a step further and add it to scripts and stylesheets too. Use cache busting techniques like query string to force new downloads.

Warning: while desktop browsers have large caches, mobile browsers have a small cache.

Mobile Performance limitations

Javascript can take unto 10 times longer to execute on mobile.

Mitigating Mobile Performance issues:

  1. Nothing fancy with JavaScript.

  2. !!!Simpler DOM!!! (cure divitis) A simpler dom has less objects in memory.

  3. Mobile Optimized Images, use responsive images, to use less ram to render.

Advanced concepts and configs

Use browser “local storage”.

Minify HTML (htmlcompressor) hook_page_delivery_callback_alter, drupal_deliver_html_page.

mod_pagespeed: Apachemodule to optimize web pages

Delayed JavaScript Evaluation: all js icnluded must be parsed and evaluated before it becomes avail. Jquery on iphone 4, takes 320ms to parse and evaluate. Lazy Evaluation waits until JS is needed to evaluate it.

Update Linux Kernel to 3.3 increases TCP initial congestion window to 10. This can cut down the number of round trips to get data: google and microsoft already do this.

Tools & Resources

If you liked this post, share it with your followers or follow me on Twitter.

Comments