High Performance Mobile Web

© Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 1

High Performance Mobile Web James D Bloom

http://blog.jamesdbloom.com


This talk….

§  Why We Should Care About Performance?

§  Network –  Reducing Requests –  Reducing Bytes –  Increasing Bandwidth Efficiency

§  Software –  Increasing Parallelism


WHY - WE SHOULD CARE ABOUT PERFORMANCE? 01


-2.2s +15% downloads

Firefox

0.4 -> 0.9s -25% searches

Google

-5s +12% revenue -50% hardware

Shopzilla

each -100ms +1% revenue

Wallmart & Amazon

Premature optimization is the root of all evil (or at least most of it) in programming.

– Donald Knuth

+1s -4% revenue

Bing

But…

40% abandon if >3s


NETWORK - REDUCING REQUESTS - REDUCING BYTES - INCREASING BANDWIDTH EFFICIENCY

02


CORELATION TO LOAD TIME

Total Requests

Image Requests

Total Xfer Size

Image Xfer Size

Domains

TOTAL REQUESTS 0.46

IMAGE REQUESTS 0.44

TOTAL XFER SIZE 0.40

IMAGE XFER SIZE 0.37

Reduce Requests

DOMAINS 0.37

http://mobile.httparchive.org/ Based on: Alexa Top 1,000,000 Sites


COMBINE REQUESTS - BUNDLING

§  JavaScript Bundle –  Combine all files into single bundle

§  CSS Bundle –  Combine all files into single bundle

§  Image Sprite –  Combine all images into CSS Sprite


COMBINE REQUESTS - INLINING

§  Inlining –  dataURI for external resources –  Base64 larger by 8/6


COMBINE REQUESTS - INLINING

§  First Load: –  inline resources and set cookie

–  put resources in localStorage and update cookie

§  Subsequent Load: –  check cookie

•  if updated –  load resources from localStorage (at top of page)

•  if ini>al value -‐> no JavaScript or localStorage –  return with resources as external links

§  Bing –  1st request 54.9 KB

–  2nd request 5.5 KB



02


RESPONSE SIZE (in kB)

358

112

33 23 10

Images Scripts HTML Stylesheets Other

IMAGES 67%

SCRIPTS 21%

HTML 6%

STYLESHEETS 4%

OTHER 2%

Reduce Image Size

http://mobile.httparchive.org/ Based on: Alexa Top 1,000,000 Sites


REDUCING BYTES – ADAPTIVE RESOURCES

§  Adaptive Images –  UA sniffing or media queries

–  Major breakpoints or server side scaling

§  Adaptive JavaScript –  UA sniffing for device specific JS

§  Adaptive CSS –  Media queries for device specific CSS


REDUCING BYTES - MINIFY

§  Minify JS & CSS

–  Typically during bundling

§  Mini JS framework

–  don’t send desktop JS to mobile


REDUCING BYTES

§  Compression –  Use gzip for text resources

–  Maximize lossless compression for images

§  Reduce Upload –  Reduce / remove cookies

–  Server-side cookie

–  Cookie Free Domain •  static resources

•  CDN

§  HIJAX

–  Highjack full page request

–  AJAX to replace <body/>

–  Avoids reloading CSS, JS, background images

§  Images –  Avoid animated gifs

•  static image + JS



02


PARALLELIZE DOWNLOADS

§  CSS at the top –  download background images

–  avoid FOUC

§  JS at the bottom –  avoid SPOF


PARALLELIZE DOWNLOADS

§  Domain Sharding –  > 6 resources due to extra domain lookups


DELAYING DOWNLOAD

§  delay load with document.appendChild(node)


EARLY DOWNLOAD

§  Eager loading –  Load static pages eagerly

–  Store in localStorage

–  Uses spare bandwidth


SOFTWARE - INCREASING PARALLELISM 03


PARALLEL SERVICE CALLS

render view

build model

service & DB calls flush <head/>

controller task executor

view

flush <body/>

§  Parallelize service calls / DB queries

§  Render view (and flush <head/>) in parallel


PARALLEL DOWNLOAD

§  Flush <head/> early –  CSS in parallel –  CSS background images (sprites) in parallel


Questions….

Technology

High Performance Mobile Web