Training Webinar: Troubleshooting Mobile Apps Performance

Troubleshooting Mobile Apps
Performance

Replace This image
in master
Presentation
Daniel Reis
Front-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
● 51% of Population has a phone
6We Are Social Digital Report 2016 http://goo.gl/9Fl9Gc

7Introduction
Introduction
● 83% of the Facebook’s users
accessed by smartphone
We Are Social Digital Report 2016 http://goo.gl/9Fl9Gc

8Introduction
Introduction
● 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

Agenda
○ How the web works?
○ How the browser works?
○ How mobile apps works?
● 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
○ 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

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

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

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

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

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

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

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

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

29Know how it works - How the browser works?

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

31
HTML CSS
DOM CSSOM
Render Tree
Layout
Paint
● Paint
○ Displayed page in the browser window

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

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

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

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

Promote element to a Layer
36
● Use of GPU (Graphics Processing Unit)
● Avoid non-trivial Paint
● Faster and Smoother Render
● Trigger a Compositing Layer

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

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

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

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

Agenda
○ Deep dive in Chrome DevTools
○ Remote Debug Inspectors
○ Connecting your device
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

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

Timeline
● Paint
○ Similar to Canvas
○ List of Draws grouped together
as a data structure
● Rasterize Paint
○ Render the Draws into pixels

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

Timeline
● Reflow
○ Sometimes the script force a reflow,
flushing the queue
○ This happens when you request style
information, such as
■ offsetWidth
■ offsetHeight
■ scrollTop

Timeline
● Layers

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/Bw8h1b

61
1. Start adb
○ https://goo.gl/Bw8h1b
2. Open chrome://inspect/#devices

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

Agenda
Agenda 65

Typical issues in Mobile Apps
No Image Optimization
66Typical issues in Mobile Apps

● Original Image
○ PNG
○ 1,72 MB

● optimizilla.com
○ JPG
○ 14,2 KB

● 1px with
○ JPG
○ 1,09 KB
○ repeat-x

● CSS background-color
○ instant render

Image Download
74
.Phone

Image Download
● display: none or visibility: hidden
○ Still download the image
75
.Phone

Image Download
● SilkUI Device Class
76
.Phone.Phone

Image Download
● SilkUI DisplayOnDevice
77
.Phone
Typical issues in Mobile AppsWebinar SILKUI from basics to advanced https://goo.gl/1bgXQC

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 Format
78
● Web Font Formats
○ woff / woff2
○ ttf (below Android 4.4)
○ eot (below IE9)
○ svg (it's being deprecated)

80
.Phone
.Desktop

Uncompressed Resources
● Content-Encoding: gzip

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

External Resources
● Domain Path

Excessive Resources

Uncached Resources
● Cache avoid unnecessary HTTP requests on subsequent page views

Parser-Blocking JavaScript
● Usage of external widgets
● Large Javascript files
● Synchronous JavaScript resources
● Long running JavaScript
● Repaint and Reflow the DOM

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

Agenda
Agenda 89

My app is slow… where to start?
1. By default, troubleshoot first in the
desktop browser console
2. 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
93Putting into practice
○ Look for the signals
○ Know where/how to change
○ How to debug remotely

Final 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
Final Recap 95

Final Recap
○ Understanding Network requests
○ Detect Reflow and Repaint
○ Know how to debug remotely
96Final Recap

Final Recap
○ No Image Optimization
○ Improve usage of Fonts
○ Uncompressed Resources
○ External Resources
○ Excessive Resources
○ Uncached Resources
○ Parser-Blocking JavaScript
97Final Recap

Final Recap
○ Look for the signals
○ Know where/how to change
○ How to debug remotely
98Final Recap

Replace This image
in master
Daniel Reis
Front-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/UBVd9Y
100How 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 21th
101Final Recap

Training Webinar: Troubleshooting Mobile Apps Performance

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (10)

Similar to Training Webinar: Troubleshooting Mobile Apps Performance

Similar to Training Webinar: Troubleshooting Mobile Apps Performance (20)

More from OutSystems

More from OutSystems (20)

Recently uploaded

Recently uploaded (20)

Training Webinar: Troubleshooting Mobile Apps Performance