high performance mobile web
DESCRIPTION
This talk explains best practices and techniques use to build high performance mobile sites. The talk covers a wide range of different topics centred on how to improve performance over the network and how to improve performance in the software (including both server side & client side).TRANSCRIPT
![Page 1: High Performance Mobile Web](https://reader033.vdocument.in/reader033/viewer/2022052820/548c9636b479593d1f8b49b2/html5/thumbnails/1.jpg)
High Performance Mobile Web James D Bloom http://blog.jamesdbloom.com
![Page 2: High Performance Mobile Web](https://reader033.vdocument.in/reader033/viewer/2022052820/548c9636b479593d1f8b49b2/html5/thumbnails/2.jpg)
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
![Page 3: High Performance Mobile Web](https://reader033.vdocument.in/reader033/viewer/2022052820/548c9636b479593d1f8b49b2/html5/thumbnails/3.jpg)
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.
![Page 4: High Performance Mobile Web](https://reader033.vdocument.in/reader033/viewer/2022052820/548c9636b479593d1f8b49b2/html5/thumbnails/4.jpg)
WHY WE SHOULD CARE ABOUT PERFORMANCE? 01
![Page 5: High Performance Mobile Web](https://reader033.vdocument.in/reader033/viewer/2022052820/548c9636b479593d1f8b49b2/html5/thumbnails/5.jpg)
+1s -4% revenue
Bing
WHY CARE?
-2.2s +15% downloads
Firefox
0.4 -> 0.9s -25% searches
-5s +12% revenue -50% hardware
Shopzilla
each -100ms +1% revenue
Wallmart & Amazon
![Page 6: High Performance Mobile Web](https://reader033.vdocument.in/reader033/viewer/2022052820/548c9636b479593d1f8b49b2/html5/thumbnails/6.jpg)
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
![Page 7: High Performance Mobile Web](https://reader033.vdocument.in/reader033/viewer/2022052820/548c9636b479593d1f8b49b2/html5/thumbnails/7.jpg)
NETWORK - REDUCING REQUESTS - REDUCING BYTES - INCREASING BANDWIDTH EFFICIENCY - REDUCING LATENCY
02
![Page 8: High Performance Mobile Web](https://reader033.vdocument.in/reader033/viewer/2022052820/548c9636b479593d1f8b49b2/html5/thumbnails/8.jpg)
NETWORK - REDUCING REQUESTS - REDUCING BYTES - INCREASING BANDWIDTH EFFICIENCY - REDUCING LATENCY
02
![Page 9: High Performance Mobile Web](https://reader033.vdocument.in/reader033/viewer/2022052820/548c9636b479593d1f8b49b2/html5/thumbnails/9.jpg)
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
![Page 10: High Performance Mobile Web](https://reader033.vdocument.in/reader033/viewer/2022052820/548c9636b479593d1f8b49b2/html5/thumbnails/10.jpg)
COMBINE REQUESTS - BUNDLING
• JavaScript Bundle – Combine all files into single bundle
• CSS Bundle – Combine all files into single bundle
![Page 11: High Performance Mobile Web](https://reader033.vdocument.in/reader033/viewer/2022052820/548c9636b479593d1f8b49b2/html5/thumbnails/11.jpg)
COMBINE REQUESTS - SPRITES
• Image Sprite – Combine all images into CSS Sprite
![Page 12: High Performance Mobile Web](https://reader033.vdocument.in/reader033/viewer/2022052820/548c9636b479593d1f8b49b2/html5/thumbnails/12.jpg)
COMBINE REQUESTS - INLINING
• Inlining – dataURI for external resources – Base64 larger by 8/6
![Page 13: High Performance Mobile Web](https://reader033.vdocument.in/reader033/viewer/2022052820/548c9636b479593d1f8b49b2/html5/thumbnails/13.jpg)
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
![Page 14: High Performance Mobile Web](https://reader033.vdocument.in/reader033/viewer/2022052820/548c9636b479593d1f8b49b2/html5/thumbnails/14.jpg)
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
![Page 15: High Performance Mobile Web](https://reader033.vdocument.in/reader033/viewer/2022052820/548c9636b479593d1f8b49b2/html5/thumbnails/15.jpg)
NETWORK - REDUCING REQUESTS - REDUCING BYTES - INCREASING BANDWIDTH EFFICIENCY - REDUCING LATENCY
02
![Page 16: High Performance Mobile Web](https://reader033.vdocument.in/reader033/viewer/2022052820/548c9636b479593d1f8b49b2/html5/thumbnails/16.jpg)
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
![Page 17: High Performance Mobile Web](https://reader033.vdocument.in/reader033/viewer/2022052820/548c9636b479593d1f8b49b2/html5/thumbnails/17.jpg)
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
![Page 18: High Performance Mobile Web](https://reader033.vdocument.in/reader033/viewer/2022052820/548c9636b479593d1f8b49b2/html5/thumbnails/18.jpg)
REDUCING BYTES - MINIFY
• Minify JS & CSS – Typically during bundling
• Mini JS framework – don’t send desktop JS to mobile
![Page 19: High Performance Mobile Web](https://reader033.vdocument.in/reader033/viewer/2022052820/548c9636b479593d1f8b49b2/html5/thumbnails/19.jpg)
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
![Page 20: High Performance Mobile Web](https://reader033.vdocument.in/reader033/viewer/2022052820/548c9636b479593d1f8b49b2/html5/thumbnails/20.jpg)
NETWORK - REDUCING REQUESTS - REDUCING BYTES - INCREASING BANDWIDTH EFFICIENCY - REDUCING LATENCY
02
![Page 21: High Performance Mobile Web](https://reader033.vdocument.in/reader033/viewer/2022052820/548c9636b479593d1f8b49b2/html5/thumbnails/21.jpg)
PARALLELIZE DOWNLOADS
• CSS at the top – download background images – avoid FOUC
• JS at the booom – avoid SPOF
![Page 22: High Performance Mobile Web](https://reader033.vdocument.in/reader033/viewer/2022052820/548c9636b479593d1f8b49b2/html5/thumbnails/22.jpg)
PARALLELIZE DOWNLOADS
• async or defer on script element
![Page 23: High Performance Mobile Web](https://reader033.vdocument.in/reader033/viewer/2022052820/548c9636b479593d1f8b49b2/html5/thumbnails/23.jpg)
PARALLELIZE DOWNLOADS
• Domain Sharding – > 6 resources due to extra domain lookups
![Page 24: High Performance Mobile Web](https://reader033.vdocument.in/reader033/viewer/2022052820/548c9636b479593d1f8b49b2/html5/thumbnails/24.jpg)
DELAYING DOWNLOAD
• delay load with document.appendChild(node)
![Page 25: High Performance Mobile Web](https://reader033.vdocument.in/reader033/viewer/2022052820/548c9636b479593d1f8b49b2/html5/thumbnails/25.jpg)
DELAYING DOWNLOAD
• delay load with document.appendChild(node)
![Page 26: High Performance Mobile Web](https://reader033.vdocument.in/reader033/viewer/2022052820/548c9636b479593d1f8b49b2/html5/thumbnails/26.jpg)
EARLY DOWNLOAD
• Eager loading – Load staEc pages eagerly – Store in localStorage – Uses spare bandwidth
![Page 27: High Performance Mobile Web](https://reader033.vdocument.in/reader033/viewer/2022052820/548c9636b479593d1f8b49b2/html5/thumbnails/27.jpg)
NETWORK - REDUCING REQUESTS - REDUCING BYTES - INCREASING BANDWIDTH EFFICIENCY - REDUCING LATENCY
02
![Page 28: High Performance Mobile Web](https://reader033.vdocument.in/reader033/viewer/2022052820/548c9636b479593d1f8b49b2/html5/thumbnails/28.jpg)
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
![Page 29: High Performance Mobile Web](https://reader033.vdocument.in/reader033/viewer/2022052820/548c9636b479593d1f8b49b2/html5/thumbnails/29.jpg)
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
![Page 30: High Performance Mobile Web](https://reader033.vdocument.in/reader033/viewer/2022052820/548c9636b479593d1f8b49b2/html5/thumbnails/30.jpg)
SOFTWARE - MORE PARALLELISM - FASTER PAGE RENDERING - FASTER INTERACTION
03
![Page 31: High Performance Mobile Web](https://reader033.vdocument.in/reader033/viewer/2022052820/548c9636b479593d1f8b49b2/html5/thumbnails/31.jpg)
SOFTWARE - MORE PARALLELISM - FASTER PAGE RENDERING - FASTER INTERACTION
03
![Page 32: High Performance Mobile Web](https://reader033.vdocument.in/reader033/viewer/2022052820/548c9636b479593d1f8b49b2/html5/thumbnails/32.jpg)
PARALLEL DOWNLOAD
• Flush <head/> early – CSS in parallel – CSS background images (sprites) in parallel
![Page 33: High Performance Mobile Web](https://reader033.vdocument.in/reader033/viewer/2022052820/548c9636b479593d1f8b49b2/html5/thumbnails/33.jpg)
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
![Page 34: High Performance Mobile Web](https://reader033.vdocument.in/reader033/viewer/2022052820/548c9636b479593d1f8b49b2/html5/thumbnails/34.jpg)
SOFTWARE - MORE PARALLELISM - FASTER PAGE RENDERING - FASTER INTERACTION
03
![Page 35: High Performance Mobile Web](https://reader033.vdocument.in/reader033/viewer/2022052820/548c9636b479593d1f8b49b2/html5/thumbnails/35.jpg)
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
![Page 36: High Performance Mobile Web](https://reader033.vdocument.in/reader033/viewer/2022052820/548c9636b479593d1f8b49b2/html5/thumbnails/36.jpg)
SOFTWARE - MORE PARALLELISM - FASTER PAGE RENDERING - FASTER INTERACTION
03
![Page 37: High Performance Mobile Web](https://reader033.vdocument.in/reader033/viewer/2022052820/548c9636b479593d1f8b49b2/html5/thumbnails/37.jpg)
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
![Page 38: High Performance Mobile Web](https://reader033.vdocument.in/reader033/viewer/2022052820/548c9636b479593d1f8b49b2/html5/thumbnails/38.jpg)
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
![Page 39: High Performance Mobile Web](https://reader033.vdocument.in/reader033/viewer/2022052820/548c9636b479593d1f8b49b2/html5/thumbnails/39.jpg)
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.