High Performance Mobile

David Calhoun

March 31, 2011



Slides: http://davidbcalhoun.com/present/mobile-performance/

Originally presented here: http://www.meetup.com/SF-Web-Performance-Group/events/16116764

Part 1: mobile connections

Overview: mobile connections

Latency: overview of a request

  1. Client -> (wikipedia.org) -> DNS server
  2. Client <- (208.80.152.2) <- DNS server
  3. (client caches DNS, mapping the domain to the IP)
  4. Client -> X intermediate servers -> 208.80.152.2
  5. Client <- X intermediate servers <- 208.80.152.2

Roundtrip latency tests

Roundtrip latency tests

Roundtrip latency tests

Roundtrip latency tests

Latency Results

Bandwidth Results

Takeaways

Practical implication

Concatenation of HTTP requests

What about caching?

Memory cache limits


* Mobile cache file sizes (Steve Souders)

Misconceptions about caching limits




* http://www.yuiblog.com/blog/2008/02/06/iphone-cacheability/ and http://www.phpied.com/iphone-caching/

Multiple page app with caching

OR... the single-page app

The single-page app

Media queries

/* 
   Screens bigger than 480px
*/
@media only screen and (min-width: 481px) {
  #header { background-image: url(header-full.png); }
}

/* 
   Screens smaller than 480px
*/
@media only screen and (max-width: 480px) {
  #header { background-image: url(header-small.png); }
}

Instead of simply downscaling images, serve lower-bandwidth versions where it makes sense.

Media queries on older phones?

High DPI screens

/* High dpi */
@media only screen and (min-resolution: 300dpi),
       only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min--moz-device-pixel-ratio: 1.5) {
  #header { background-image: url(header-300dpi.png); }
}

/* Low dpi */
@media only screen and (max-resolution: 299dpi),
       only screen and (-webkit-max-device-pixel-ratio: 1.5),
       only screen and (max--moz-device-pixel-ratio: 1.5) {
  #header { background-image: url(header-72dpi.png); }
}

Nicer experience at the cost of performance.

Example: dayofjs.com




Android navigator.connection

JavaScript object available in Android 2.2+

navigator = {
  connection: {
    "type": "4",
    "UNKNOWN": "0",
    "ETHERNET": "1",
    "WIFI": "2",
    "CELL_2G": "3",
    "CELL_3G": "4"
  }
};

navigator.connection: JS

  var connection, connectionSpeed, htmlNode, htmlClass;
  connection = navigator.connection || {"type":"0"}; // fallback

  switch(connection.type) {
    case connection.CELL_3G: connectionSpeed = "mediumbandwidth"; break;
    case connection.CELL_2G: connectionSpeed = "lowbandwidth"; break;
    default: connectionSpeed = 'highbandwidth';
  }

  /* set the connection speed on the html element
     i.e. <html class="lowbandwidth">
  */
  htmlNode = document.body.parentNode;
  htmlClass = htmlNode.getAttribute("class") || "";
  htmlNode.setAttribute("class", htmlClass + " " + connectionSpeed);

Drop this in <head>!

navigator.connection: CSS

.highbandwidth .logo   { background-image:url('logo-high.jpg'); }
.mediumbandwidth .logo { background-image:url('logo-medium.jpg'); }
.lowbandwidth .logo    { background-image:url('logo-low.jpg'); }

Miscellaneous

Part 2: mobile processor speed

Overview: mobile processor speed

JS parsing and execution

foo.js:

  1. download (network)
  2. parse (CPU)
  3. execute (CPU)

Back to the Gmail-like app




Problem: startup time

Lots of JS loaded up front

= UI thread, user interaction is blocked while processing

Solution: delayed script execution!

More recent progress: Nicholas Zakas's <noexecute> attribute proposal for scripts




Gmail for Mobile HTML5 Series: Reducing Startup Latency

Gmail load time before and after

Things are getting better...

...desktops are faster (just a bit...)

SunSpider: Desktop vs. Mobile

DOM size

= slow download, laggy interaction


Nice tool: DOM Monster (http://mir.aculo.us/dom-monster/)

Hardware acceleration

BUT don't go overboard. Don't add translate3d on everything.. your GPU is not all-powerful!

iOS onclick delay

http://www.youtube.com/watch?v=k1M4L3TAyEU

More resources and tools

Credits

boomerang

Slide framework: S5 Mod

iPhone 4 4.3 SunSpider results courtesy of @wondersquirrel

Photos: