Every URL visited from the Facebook iPhone app is done through a webview. Same with Twitter. Even if you don't have a mobile app, your website gets a lot of traffic from webviews. And yet, testing on webviews is challenging. There are significant performances differences between UIWebView vs WkWebView, and similarly for Android webview vs the new Chromium webview. And what about home screen apps?! In this talk, Steve Souders discusses the differences across webviews and how that affects performance of mobile web apps.

1. do u webview?
@souders
stevesouders.com/docs/svmwameetup-webviews-20140930.pptx

2. flickr.com/photos/dullhunk/3930915541/

3. Scott
Jenson
flickr.com/photos/29022619@N03/798025115

4. designmind.frogdesign.com/blog/mobile-apps-must-die.html
native
^ too much trouble
high hurdle
JIT interaction
discoverability

6. ?

10. hybrids are great
"geep"
more code reuse across web & hybrid
more design reuse across web & hybrid
support more devices more quickly
avoid app store re-approval process
signalvnoise.com/posts/3743-hybrid-sweet-spot-native-
navigation-web-content
today.com/pets/baby-geep-cross-between-goat-sheep-stealing-hearts-everywhere-1D80007977

11. do u webview? YES!
we all do

14. WebView Traffic
flickr.com/photos/53780686@N04/5052368839
• hard to track – UA varies
• Chrome: ~6% of iOS traffic*
Mozilla/5.0 (iPhone; CPU iPhone OS 7_1_2 like Mac OS X)
AppleWebKit/537.51.2 (KHTML, like Gecko) CriOS/37.0.2062.60
Mobile/11D257 Safari/9537.53
• Facebook app: ~5% of iOS traffic*
Mozilla/5.0 (iPhone; CPU iPhone OS 7_1_1 like Mac OS X)
AppleWebKit/537.51.2 (KHTML, like Gecko) Mobile/11D201
[FBAN/FBIOS;FBAV/12.1.0.24.20;FBBV/3214247;FBDV/iPhone6,1;FBMD/iPhone
;FBSN/iPhone OS;FBSV/7.1.1;FBSS/2;
FBCR/AT&T;FBID/phone;FBLC/en_US;FBOP/5]
You don't need a hybrid
app to get webview traffic
* wurfl.io/MOVR/

15. guypo.com/mobile/iphone-vs-android-45000-tests-prove-whose-browser-is-faster/

16. "Their testing is flawed. They didn't actually
test the Safari browser on the iPhone.
Instead they only tested their own
proprietary app, which uses an embedded
Web viewer that doesn't actually take
advantage of Safari's Web performance
optimizations"
- Apple
guypo.com/mobile/iphone-vs-android-45000-tests-prove-whose-browser-is-faster/

17. flickr.com/photos/airflore/4779420939

18. "Their testing is flawed. They didn't actually
test the Safari browser on the iPhone.
Instead they only tested their own
proprietary app, which uses an embedded
Web viewer that doesn't actually take
advantage of Safari's Web performance
optimizations"
- Apple
guypo.com/mobile/iphone-vs-android-45000-tests-prove-whose-browser-is-faster/

19. UIWebView iOS4.3
• Nitro JS engine (JIT, 2.5x faster)
• application cache
• async script loading
hybrid apps &
home screen apps
performed slower
flickr.com/photos/jorislouwes/8097404205
/

20. iOS 7
UIWebView

21. iOS 7
UIWebView
iOS 8
WKWebView

22. iOS 7
UIWebView
iOS 8
WKWebView
WebKit
Android 4.3
Webview

23. iOS 7
UIWebView
iOS 8
WKWebView
Android 4.3
Webview
Android 4.4
Webview
Chromium
WebKit

24. iOS 7
UIWebView
iOS 8
WKWebView
WebKit
Android 4.3
Webview
Android 4.4
Webview
Chromium
Nitro/V8 ✓ ✓

25. iOS 7
UIWebView
iOS 8
WKWebView
WebKit
Android 4.3
Webview
Android 4.4
Webview
Chromium
Nitro/V8 ✓ ✓
html5test.com 410 440 278 434

26. iOS 7
UIWebView
iOS 8
WKWebView
WebKit
Android 4.3
Webview
Android 4.4
Webview
Chromium
Nitro/V8 ✓ ✓
html5test.com 410 440 278 434
localStorage ✓ ✓ ✓ ✓
app cache ✓ ✓ ✓ ✓
indexedDB ✓ ✓

27. iOS 7
UIWebView
iOS 8
WKWebView
WebKit
Android 4.3
Webview
Android 4.4
Webview
Chromium
Nitro/V8 ✓ ✓
html5test.com 410 440 278 434
localStorage ✓ ✓ ✓ ✓
app cache ✓ ✓ ✓ ✓
indexedDB ✓ ✓
SPDY ✓ ✓

28. iOS 7
UIWebView
iOS 8
WKWebView
WebKit
Android 4.3
Webview
Android 4.4
Webview
Chromium
Nitro/V8 ✓ ✓
html5test.com 410 440 278 434
localStorage ✓ ✓ ✓ ✓
app cache ✓ ✓ ✓ ✓
indexedDB ✓ ✓
SPDY ✓ ✓
WebP ✓
srcset ✓ ?
WebGL ✓ ?

29. iOS 7
UIWebView
iOS 8
WKWebView
WebKit
Android 4.3
Webview
Android 4.4
Webview
Chromium
Nitro/V8 ✓ ✓
html5test.com 410 440 278 434
localStorage ✓ ✓ ✓ ✓
app cache ✓ ✓ ✓ ✓
indexedDB ✓ ✓
SPDY ✓ ✓
WebP ✓
srcset ✓ ?
WebGL ✓ ?
requestAnimatio
nFrame ✓ ✓ ✓

30. iOS 7
UIWebView
iOS 8
WKWebView
WebKit
Android 4.3
Webview
Android 4.4
Webview
Chromium
Nitro/V8 ✓ ✓
html5test.com 410 440 278 434
localStorage ✓ ✓ ✓ ✓
app cache ✓ ✓ ✓ ✓
indexedDB ✓ ✓
SPDY ✓ ✓
WebP ✓
srcset ✓ ?
WebGL ✓ ?
requestAnimatio
nFrame ✓ ✓ ✓
Nav Timing ✓ ✓ ✓
Resource Timing ✓

31. Legacy Webviews
hybrid apps have to be rebuilt
Android webview is pinned at Chromium 30;
requires OS upgrade to update
Android hybrid apps can bundle other
webviews: Crosswalk, Geckoview
legacy webviews
are here for awhile
flickr.com/photos/telstar/4572243525

32. iOS 7
UIWebView
iOS 8
WKWebView
WebKit
Android 4.3
Webview
Android 4.4
Webview
Chromium
Nitro/V8 ✓ ✓
html5test.com 410 440 278 434
localStorage ✓ ✓ ✓ ✓
app cache ✓ ✓ ✓ ✓
indexedDB ✓ ✓
SPDY ✓ ✓
WebP ✓
srcset ✓ ?
WebGL ✓ ?
requestAnimatio
nFrame ✓ ✓ ✓
Nav Timing ✓ ✓ ✓
Resource Timing ✓

34. docs.google.com/presentation/d/1wAxB5DPN-rcelwbGO6lCOus_S1rP24LMqA8m1eXEDRo/present

35. docs.google.com/presentation/d/1wAxB5DPN-rcelwbGO6lCOus_S1rP24LMqA8m1eXEDRo/present

36. speakerdeck.com/yeseniaperezcruz/design-decisions-through-the-lens-of-a-performance-budget

37. speakerdeck.com/yeseniaperezcruz/design-decisions-through-the-lens-of-a-performance-budget

38. speakerdeck.com/yeseniaperezcruz/design-decisions-through-the-lens-of-a-performance-budget

39. takeaways
web & hybrid apps are good
browser & webview perf differs
you DO have webview traffic
old webviews here for awhile
measure perf on all webviews
optimize for mobile

40. Brian LeRoux
Guy Podjarny
Max Firtman
Tim Kadlec

41. Steve Souders
@souders
stevesouders.com/docs/svmwameetup-webviews-20140930.pptx