© Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 1
High Performance Mobile Web James D Bloom
http://blog.jamesdbloom.com
© Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 2
This talk….
§ Why We Should Care About Performance?
§ Network – Reducing Requests – Reducing Bytes – Increasing Bandwidth Efficiency
§ Software – Increasing Parallelism
© Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 3
WHY - WE SHOULD CARE ABOUT PERFORMANCE? 01
© Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 4
-2.2s +15% downloads
Firefox
0.4 -> 0.9s -25% searches
-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
© Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 5
NETWORK - REDUCING REQUESTS - REDUCING BYTES - INCREASING BANDWIDTH EFFICIENCY
02
© Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 6
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
© Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 7
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
© Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 8
COMBINE REQUESTS - INLINING
§ Inlining – dataURI for external resources – Base64 larger by 8/6
© Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 9
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
© Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 10
NETWORK - REDUCING REQUESTS - REDUCING BYTES - INCREASING BANDWIDTH EFFICIENCY
02
© Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 11
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
© Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 12
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
© Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 13
REDUCING BYTES - MINIFY
§ Minify JS & CSS
– Typically during bundling
§ Mini JS framework
– don’t send desktop JS to mobile
© Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 14
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
© Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 15
NETWORK - REDUCING REQUESTS - REDUCING BYTES - INCREASING BANDWIDTH EFFICIENCY
02
© Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 16
PARALLELIZE DOWNLOADS
§ CSS at the top – download background images
– avoid FOUC
§ JS at the bottom – avoid SPOF
© Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 17
PARALLELIZE DOWNLOADS
§ Domain Sharding – > 6 resources due to extra domain lookups
© Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 18
DELAYING DOWNLOAD
§ delay load with document.appendChild(node)
© Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 19
EARLY DOWNLOAD
§ Eager loading – Load static pages eagerly
– Store in localStorage
– Uses spare bandwidth
© Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 20
SOFTWARE - INCREASING PARALLELISM 03
© Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 21
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
© Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 22
PARALLEL DOWNLOAD
§ Flush <head/> early – CSS in parallel – CSS background images (sprites) in parallel
© Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 23
Questions….