training webinar: troubleshooting mobile apps performance
TRANSCRIPT
Troubleshooting Mobile Apps Performance
Replace This image in master
Presentation
Daniel ReisFront-End Expert @ OutSystems
Hello World!!Linkdin https://goo.gl/RtT7qU
Troubleshooting Mobile Apps Performance 2
This Webinar is about
● Troubleshooting
● Performance
● It is not about solving performance issues
● How to detect those performance issues
Agenda 3
Agenda
● Know how it works
● Know available tools
● Typical issues in Mobile Apps
● Putting into practice
Agenda 4
Introduction
Introduction
Introduction
● 51% of Population has a phone
6We Are Social Digital Report 2016 http://goo.gl/9Fl9Gc
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
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
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
Know how it works
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
How the web works?
12
Know how it works
Know how it works - How the web works?
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 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 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 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 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?
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?
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
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
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
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
Parallel requests
23
● Avoid overloading web servers
● Reduce internet congestion
Know how it works - How the web works?
How the browser works
24
Know how it works
Know how it works - How the browser works?
How the browser works
● Critical Rendering Path
● Re-Paint
● Reflow
● Composite
25Know how it works - How the browser works?
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?
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?
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?
Critical Render Path
29Know how it works - How the browser works?
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?
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?
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?
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?
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?
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?
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?
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
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?
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
How mobile apps works
40
Know how it works
Know how it works - How mobile apps works?
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?
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?
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
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?
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
Know available tools
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
Deep dive in Chrome DevTools
48Know available tools - Deep dive in Chrome DevTools
Network
49Know available tools - Deep dive in Chrome DevToolsEvaluating network performance https://goo.gl/GKL5c8
Network
● Columns
50Know available tools - Deep dive in Chrome DevTools
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
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
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
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
Timeline
● Layers
55Know available tools - Deep dive in Chrome DevTools
Timeline
● Layers
56Know available tools - Deep dive in Chrome DevTools
Remote Debug Inspectors
57
Know available tools
Know available tools - Remote Debug Inspectors
Remote Debug Inspectors
● weinre - WEb INspector REmote
○ http://goo.gl/1TiBjO
● Adobe Edge Inspect
○ http://goo.gl/hmOkAb
58How to Troubleshoot
Connecting your device
59
Know available tools
Know available tools - Connecting your device
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
Connecting your device
61
1. Start adb
○ https://goo.gl/Bw8h1b
2. Open chrome://inspect/#devices
Know available tools - Connecting your device
Connecting your device
Remote Debug installation on Mac
● Just plug-in the cable!!
62Know available tools - Connecting your device
Recap
● Understanding Network requests
● Detect Reflow and Repaint
● Know how to debug remotely
63Know available tools - Deep dive in Chrome DevTools
Typical Issues in Mobile Apps
Agenda
● Know how it works
● Know available tools
● Typical issues in Mobile Apps
● Putting into in practice
Agenda 65
Typical issues in Mobile Apps
No Image Optimization
66Typical issues in Mobile Apps
Typical issues in Mobile Apps
No Image Optimization
● Original Image
○ PNG
○ 1,72 MB
67Typical issues in Mobile Apps
Typical issues in Mobile Apps
No Image Optimization
● optimizilla.com
○ JPG
○ 14,2 KB
68Typical issues in Mobile Apps
Typical issues in Mobile Apps
No Image Optimization
69Typical issues in Mobile Apps
Typical issues in Mobile Apps
No Image Optimization
● 1px with
○ JPG
○ 1,09 KB
○ repeat-x
70Typical issues in Mobile Apps
Typical issues in Mobile Apps
No Image Optimization
71Typical issues in Mobile Apps
Typical issues in Mobile Apps
No Image Optimization
● CSS background-color
○ instant render
72Typical issues in Mobile Apps
Typical issues in Mobile Apps
No Image Optimization
73Typical issues in Mobile Apps
Typical issues in Mobile Apps
Image Download
74
.PhoneTypical issues in Mobile Apps
Typical issues in Mobile Apps
Image Download
● display: none or visibility: hidden
○ Still download the image
75
.Phone
Typical issues in Mobile Apps
Typical issues in Mobile Apps
Image Download
● SilkUI Device Class
76
.Phone.Phone
Typical issues in Mobile Apps
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
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
Typical issues in Mobile Apps
Improve usage of Fonts
79Typical issues in Mobile Apps
Typical issues in Mobile Apps
Improve usage of Fonts
80
.Phone
.DesktopTypical issues in Mobile Apps
Typical issues in Mobile Apps
Uncompressed Resources
● Content-Encoding: gzip
81Typical issues in Mobile Apps
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
Typical issues in Mobile Apps
External Resources
● Domain Path
83Typical issues in Mobile Apps
Typical issues in Mobile Apps
Excessive Resources
84Typical issues in Mobile Apps
Typical issues in Mobile Apps
Uncached Resources
● Cache avoid unnecessary HTTP requests on subsequent page views
85Typical issues in Mobile Apps
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
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
Putting into practice
Agenda
● Know how it works
● Know available tools
● Typical issues in Mobile Apps
● Putting into in practice
Agenda 89
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
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
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
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
Final Recap
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
Final Recap
● Know how it works
● Know available tools
○ Understanding Network requests
○ Detect Reflow and Repaint
○ Know how to debug remotely
96Final Recap
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
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
Replace This image in master
Daniel ReisFront-End Expert @ OutSystems
Thank You!!
How Troubleshoot Mobile App Performance 99
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
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