This document discusses techniques for improving the performance of mobile web applications. It addresses reducing the number of requests, reducing file sizes, and increasing parallelism. Specifically, it recommends bundling JavaScript and CSS files, inlining small resources, using adaptive images and JavaScript, minification, compression, and domain sharding. It also suggests techniques like parallelizing service calls and downloads, delaying unnecessary downloads, and eager loading of static assets. The overall goal is to reduce load times and improve the user experience on mobile networks.

1. © Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 1
High Performance Mobile Web
James D Bloom
http://blog.jamesdbloom.com

2. © 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

3. © Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 3
WHY
- WE SHOULD CARE ABOUT PERFORMANCE?01

4. © Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 4
-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

5. © Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 5
NETWORK
- REDUCING REQUESTS
- REDUCING BYTES
- INCREASING BANDWIDTH EFFICIENCY
02

6. © 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

7. © 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

8. © Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 8
COMBINE REQUESTS - INLINING
§ Inlining
– dataURI for external resources
– Base64 larger by 8/6

9. © 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

10. © Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 10
NETWORK
- REDUCING REQUESTS
- REDUCING BYTES
- INCREASING BANDWIDTH EFFICIENCY
02

11. © 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

12. © 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

13. © 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

14. © 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

15. © Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 15
NETWORK
- REDUCING REQUESTS
- REDUCING BYTES
- INCREASING BANDWIDTH EFFICIENCY
02

16. © 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

17. © Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 17
PARALLELIZE DOWNLOADS
§ Domain Sharding
– > 6 resources due to extra domain lookups

18. © Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 18
DELAYING DOWNLOAD
§ delay load with document.appendChild(node)

19. © Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 19
EARLY DOWNLOAD
§ Eager loading
– Load static pages eagerly
– Store in localStorage
– Uses spare bandwidth

20. © Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 20
SOFTWARE
- INCREASING PARALLELISM03

21. © 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

22. © Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 22
PARALLEL DOWNLOAD
§ Flush <head/> early
– CSS in parallel
– CSS background images (sprites) in parallel

23. © Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 23
Questions….