training webinar: troubleshooting mobile apps performance
TRANSCRIPT
![Page 1: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/1.jpg)
Troubleshooting Mobile Apps Performance
![Page 2: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/2.jpg)
Replace This image in master
Presentation
Daniel ReisFront-End Expert @ OutSystems
Hello World!!Linkdin https://goo.gl/RtT7qU
Troubleshooting Mobile Apps Performance 2
![Page 3: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/3.jpg)
This Webinar is about
● Troubleshooting
● Performance
● It is not about solving performance issues
● How to detect those performance issues
Agenda 3
![Page 4: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/4.jpg)
Agenda
● Know how it works
● Know available tools
● Typical issues in Mobile Apps
● Putting into practice
Agenda 4
![Page 5: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/5.jpg)
Introduction
![Page 6: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/6.jpg)
Introduction
Introduction
● 51% of Population has a phone
6We Are Social Digital Report 2016 http://goo.gl/9Fl9Gc
![Page 7: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/7.jpg)
7Introduction
Introduction
● 51% of Population has a phone
● 83% of the Facebook’s users
accessed by smartphone
We Are Social Digital Report 2016 http://goo.gl/9Fl9Gc
![Page 8: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/8.jpg)
8Introduction
Introduction
● 51% of Population has a phone
● 83% of the Facebook’s users
accessed by smartphone
● +21% share of traffic via mobile
phones
We Are Social Digital Report 2016 http://goo.gl/9Fl9Gc
![Page 9: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/9.jpg)
What people expect about mobile apps?
● 47% expect a page to load less than 2 secs
● 77% expect a website load faster in mobile than desktop
● 40% abandon a website after waiting more than 3 secs
● 52% state that quick page loading is important to their site loyalty
Introduction 9
![Page 10: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/10.jpg)
Know how it works
![Page 11: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/11.jpg)
Agenda
● Know how it works
○ How the web works?
○ How the browser works?
○ How mobile apps works?
● Know available tools
● Typical issues in Mobile Apps
● Putting into in practice
Agenda 11
![Page 12: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/12.jpg)
How the web works?
12
Know how it works
Know how it works - How the web works?
![Page 13: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/13.jpg)
Page life cycle
13
● Domain Name Service Lookup
DNS Lookup
Know how it works - How the web works?
○ Provides a distributed name resolution service by
performing a lookup
○ The DNS can translate an Internet domain name such
as www.yoursite.com, into an IP address where the
website is located
![Page 14: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/14.jpg)
Page life cycle
14
● Transmission Control Protocol Connection
DNS Lookup
TCP Connection
○ Establish a connection with the server
○ 3-way handshake
■ SYN - Synchronize
■ SYN-ACK - Synchronize-Acknowledgement
■ ACK - Acknowledgement
Know how it works - How the web works?
![Page 15: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/15.jpg)
Page life cycle
15
● HyperText Transfer Protocol
○ Transfer web pages from a server to a client browser
● HyperText Transfer Protocol Request
○ Inform the web server what the client is looking for
● HyperText Transfer Protocol Response
○ Sends back a numeric response code
DNS Lookup
TCP Connection
HTTP Request and Response
Know how it works - How the web works?
![Page 16: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/16.jpg)
Page life cycle
16
● Server Response
DNS Lookup
TCP Connection
HTTP Request and Response
Server Response
○ Allows the client to display the response result
or to inform the user why a request failed
■ 200 OK
■ 304 Not Modified
■ 404 Not Found
■ 500 Internal Server Error
Know how it works - How the web works?
![Page 17: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/17.jpg)
Page life cycle
17
DNS Lookup
TCP Connection
HTTP Request and Response
Server Response
Client-Side Rendering
● Client-Side Rendering
○ Render the page in the browser
Know how it works - How the web works?
![Page 18: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/18.jpg)
Bandwith
18
● Capacity of a communications
channel that determines the rate of
data transfer
● With bigger bandwidth more data
can be transferred at a quicker speed
Know how it works - How the web works?
![Page 19: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/19.jpg)
Bandwith
19
4G - 4th Generation Wireless Network
● Designed primarily for data
● IP-based protocols (Long Term Evolution)
● True mobile broadband
4G is (not) everywhere
● 64% of world connected in 2G
● 30% through 3G
● 6% through 4G
Know how it works - How the web works?Webinar Become a mobile developer from scratch https://goo.gl/OfR0AS
![Page 20: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/20.jpg)
Latency
20
● Time Required to PING
● Time Required for a packet to
reach the destination and
bounce back
For a connection between London and
New York, across the Internet the
latency will be something like 71ms
Know how it works - How the web works?Network Latency Grid https://goo.gl/9Zw7YK
![Page 21: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/21.jpg)
TCP Slow Start
21
● Mechanism to estimate and adapt speeds
to the network’s changing conditions
● Multiple Round-trips to reach full capacity
● Latency will be charged on each trip
Know how it works - How the web works?Slow-Start http://goo.gl/tO9TDk
![Page 22: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/22.jpg)
TCP Slow Start
22
● Exponential Growth
cwnd - Congestion Window var
RTT - Round-Trip Time
Know how it works - How the web works?Slow-Start http://goo.gl/tO9TDk
● Packet Loss Fallback
![Page 23: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/23.jpg)
Parallel requests
23
● Avoid overloading web servers
● Reduce internet congestion
Know how it works - How the web works?
![Page 24: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/24.jpg)
How the browser works
24
Know how it works
Know how it works - How the browser works?
![Page 25: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/25.jpg)
How the browser works
● Critical Rendering Path
● Re-Paint
● Reflow
● Composite
25Know how it works - How the browser works?
![Page 26: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/26.jpg)
Critical Render Path
26
HTML
DOM
● DOM - Document Object Model
○ The parsing of the HTML document received
by the server
○ Defines the properties, methods and events
for all HTML elements
Know how it works - How the browser works?
![Page 27: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/27.jpg)
Critical Render Path
27
HTML CSS
DOM CSSOM
● CSSOM - Cascading Style Sheets Object Model
○ It is much like the DOM, but for the CSS
rather than the HTML
○ It is a map from the specified stylesheet
rules and resources
○ It maps out the rules in your stylesheet to
the things on the page which need styling
Know how it works - How the browser works?
![Page 28: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/28.jpg)
Critical Render Path
28
HTML CSS
DOM CSSOM
Render Tree
● Render Tree
○ Contains only the nodes required to render
the page
○ Reflects the DOM structure without the
invisible elements
Know how it works - How the browser works?
![Page 29: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/29.jpg)
Critical Render Path
29Know how it works - How the browser works?
![Page 30: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/30.jpg)
Critical Render Path
30
HTML CSS
DOM CSSOM
Render Tree
Layout
● Layout
○ Exact position and size of each element from
the Render Tree
○ Maps the exact coordinates of where each
element must appear on the screen, starting
at the top left position: 0,0
Know how it works - How the browser works?
![Page 31: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/31.jpg)
Critical Render Path
31
HTML CSS
DOM CSSOM
Render Tree
Layout
Paint
● Paint○ Displayed page in the browser window
Know how it works - How the browser works?
![Page 32: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/32.jpg)
Critical Render Path
32
HTML CSS
DOM CSSOM
Render Tree
Layout
Paint
● Reflow
Render Tree
Layout
Paint
○ Computes the layout of the page
○ Computes the dimensions and position of
the element
○ Triggers further reflows on that element’s
children, ancestors and elements that
appear after it in the DOM
○ Calls a final Repaint
Know how it works - How the browser works?
![Page 33: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/33.jpg)
Reflow can be triggered easily, such as
33
● Insert, remove or update an element in the DOM
● Move or a animate a DOM element
● Take measurements of an element like offsetWidth or offsetHeight
● Change a CSS style rule
● Manipulating the class attribute
● Add or remove a stylesheet
● Scroll or resize the window
● Setting a property of the style attribute
Know how it works - How the browser works?
![Page 34: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/34.jpg)
Critical Render Path
34
HTML CSS
DOM CSSOM
Render Tree
Layout
Paint
● Repaint
Render Tree
Paint
○ Goes through all the elements and determines
their visual style properties, then it updates
the relevant parts of the screen
○ When changing element styles which don't
affect the element's position on a page, the
browser just repaints the element again with
the new styles applied
Know how it works - How the browser works?
![Page 35: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/35.jpg)
Out of the Critical Render Path
35
HTML CSS
DOM CSSOM
Render Tree
Layout
Paint
● Composite
Composite
Out of the CRP
○ Manage Graphics Layer Trees
○ Draw the Compositing Layers of the page
○ Use of GPU (Graphics Processing Unit)
CPU
GPU
Know how it works - How the browser works?
![Page 36: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/36.jpg)
Promote element to a Layer
36
● Use of GPU (Graphics Processing Unit)
● Avoid non-trivial Paint
● Faster and Smoother Render
● Trigger a Compositing Layer
Know how it works - How the browser works?
![Page 37: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/37.jpg)
How to promote element to a Layer?
37
● will-change property
○ Method for optimizing animations
○ Informs the browser which elements will
change and what properties will change
● Manipulation of the Z axis
○ transform: translate3d(0,0,0);
○ transform: translateZ(0);
Know how it works - How the browser works?Optimising for 60fps everywhere https://goo.gl/FgKJrs
![Page 38: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/38.jpg)
Out of the Critical Render Path
38
HTML CSS
DOM CSSOM
Render Tree
Layout
Paint
● Promoting an element to a Layer
Out of the CRP
Composite
CPU
GPU
Composite
○ Will use Composite
○ Out of the CRP
Know how it works - How the browser works?
![Page 39: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/39.jpg)
Out of the Critical Render Path
39
…17º
27º30º66º72º
Know how it works - How the browser works?CSS properties usage by style https://goo.gl/hhoyc0
![Page 40: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/40.jpg)
How mobile apps works
40
Know how it works
Know how it works - How mobile apps works?
![Page 41: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/41.jpg)
iOS Pseudo-Browsers
● There is only one browser in iOS
● For experience purposes
● All browsers use Safari Render Engine
Chrome for iOS is different from Chrome for Android
41Know how it works - How mobile apps works?
![Page 42: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/42.jpg)
WebView for Android / Chromium
● Since Android 4.4 the WebView component is based on the Chromium open
source project
● In Android 5.0 the WebView can be updated in Google Play separately to the
Android platform
42Know how it works - How mobile apps works?
![Page 43: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/43.jpg)
WebView for Android / Chromium
43
● Chromium based WebView is faster
● Performance increased
○ Overall results
○ Up to 354% for HTML5 Canvas
○ Up to 358% for Javascript
Know how it works - How mobile apps works?Old WebView vs. Chromium backed WebView Benchmark https://goo.gl/Uy2wNs
![Page 44: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/44.jpg)
Mobile delay while click on a link
44
● The browser wait approximately 300ms
from the time you tap the button until
fire the click event
● In order to identify if it was a single
click event or a double tap event
● Nowadays only happens in iOS
Know how it works - How the web works?
![Page 45: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/45.jpg)
Recap
● Webpages are slower in Mobile Devices than Desktop
● Many things happen before we see the page in the browser
● While on network, most of the time we use 2G or 3G
● Avoid the use of Repaint and Reflow, instead, use Composite
45Know how it works
![Page 46: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/46.jpg)
Know available tools
![Page 47: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/47.jpg)
Agenda
● Know how it works
● Know available tools
○ Deep dive in Chrome DevTools
○ Remote Debug Inspectors
○ Connecting your device
● Typical issues in Mobile Apps
● Putting into in practice
Agenda 47
![Page 48: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/48.jpg)
Deep dive in Chrome DevTools
48Know available tools - Deep dive in Chrome DevTools
![Page 49: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/49.jpg)
Network
49Know available tools - Deep dive in Chrome DevToolsEvaluating network performance https://goo.gl/GKL5c8
![Page 50: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/50.jpg)
Network
● Columns
50Know available tools - Deep dive in Chrome DevTools
![Page 51: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/51.jpg)
Network
● Queuing
○ Time waiting to tag this request into an open TCP connection
● Stalled
○ Time spent negotiating with a proxy server connection
● Request sent
● Waiting
○ Time to first byte
● Content Download
https://goo.gl/GKL5c8
51Know available tools - Deep dive in Chrome DevTools
![Page 52: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/52.jpg)
Timeline
● Paint
○ Similar to Canvas
○ List of Draws grouped together
as a data structure
● Rasterize Paint
○ Render the Draws into pixels
52Know available tools - Deep dive in Chrome DevTools
![Page 53: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/53.jpg)
Timeline
● Reflow
○ To avoid constant Reflow, the browser
will setup a queue of the changes
○ This way several changes will be
combined and only one reflow will be
computed
○ Browsers flush the queue once a
certain amount of time passes or a
certain number of changes is reached
53Know available tools - Deep dive in Chrome DevTools
![Page 54: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/54.jpg)
Timeline
● Reflow
○ Sometimes the script force a reflow,
flushing the queue
○ This happens when you request style
information, such as
■ offsetWidth
■ offsetHeight
■ scrollTop
54Know available tools - Deep dive in Chrome DevTools
![Page 55: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/55.jpg)
Timeline
● Layers
55Know available tools - Deep dive in Chrome DevTools
![Page 56: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/56.jpg)
Timeline
● Layers
56Know available tools - Deep dive in Chrome DevTools
![Page 57: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/57.jpg)
Remote Debug Inspectors
57
Know available tools
Know available tools - Remote Debug Inspectors
![Page 58: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/58.jpg)
Remote Debug Inspectors
● weinre - WEb INspector REmote
○ http://goo.gl/1TiBjO
● Adobe Edge Inspect
○ http://goo.gl/hmOkAb
58How to Troubleshoot
![Page 59: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/59.jpg)
Connecting your device
59
Know available tools
Know available tools - Connecting your device
![Page 60: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/60.jpg)
Remote Debug installation
60
Android on Windows - http://goo.gl/QYjKEX
1. Chrome Remote Debugging Requirements
○ https://goo.gl/g6AO63
2. Samsung Android USB Driver for Windows
○ http://goo.gl/vnk108
3. Android SDK
○ http://goo.gl/II9nyw
○ http://goo.gl/AcnPhT
4. adb devices (need to be started every time you debug)
○ https://goo.gl/Bw8h1bKnow available tools - Connecting your device
![Page 61: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/61.jpg)
Connecting your device
61
1. Start adb
○ https://goo.gl/Bw8h1b
2. Open chrome://inspect/#devices
Know available tools - Connecting your device
![Page 62: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/62.jpg)
Connecting your device
Remote Debug installation on Mac
● Just plug-in the cable!!
62Know available tools - Connecting your device
![Page 63: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/63.jpg)
Recap
● Understanding Network requests
● Detect Reflow and Repaint
● Know how to debug remotely
63Know available tools - Deep dive in Chrome DevTools
![Page 64: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/64.jpg)
Typical Issues in Mobile Apps
![Page 65: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/65.jpg)
Agenda
● Know how it works
● Know available tools
● Typical issues in Mobile Apps
● Putting into in practice
Agenda 65
![Page 66: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/66.jpg)
Typical issues in Mobile Apps
No Image Optimization
66Typical issues in Mobile Apps
![Page 67: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/67.jpg)
Typical issues in Mobile Apps
No Image Optimization
● Original Image
○ PNG
○ 1,72 MB
67Typical issues in Mobile Apps
![Page 68: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/68.jpg)
Typical issues in Mobile Apps
No Image Optimization
● optimizilla.com
○ JPG
○ 14,2 KB
68Typical issues in Mobile Apps
![Page 69: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/69.jpg)
Typical issues in Mobile Apps
No Image Optimization
69Typical issues in Mobile Apps
![Page 70: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/70.jpg)
Typical issues in Mobile Apps
No Image Optimization
● 1px with
○ JPG
○ 1,09 KB
○ repeat-x
70Typical issues in Mobile Apps
![Page 71: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/71.jpg)
Typical issues in Mobile Apps
No Image Optimization
71Typical issues in Mobile Apps
![Page 72: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/72.jpg)
Typical issues in Mobile Apps
No Image Optimization
● CSS background-color
○ instant render
72Typical issues in Mobile Apps
![Page 73: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/73.jpg)
Typical issues in Mobile Apps
No Image Optimization
73Typical issues in Mobile Apps
![Page 74: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/74.jpg)
Typical issues in Mobile Apps
Image Download
74
.PhoneTypical issues in Mobile Apps
![Page 75: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/75.jpg)
Typical issues in Mobile Apps
Image Download
● display: none or visibility: hidden
○ Still download the image
75
.Phone
Typical issues in Mobile Apps
![Page 76: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/76.jpg)
Typical issues in Mobile Apps
Image Download
● SilkUI Device Class
76
.Phone.Phone
Typical issues in Mobile Apps
![Page 77: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/77.jpg)
Typical issues in Mobile Apps
Image Download
● SilkUI DisplayOnDevice
77
.Phone
Typical issues in Mobile AppsWebinar SILKUI from basics to advanced https://goo.gl/1bgXQC
![Page 78: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/78.jpg)
Typical issues in Mobile Apps
Improve usage of Fonts
● Web Fonts Concerns
○ Larger font files or too many fonts,
slow down loading of the page,
especially on mobile devices.
○ Load after 1st Paint (glitch visible in
Mobile)
○ Unicode fonts can contain
thousands of glyphs
○ No single Universal Format78
● Web Font Formats
○ woff / woff2
○ ttf (below Android 4.4)
○ eot (below IE9)
○ svg (it's being deprecated)
Typical issues in Mobile Apps
![Page 79: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/79.jpg)
Typical issues in Mobile Apps
Improve usage of Fonts
79Typical issues in Mobile Apps
![Page 80: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/80.jpg)
Typical issues in Mobile Apps
Improve usage of Fonts
80
.Phone
.DesktopTypical issues in Mobile Apps
![Page 81: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/81.jpg)
Typical issues in Mobile Apps
Uncompressed Resources
● Content-Encoding: gzip
81Typical issues in Mobile Apps
![Page 82: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/82.jpg)
Typical issues in Mobile Apps
Uncompressed Resources
● Gzipping
○ Process of finding all repetitive strings and replaces them
with pointers to the first instance of that string
■ Reduce until 70% to 80% page size
■ All modern browsers support GZIP and will request
it by default
■ Most of the sites are using Gzip compression across
the web
82Typical issues in Mobile Apps
![Page 83: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/83.jpg)
Typical issues in Mobile Apps
External Resources
● Domain Path
83Typical issues in Mobile Apps
![Page 84: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/84.jpg)
Typical issues in Mobile Apps
Excessive Resources
84Typical issues in Mobile Apps
![Page 85: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/85.jpg)
Typical issues in Mobile Apps
Uncached Resources
● Cache avoid unnecessary HTTP requests on subsequent page views
85Typical issues in Mobile Apps
![Page 86: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/86.jpg)
Typical issues in Mobile Apps
Parser-Blocking JavaScript
● Usage of external widgets
● Large Javascript files
● Synchronous JavaScript resources
● Long running JavaScript
● Repaint and Reflow the DOM
86Typical issues in Mobile Apps
![Page 87: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/87.jpg)
Recap
● Optimize your images
● Do not use images for any sort of layout styling
● Use font icons instead of sprites
● Improve the usage of Fonts
● Compress and Cache your Resources
● Attention to Excessive and External Resources
● Take a look to Parser-Blocking JavaScript
87Typical issues in Mobile Apps
![Page 88: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/88.jpg)
Putting into practice
![Page 89: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/89.jpg)
Agenda
● Know how it works
● Know available tools
● Typical issues in Mobile Apps
● Putting into in practice
Agenda 89
![Page 90: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/90.jpg)
My app is slow… where to start?
1. By default, troubleshoot first in the
desktop browser console2. In DevTools Network
a. Search for the Typical Issues
3. In DevTools Timeline
a. Look deeper into Painting and Scripting
b. Try to find some Forced Reflow bottlenecks
4. If all this fail… then go to mobile remote debugging
Putting into practice 90
![Page 91: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/91.jpg)
Troubleshooting in OutSystems Now
What is OutSystems Now?
● Transforms apps build in OutSystems Platform in Hybrid apps
○ iOS, Android and Windows apps
● Enabling access to device capabilities
○ Camera, location, local storage or other device APIs
● Apps can then be released to public stores
91How to TroubleshootOutSystems Now Website https://goo.gl/ihIhaI
![Page 92: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/92.jpg)
How to Troubleshoot in OutSystems Now
OutSystems Now iOS concerns
● Slow apps on Safari and iOS 9+
○ http://goo.gl/qAPxQJ
● Slow in page transitions
○ Transition made with images
92Putting into practice
![Page 93: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/93.jpg)
Recap
● Review the Bases
● Deep dive in DevTools
● Typical issues in mobile
● Putting into practice
93Putting into practice
○ Look for the signals
○ Know where/how to change
○ How to debug remotely
![Page 94: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/94.jpg)
Final Recap
![Page 95: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/95.jpg)
Final Recap
● Know how it works
○ Webpages are slower in Mobile Devices than Desktop
○ Many things happen before we see the page in the browser
○ While on network, most of the time we use 2G or 3G
○ Avoid the use of Repaint and Reflow, instead, use Composite
Final Recap 95
![Page 96: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/96.jpg)
Final Recap
● Know how it works
● Know available tools
○ Understanding Network requests
○ Detect Reflow and Repaint
○ Know how to debug remotely
96Final Recap
![Page 97: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/97.jpg)
Final Recap
● Review the Bases
● Deep dive in DevTools
● Typical issues in mobile
○ No Image Optimization
○ Improve usage of Fonts
○ Uncompressed Resources
○ External Resources
○ Excessive Resources
○ Uncached Resources
○ Parser-Blocking JavaScript97Final Recap
![Page 98: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/98.jpg)
Final Recap
● Review the Bases
● Deep dive in DevTools
● Typical issues in mobile
● Putting into practice
○ Look for the signals
○ Know where/how to change
○ How to debug remotely
98Final Recap
![Page 99: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/99.jpg)
Replace This image in master
Daniel ReisFront-End Expert @ OutSystems
Thank You!!
How Troubleshoot Mobile App Performance 99
![Page 100: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/100.jpg)
Further Reading
● Mobile Web Performance Auditing by Paul Lewis
○ https://goo.gl/COcxFh
● Optimising for 60fps everywhere by JT
○ https://goo.gl/FgKJrs
● Pixels are expensive by Paul Lewis
○ https://goo.gl/H4fzJf
● Why Moving Elements With Translate() Is Better Than Pos:abs Top/left by Paul Irish
○ http://goo.gl/6q21D
● Top CSS techniques for optimal performance by Dinis Carvalho
○ https://goo.gl/E7cXTA
● Measuring web app runtime performance by Sara Gonçalves
○ https://goo.gl/M2eyb2
● Evaluating network performance
○ https://goo.gl/GKL5c8
● Performance profiling with the Timeline
○ https://goo.gl/UBVd9Y100How Troubleshoot Mobile App Performance
![Page 101: Training Webinar: Troubleshooting Mobile Apps Performance](https://reader031.vdocument.in/reader031/viewer/2022021921/58f159b61a28abab378b45d3/html5/thumbnails/101.jpg)
OutSystems Webinars
Previous Webinars
● SILKUI from basics to advanced by Samuel Jesus
○ Watch the video here https://goo.gl/1bgXQC
● Become a mobile developer from scratch by Ruben Gonçalves
○ Watch the video here https://goo.gl/OfR0AS
Next Webinars
● Infrastructure Monitoring - the tool and practice by Paulo Cunha, March 24th
● Detect performance bottlenecks (Performance CSI) by Paulo Garrudo, April 7th
● Building a Live Style Guide by Ruben Gonçalves, April 21th101Final Recap