High Performance Mobile Web

High Performance Mobile Web James D Bloom http://blog.jamesdbloom.com

Technical lead of mobile web at Be2air Focusing on: -‐ High Performance -‐ Reliability -‐ Wide Device Support -‐ Keeping it Simple -‐ Automated TesEng

Mobile Web Expert

ABOUT ME JAMES D BLOOM

This talk….

1. Why We Should Care About Performance?

SoHware More Parallelism Faster Page Rendering Faster Page InteracEon

3.

Network Reducing Requests Reducing Bytes Increasing Bandwidth Efficiency Reducing Latency

2.

WHY WE SHOULD CARE ABOUT PERFORMANCE? 01

+1s -4% revenue

Bing

WHY CARE?

-2.2s +15% downloads

Firefox

0.4 -> 0.9s -25% searches

Google

-5s +12% revenue -50% hardware

Shopzilla

each -100ms +1% revenue

Wallmart & Amazon

h"p://www.keynote.com/keynote_compe11ve_research/performance_indices/mobile/retail-‐world

5.41 6.03 7.65 7.85 8.64 9.21 10.36 11.43 12.49 15.86

27.16

44.67

51.38

0

10

20

30

40

50

60

LOAD TIME (in seconds)

47% expect

<2s 40% abandon

if >3s

NETWORK - REDUCING REQUESTS - REDUCING BYTES - INCREASING BANDWIDTH EFFICIENCY - REDUCING LATENCY

02


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

h"p://mobile.h"parchive.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

COMBINE REQUESTS - SPRITES

•  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 iniEal value -‐> no JavaScript or localStorage –  return with resources as external links

•  Bing –  1st request 54.9 KB –  2nd request 5.5 KB

AVOID REQUESTS

•  Avoid redirects – 71% of mobile sites have 3xx –  or at least cache them

•  Images –  CSS3

•  gradient, rounded corners, drop shadow, text shadow –  Avoid animated gifs

•  staEc image + JS •  Load (and eval) on demand

–  Images -‐> google image search –  JS -‐> gmail


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

h"p://mobile.h"parchive.org/ Based on: Alexa Top 1,000,000 Sites

REDUCING BYTES – ADAPTIVE RESOURCES

•  AdapEve Images –  UA sniffing or media queries –  Major breakpoints or server side scaling

•  AdapEve JavaScript –  UA sniffing for device specific JS

•  AdapEve 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

•  staEc resources •  CDN

•  HIJAX –  Highjack full page request –  AJAX to replace <body/> –  Avoids reloading CSS, JS, background images


02

PARALLELIZE DOWNLOADS

•  CSS at the top –  download background images –  avoid FOUC

•  JS at the booom –  avoid SPOF


•  async or defer on script element


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

DELAYING DOWNLOAD

•  delay load with document.appendChild(node)

DELAYING DOWNLOAD

•  delay load with document.appendChild(node)

EARLY DOWNLOAD

•  Eager loading –  Load staEc pages eagerly –  Store in localStorage –  Uses spare bandwidth


02

CACHING

•  Caching –  Caching headers

•  Cache-‐Control, Expires, Vary, Last-‐Modified, ETag –  Finger print

•  > 1y cache •  JS, CSS and images •  i.e. build 2932 -‐> all_2932_.css

–  Make pages cacheable •  Avoid cookies & headers •  Use path variables •  Separate out variable content

–  iframe –  AJAX

–  How variable is content? •  Always consider > 1s cache

CACHING

•  Types of Cache –  Content Delivery Network / Edge Cache

•  JS, CSS and images –  Reverse Proxies –  Browser Cache

•  Limited space, regularly fully cycled –  More control but harder to use

•  ApplicaEon Cache •  Local Storage •  WebSQL / IndexedDB

SOFTWARE - MORE PARALLELISM - FASTER PAGE RENDERING - FASTER INTERACTION

03


03

PARALLEL DOWNLOAD

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

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


03

FASTER PAGE RENDERING

•  Simple DOM •  Efficient CSS selectors

–  avoid generic matches on right side:

–  use ids or specific classes:

•  Minimize reflows –  CSS in <head/> –  <img/> with height and width


03

FASTER PAGE INTERACTION

•  Avoid blocking UI Thread –  Split tasks

•  Use events •  setTimeout

–  Web Workers •  data only •  no UI interacEon

execuEon

button 1 clicked

button 1 onclick button 1 UI depressed button 1 UI unpressed

button 2 onclick

button 2 UI depressed

button 2 UI unpressed

button 2 clicked

UI Thread

UI Queue

FASTER PAGE INTERACTION

•  SyntheEc events –  Touch 300ms delay

•  Timers –  Lots >1s –  Few <500ms –  Use single global repeaEng Emer for mulEple tasks

•  Pre-‐execute –  Use middle Eer as much as possible

This talk….

1. Why We Should Care About Performance?

SoHware More Parallelism Faster Page Rendering Faster Page InteracEon

3.

Network Reducing Requests Reducing Bytes Increasing Bandwidth Efficiency Reducing Latency

2.

High Performance Mobile Web

Technology

js css

js load

y cache js

updated load resources

downloads css

bandwidth efficiency

image xfer size

download background