High Performance Mobile

David Calhoun

February 16, 2011



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

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

Ben can't understand this

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:
   Flag