1.
Sniffing the Mobile Context
@andydavies
#webperfdays, June 2012
http://www.flickr.com/photos/blake/2585198597

2.
The Mobile Context???
http://www.flickr.com/photos/dmje/5159177886

3.
Respond to resolution
http://seesparkbox.com

4.
Adapt based on features/User-Agent

5.
But don’t always get it right...

6.
React to where we are...
You are here

7.
Are we too focused on devices...
http://www.flickr.com/photos/adactio/6960610178

8.
and ignoring the network?
11%
Same Size
3% Bit Smaller
Much Smaller
86%
The Performance Implications of Mobile Design
Guy Podjarny

9.
Late 90’s eLearning - adaption by throughput
Dial-up ISDN LAN

10.
navigator.connection.type
yepnope({
test: navigator.connection.type &&
navigator.connection.type === navigator.connection.WIFI,
yep: 'normal.css',
nope: 'lightweight.css'
});
Image loading ideas: http://davidbcalhoun.com/2010/using-navigator-connection-android

11.
navigator.connection.type
+ Detect radio connection speed
- Lack of connection.type support (even on Android)
- Client-side

12.
Navigation Timing
window.onload = function() {
if (window.performance && window.performance.timing) {
document.cookie = 'timings=' + JSON.stringify(getTimings());
}
};
!
function getTimings() {
var timing = window.performance.timing;
! return {
dns: timing.domainLookupEnd - timing.domainLookupStart,
connect: timing.connectEnd - timing.connectStart,
ttfb: timing.responseStart - timing.connectEnd,
basepage: timing.responseEnd - timing.responseStart,
frontend: timing.loadEventStart - timing.responseEnd
};
}

13.
Navigation Timing
+ Real timings
- Need to load a page to get timings
- Abysmal support for Navigation Timing on mobile
(other ways of measuring e.g. boomerang.js)

14.
Operator APIs
https://bluevia.com/en/page/tech.APIs.UserContextAPI

15.
Operator APIs
+ Real radio network Information
- Operator dependent
- Country dependent for BlueVia
- User must consent via oAuth

16.
GeoIP Service
! "ipinfo": {
! ! "ip_address":"212.183.128.252",
! !"ip_type":"Mapped",
! !"Network": {
! !! "organization":"vodafone limited",
! ! !"carrier":"vodafone limited",
! ! !"asn":25135,
! ! !"connection_type":"mobile wireless",
! ! !"line_speed":"low",
! ! !"ip_routing_type":"mobile gateway",
! ! !"Domain": {
! ! !! "tld":"net",
! ! !! "sld":"vodafone"
! ! !! }
! ! !},
Quova GeoPoint API

17.
GeoIP Service
+ Detect someone is connected via mobile network
- No IPv6 support yet
- Can’t detect radio speed (everything is speed:low)

18.
Skinnier Content
For example: use stylesheet that drops custom fonts,
background images etc., when
connected via mobile network
<?php if(ismobile()) { ?>
! <link rel='stylesheet' href='css/lightweight.css' />
<?php } else { ?>
! <link rel='stylesheet' href='css/normal.css' />
<?php } ?>

19.
Apply appropriate defaults?
Standard on Mobile Retina on WiFi
Scott Jehl’s PictureFill with HD/SD toggle - http://filamentgroup.com/examples/picture-hd-prefs/

20.
Ultimately browsers need to provide more context
http://www.flickr.com/photos/brisbanecitycouncil/5159665909

21.
@andydavies
andy@asteno.com
http://www.flickr.com/photos/auntiep/5024494612