Notes taken from presentation at DrupalCon 2012 given by Matt Farina. (Slideshare)
Slideshows for mobile?
- Flexslider module.
Remove image styles metadata
- The ImageMagick advanced module has an option to strip out metadata/
- mod_deflate (for Apache)
- IIS (has Gzip built in)
- HttpGzipModule (for nginx)
RoundTrip Time (RTT)
Length of time it takes to send a request and for it to come back.
Mobile networks have 2 to 10x longer latency than wired connections.
Cut down on parallel connections:
- Use CSS Imagesprites.
- 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
- 300 ms on desktop == 3 seconds on mobile!
- 512 MB of ram on iPhone 4s (to help with battery life).
- High end: 1gb of ram on iPad 2.
Mitigating Mobile Performance issues:
!!!Simpler DOM!!! (cure divitis) A simpler dom has less objects in memory.
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
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
Mobile Perf Bookmarklet: Analyze on mobile and store data to analyze on desktop.
webpagetest.org: tests performance from various places in the world, with comparisons and videos over time.
Chrome Developer Tools: Network tab.