![Page 1: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/1.jpg)
extreme web performance for mobile devices
maximiliano @firtman firt.mobi
New York, Sep 15 2014
![Page 2: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/2.jpg)
![Page 3: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/3.jpg)
![Page 4: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/4.jpg)
![Page 5: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/5.jpg)
Slides, links and tests firtman.github.io/velocity
![Page 6: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/6.jpg)
questions
yes, please !
QA at the end office hours tomorrow
![Page 7: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/7.jpg)
performance + mobile + web
1- Mobile Web today 2- Performance & Mobile 3- Tools 4- Initial loading & perception 5- Responsiveness & experience
![Page 8: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/8.jpg)
![Page 9: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/9.jpg)
1- mobile web today*
*today: september 2014
![Page 10: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/10.jpg)
1- mobile web today
- Web Platforms - The Android’s problem
![Page 11: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/11.jpg)
web platforms
![Page 12: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/12.jpg)
iOS and Android
web platforms
![Page 13: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/13.jpg)
Adobe Digital Index NetMarketShare Akamai.io Wikimedia Stats StatCounter MOVR by WURFL
web platformsLinks at firt.mobi/velocity
![Page 14: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/14.jpg)
web platformsOthers
4%
Windows Phone 3%
Opera 5%
iOS!50%
Android!38%
![Page 15: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/15.jpg)
web platformsOthers
4%
Windows Phone 3%
Opera 5%
iOS!50%
Android!38%
Others?
• Firefox • UC Browser • Nokia Browser • BlackBerry Browser
![Page 16: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/16.jpg)
web platforms
iOS!50%
Safari!100%
![Page 17: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/17.jpg)
web platforms
iOS!50%
6.x!11%
7.x!89%
Source: Apple
![Page 18: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/18.jpg)
web platforms
Safari iOS6 5%
Safari iOS7!45%
Android!38%
![Page 19: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/19.jpg)
web platforms
Android!38%
![Page 20: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/20.jpg)
web platforms
Android!38%
Browser!64%
Chrome!36%
![Page 21: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/21.jpg)
![Page 22: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/22.jpg)
web platforms
![Page 23: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/23.jpg)
web platforms
![Page 24: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/24.jpg)
web platforms
![Page 25: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/25.jpg)
LG G3
![Page 26: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/26.jpg)
web platforms
Android!38%
Samsung!22%
Browser!42%
Chrome!36%
![Page 27: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/27.jpg)
web platforms
Android!38%
4.4
4.1-4.3
4.0
2.3
Source: Android Dashboard
![Page 28: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/28.jpg)
web platformsOthers
4%
Windows Phone 3%
Opera 5%
iOS!50%
Android!38%
![Page 29: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/29.jpg)
web platforms
Samsung!10%
Android!15%
Others 4%
Windows Phone 3%
Opera 5%
Safari iOS6 5%
Safari iOS7!45%
Chrome!14%
Others?
• Firefox • UC Browser • Nokia Browser • BlackBerry Browser
![Page 30: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/30.jpg)
1- mobile web today
- Understand the real ecosystem - Android browsers - Don’t think you are an average user - May change future
![Page 31: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/31.jpg)
2- mobile & performance
- Perception - Differences - Cellular networks - Responsive Web Design
![Page 32: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/32.jpg)
immediate feedback 100ms
!
perception
Jakob Nielsen - Usability Engineering
![Page 33: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/33.jpg)
immediate feedback 100ms
losing user’s flow of thoughts 1s
perception
Jakob Nielsen - Usability Engineering
![Page 34: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/34.jpg)
500ms delay, +26% user’s frustration
perception
Source: Radware
![Page 35: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/35.jpg)
why do we need special care on mobile?
![Page 36: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/36.jpg)
CPU and GPU
Memory
differences
![Page 37: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/37.jpg)
CPU and GPU
Memory
differences
5x
![Page 38: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/38.jpg)
Long tail persists
differences
Source: MOVR by ScientiaMobile
![Page 39: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/39.jpg)
Wifi
differences
![Page 40: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/40.jpg)
Wifi, public spaces?
differences
![Page 41: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/41.jpg)
Cellular connections
differences
![Page 42: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/42.jpg)
We have 4G! We don't need to worry about performance...
(
)
![Page 43: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/43.jpg)
cellular
0
25
50
75
100
US Western Europe Asia Global
4G 2G/3G
Only 4% is on 4G globally
![Page 44: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/44.jpg)
cellular
0
25
50
75
100
US Western Europe Asia Global
4G 2G/3G
~30% of the time 4G was not used
![Page 45: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/45.jpg)
Real Bandwidth (Mbps)cellular networks
0 2 4 6 8
2G 3G Wifi 4G
![Page 46: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/46.jpg)
RTT - latencycellular networks
2G
3G
4G
Home
0 250 500 750 1000
Min Max
![Page 47: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/47.jpg)
latency
request
bandwidth
![Page 48: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/48.jpg)
responsive web design
![Page 49: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/49.jpg)
![Page 50: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/50.jpg)
Responsive Web Design is a TOOL
![Page 51: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/51.jpg)
Responsive Web Design is NOT a GOAL
![Page 52: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/52.jpg)
Users DON’T care if your site is RESPONSIVE
(in terms of RWD)
![Page 53: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/53.jpg)
Users DO care if the site is FAST
![Page 54: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/54.jpg)
Page size
mobile vs desktop
responsive web design
Much smaller!6%
Slightly smaller!22%
Same Size!72%
Source: guypo.com
![Page 55: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/55.jpg)
Superbowl advertisers
mobile approach
responsive web design
Responsive site!50%
Desktop!7%
Mobile !43%
Source: blogs.keynote.com
![Page 56: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/56.jpg)
![Page 57: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/57.jpg)
![Page 58: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/58.jpg)
2- mobile and performance
- Perception: 1s threshold - RTT latency - Test on low hardware and 2G/3G !
![Page 59: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/59.jpg)
3- tools
![Page 60: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/60.jpg)
3- tools- where - measuring loading times - measuring responsiveness - online tools - html5 apis
![Page 61: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/61.jpg)
Simulator & Emulator
Real device
where
![Page 62: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/62.jpg)
emulators
Samsung!10%
Android!14%
Others!4%
Windows Phone 3%
Opera 5%
Safari iOS6 5%
Safari iOS7!45%
Chrome!14%
![Page 63: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/63.jpg)
emulators
Samsung!10%
Android!14%
Others!4%
Windows Phone!3%
Opera 5%
Safari iOS6 5%
Safari iOS7!45%
Chrome!14%
![Page 64: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/64.jpg)
emulators
Samsung!10%
Android!14%
Others!4%
Windows Phone 3%
Opera 5%
Safari iOS6 5%
Safari iOS7!45%
Chrome!14%
![Page 65: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/65.jpg)
DEMO
![Page 66: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/66.jpg)
online tools
![Page 67: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/67.jpg)
online tools
![Page 68: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/68.jpg)
remote inspectors
![Page 69: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/69.jpg)
remote inspectors
Samsung!10%
Android!14%
Others!4%
Windows Phone!3%
Opera 5%
Safari iOS6 5%
Safari iOS7!45%
Chrome!14%
![Page 70: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/70.jpg)
Measuring
DEMO
![Page 71: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/71.jpg)
Proxies / Network sniffers
• Charles Proxy • Fiddler
tools
Image from telerik fiddler
![Page 72: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/72.jpg)
Connection simulators
• Network link conditioner (Mac/iOS) • Charles Proxy • Clumsy for Windows • Net Limiter for Windows • SlowyApp for Mac • Chrome Developer Tools
tools
![Page 73: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/73.jpg)
Navigation Timing API
• window.performance • Timestamps available
html5 apis
![Page 74: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/74.jpg)
navigation timing api
Samsung!12%
Android*!12%
Others!4%
Windows Phone!3%
Opera 5%
Safari iOS6!5%
Safari iOS7!45%
Chrome!14%
* Android browser only from 4.0
![Page 75: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/75.jpg)
![Page 76: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/76.jpg)
Navigation Timing APIhtml5 apis
In just 2 days…
![Page 77: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/77.jpg)
navigation timing api
Samsung!12%
Android!12%
Others!4%
Windows Phone!3%
Opera 5%
Safari iOS6/7!15%
Safari iOS8!35%
Chrome!14%
in a few weeks…
![Page 78: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/78.jpg)
Navigation Timing APIhtml5 apis
DEMO
![Page 79: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/79.jpg)
Resource Timing API• Information per resource • Chrome and IE11 only
html5 apis
![Page 80: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/80.jpg)
Network information API
• Android Browser, Silk (spec #1) type • BlackBerry 10, old Firefox (spec #2) bandwidth • Firefox, Chrome for Android 38+ (spec #3) type
html5 apis
![Page 81: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/81.jpg)
3- tools
- Learn where to test - Measure loading times - Measure responsiveness - HTML5 APIs !
![Page 82: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/82.jpg)
4- initial loading & perception
![Page 83: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/83.jpg)
4- initial loading & perception- 1 second threshold - classic checklist - ATF and the rest - responsive web design - future visits
![Page 84: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/84.jpg)
![Page 85: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/85.jpg)
![Page 86: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/86.jpg)
![Page 87: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/87.jpg)
![Page 89: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/89.jpg)
![Page 90: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/90.jpg)
What!!? Do you expect a page load in 200ms?
(
)
![Page 91: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/91.jpg)
No really, we just need the PERCEPTION
![Page 92: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/92.jpg)
Let’s see HOW
![Page 93: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/93.jpg)
![Page 94: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/94.jpg)
= REDIRECTS
![Page 95: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/95.jpg)
Redirects
• From 150 to 1000 ms per redirect • mydomain.com -> m.mydomain.com • URL shorteners
![Page 96: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/96.jpg)
Redirects
DEMO
![Page 97: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/97.jpg)
![Page 98: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/98.jpg)
= APP BANNER
![Page 99: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/99.jpg)
• From 1 to 5s !
![Page 101: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/101.jpg)
Basic browser behavior
• Network Fetch • Parsing • Rendering
![Page 102: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/102.jpg)
Basic browser behavior
HTML
JS CSS
![Page 103: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/103.jpg)
Basic browser behavior
HTML
JS CSSBLOCKS PARSING BLOCKS RENDERING
![Page 104: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/104.jpg)
The 14K limit
![Page 105: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/105.jpg)
The 14K limit
• TCP slow start • Initial congestion window: ~14.6Kb (compressed) • > 14Kb will create another roundtrip
RTT
![Page 106: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/106.jpg)
We need to separate ABOVE THE FOLD (ATF)
content
![Page 107: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/107.jpg)
ATF in 1s = 1 RTT ~ < 14Kb !
!
HTML + CSS + JavaScript Images?
ATF
![Page 108: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/108.jpg)
Avoid JavaScript frameworks
• Embrace Vanilla JS • If you really need them, load them after ATF • Think on alternatives or partial frameworks
ATF
![Page 109: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/109.jpg)
Careful with Data URI in CSS
• Images are non-blocking by default • Using Data URI in CSS creates blocking images • Use them only on non-ATF external CSS
ATF
![Page 110: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/110.jpg)
Compress resources
• Use Gzip in HTTP • For text-based files only
![Page 111: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/111.jpg)
Client side rendering
• Careful with client-side frameworks • Try to render the initial view server-side • Render at least a basic view
ATF
![Page 112: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/112.jpg)
Client side rendering
• Careful with client-side frameworks • Try to render the initial view server-side • Render at least a basic view
ATF
5x
![Page 113: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/113.jpg)
Use illusion tricks
• Loading content animation • Minimal-ui viewport ASAP (RIP) • Remember to keep the user engaged in 1s
ATF
![Page 114: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/114.jpg)
Web Fonts• Blocks text rendering • Fonts are bigger than 14Kb • Use them with care • Remove characters • Simplify glyphs
ATF
![Page 115: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/115.jpg)
Responsive Web Design
![Page 116: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/116.jpg)
Responsive Web Design
• Media queries block rendering (all of them) • ATF content on mobile is not the same
![Page 117: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/117.jpg)
DON’T rely on RWD techniques only
for first view
![Page 118: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/118.jpg)
RESPONSIVE WEB DESIGN is the future
![Page 119: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/119.jpg)
We are not saying go m.*
![Page 120: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/120.jpg)
Responsive Web Design
• Using same URL for mobile/desktop still a good a idea • Mix it with RESS / adaptive web design • Load media queries CSS async • Use server-side libraries • WURFL or DeviceAtlas
![Page 121: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/121.jpg)
After ATF is ready
• Load rest of your content • Gain experience while rendering ATF: current performance, screen density, bandwidth • Make decisions: HD/SD
![Page 122: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/122.jpg)
Async scripts
<script async src=""></script> HTML5
![Page 123: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/123.jpg)
Defer non-ATF CSS
• No defer or async attributes (yet) • Inject <link> after rendering • load, requestAnimationFrame
![Page 124: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/124.jpg)
Speed future visits
• Be cache friendly • Use Application Cache for ATF content • Create a custom cache
![Page 125: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/125.jpg)
4- initial loading & perception
- ATF in 1s (illusion) - No redirects, GZip, no scripts - Only ATF CSS, careful with fonts - Defer anything else !
![Page 126: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/126.jpg)
5- responsiveness & experience
![Page 127: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/127.jpg)
4- responsiveness & experience
- consistent frame rate - immediate feedback - scrolling - your new enemy
![Page 128: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/128.jpg)
Keep framerate high and consistent
• Main UI thread as free as possible • Avoid repainting (software bitmap calculations)
consistent fps
![Page 129: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/129.jpg)
JavaScriptframerate
• Avoid DOM manipulations inside loops/scroll
var e = document.querySelector("#test");for (var i=0; i<100; i++) { // change e attributes });
JAVASCRIPT
![Page 130: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/130.jpg)
CSSframerate
• Promote GPU layers smartly selector {
-webkit-transform: translateZ(0); -webkit-perspective: 1000; } !
selector { z-index: 10; }
CSS
![Page 131: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/131.jpg)
Animationsframerate
• Don’t animate from JavaScript for basic stuff • Use requestAnimationFrame
![Page 132: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/132.jpg)
remember 100ms immediate feedback?
![Page 133: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/133.jpg)
Immediate feedback
• The 300ms delay !
• mobile viewport (“user-scalable=no” on some browsers) • FastClick solution
![Page 134: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/134.jpg)
Immediate feedback
!
• FastClick solution
![Page 135: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/135.jpg)
Immediate feedback!
• Mobile Viewport on Chrome
<meta name=viewport content="width=device-width">
HTML
![Page 136: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/136.jpg)
Immediate feedback!
• Mobile Fixed Viewport on IE <meta name=viewport content="width=device-width, user-scalable=no" >
HTML
![Page 137: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/137.jpg)
Immediate feedback!
• CSS on IE html { -ms-touch-action: manipulation; touch-action: manipulation; }
CSS
![Page 138: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/138.jpg)
Distract the user
![Page 139: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/139.jpg)
Storage for immediate feedback
• web storage vs web sql vs indexeddb • think about async vs sync • Finally IndexedDB on iOS 8!
![Page 140: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/140.jpg)
navigator.geolocation .getCurrentPosition(cbOK, cbKO, { maximumAge: 60000 });
JAVASCRIPT
Geolocation cache
![Page 141: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/141.jpg)
Scrolling
![Page 142: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/142.jpg)
Scrolling
• avoid re-painting • use touch overflow for momentum • don’t use JavaScript scrollers • on large scrolling areas: copy native
![Page 143: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/143.jpg)
Large scrolling areas
Let’s copy native frameworks: • iOS: UITableView • Android: ListView & Adapters
![Page 144: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/144.jpg)
Large scrolling areas
• Object pool !
![Page 145: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/145.jpg)
Infinite scroll
• DOM vs. iframe vs. object pool • changes on iOS8
![Page 146: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/146.jpg)
Your new enemy
![Page 147: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/147.jpg)
NOT THE USER
![Page 148: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/148.jpg)
YOUR DESIGNER
![Page 149: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/149.jpg)
Careful with some design features
• GPU vs CPU repaint • Important on scroll, transitions & animations
![Page 150: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/150.jpg)
Careful with some design features
• Transforms: translate, scale, rotate and opacity GPU • border-radius, gradients, shadows, filters CPU repaint
![Page 151: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/151.jpg)
300 CSS pixels
300 1.00 390 1.30 450 1.50 600 2.00 672 2.24 900 3.00 1200 4.00 !
!
device px px ratio Firefox OS
Galaxy SIIiPhone 5/6BB Z10iPhone 6 Plus
Nexus 7
LG G3
![Page 152: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/152.jpg)
Careful with some design features
• Deliver super high resolution images
![Page 153: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/153.jpg)
5- responsiveness & experience- 100s feedback - Consistent fps - Avoid CPU repaints - Embrace GPU smartly - Profile & test !
![Page 154: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/154.jpg)
Picture from Simon Howden freedigitalphotos.net!
Picture from Simon Howden freedigitalphotos.net!
uf! we've covered a lot!
![Page 155: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/155.jpg)
1- Mobile Web today 2- Mobile Performance 3- Tools 4- Initial load & perception 5- Responsiveness & experience
![Page 156: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/156.jpg)
Slides, links and tests firtman.github.io/velocity
![Page 157: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/157.jpg)
final thoughts
- measure and profile on the real world - don’t redirect, reduce requests - atf content in 1s, defer the rest - be simple, be aggressive
![Page 158: Extreme Web Performance for Mobile Devices - Velocity NY](https://reader033.vdocument.in/reader033/viewer/2022060106/54572d46b1af9fcf338b50ba/html5/thumbnails/158.jpg)
you can reach a good experience
Pictures)from)freedigitalphotos.net)
twitter: @firt mobilexweb.com
firt.mobi/pmw Book signing: Wed 10.45am
Office Hours: Tue 10.45am