OutSystems Webinar - Troubleshooting Mobile Apps Performance

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

https://goo.gl/RtT7qU

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

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

Know how it works

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


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


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

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

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

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

http://goo.gl/tO9TDk

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

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

http://www.youtube.com/watch?v=-62uPWUxgcg

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

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


http://www.youtube.com/watch?v=k-UiuPp2CK0

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



○ 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

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


Timeline

● Layers


Remote Debug Inspectors

57


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

http://goo.gl/1TiBjO

http://goo.gl/1TiBjO

http://goo.gl/hmOkAb

http://goo.gl/hmOkAb

Connecting your device

59


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

http://goo.gl/QYjKEX

https://goo.gl/g6AO63

https://goo.gl/g6AO63

http://goo.gl/vnk108

http://goo.gl/vnk108

http://goo.gl/II9nyw

http://goo.gl/II9nyw

http://goo.gl/AcnPhT

http://goo.gl/AcnPhT

https://goo.gl/Bw8h1b



61

1. Start adb

○ https://goo.gl/Bw8h1b

2. Open chrome://inspect/#devices

Know available tools - 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


Typical Issues in Mobile Apps

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

.PhoneTypical issues in Mobile Apps


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

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 Format78

● Web Font Formats

○ woff / woff2

○ ttf (below Android 4.4)

○ eot (below IE9)

○ svg (it's being deprecated)







80

.Phone

.DesktopTypical issues in Mobile Apps


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


Putting into practice

Agenda





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

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

http://goo.gl/qAPxQJ

http://goo.gl/qAPxQJ

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

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 JavaScript97Final Recap

Final Recap





○ 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

https://goo.gl/COcxFh

https://goo.gl/COcxFh



https://goo.gl/H4fzJf

https://goo.gl/H4fzJf

http://goo.gl/6q21D

http://goo.gl/6q21D

https://goo.gl/E7cXTA

https://goo.gl/E7cXTA

https://goo.gl/M2eyb2

https://goo.gl/M2eyb2



https://goo.gl/UBVd9Y

https://goo.gl/UBVd9Y

OutSystems Webinar - Troubleshooting Mobile Apps Performance

Engineering