Артем Денисов "Improve your web application using Progressive Web Metrics"

Artem Denysov
Progressive Web Metrics

twitter/@denar90_ github/@denar90
@brunch @marionettejs
2

3

Improve Performance
WHY?
HOW?
WHAT TO USE?
4

Progressive Web Applications
5

- Reliable
6

- Reliable
7

- Reliable
- Fast
8

- Reliable
- Fast
9

- Reliable
- Fast
- Engaging
10

- Reliable
- Fast
- Engaging
11

PWA - 2016
12

2017 - ?
13

Let’s look at Google developers
What are they working on?
14

Addy Osmani
Performance improvements for webpack
webpack/issues/3216
15

Paul Irish
Performance metrics and libs for their measurements
16

Performance - 2017
17

Why?
18

19

goo.gl/AFQZat
20

~ $30
21

22
Network latency
goo.gl/JYgVdB

23
JavaScript Parse&Compile
Time spent in Parse/Compile can often be 2–5x longer on phones than on
desktops.
youtu.be/RWLzUnESylc

25

26

27

28
goo.gl/08Dibh

29

30
@npm/mobile-friendlysearch.google.com/search-console/mobile-friendly

31
whatdoesmysitecost.com

How to improve it?
32

Measure!
33

Perf audit by @paulirish
goo.gl/druO7c
34

Perf audit by @samccone
goo.gl/6Ox9xG
35

36

37

How to measure user's happiness painfulness?
38

Metrics are used today
39

- onLoad (to late)
40

- onLoad (to late)
- DOMContentLoaded (to early because of heavy js)
41

42

Definition of user perception page loading
43

“is it happening”?
Has my navigation started successfully (the server has responded, etc.)?
44

“is it useful”?
Has the page painted enough critical content that I could engage with?
45

“is it useful”?
“is it usable”?
Can I actually engage with the page or is it still busy?
46

“is it useful”?
“is it usable”?
Can I actually engage with the page or is it still busy?
“is it delightful”?
Was I pleasantly surprised by the lack of scrolling jank, animation jank, FOUC, slow webfonts,etc?
47

Perceptual load timings:
goo.gl/AMwHCg
48

First
paint
49

First
paint
First
Contentful
Paint
50

First
paint
First
Contentful
Paint
Definition: The timestamp of a shipped frame that contains
ANY of these:
● First paint of text
● First paint of SVG
● First paint of an image
● First paint of a background-image
● First paint of a canvas
51

First
paint
First
Contentful
Paint
Is it happening?
52

First
paint
First
Contentful
Paint
First
Meaningful
Paint
53

First
paint
First
Contentful
Paint
First
Meaningful
Paint
Definition: Primary content is shown on a page:
● Header and text for blogs
● Search text for search engines
● Images if they are critical for e-commerce products
54

First
paint
First
Contentful
Paint
First
Meaningful
Paint
Doesn’t count:
● Spinners or smth similar
● FOUC
● Just navigation bar or page header
55

First
paint
First
Contentful
Paint
First
Meaningful
Paint
Is it useful?
56

First
paint
First
Contentful
Paint
First
Meaningful
Paint
Visually
Ready
57

First
paint
First
Contentful
Paint
First
Meaningful
Paint
Visually
Ready
Time to
Interactive
58

First
paint
First
Contentful
Paint
First
Meaningful
Paint
Visually
Ready
Time to
Interactive
Definition:
● FMP
● 85% visually complete
● DOMContentLoaded has been fired
59

First
paint
First
Contentful
Paint
First
Meaningful
Paint
Visually
Ready
Time to
interactive
Is it usable?
60

Key metrics:
- First Contentful Paint
(when any contentful thing (text, img, svg etc) appeared first time, nav actually started)
- First Meaningful Paint
(when primary content is visible)
- Time to Interactive
(when FMP happened, DOMContentLoaded fired, Visually Ready, user feels like
he/she can engage with page)
61

Key metrics:
- Estimated Input Latency
(estimates page responding to user input (< 50 ms) )
62

Key metrics:
- Perceptual Speed Index / Visually complete
(measures how quickly the page contents are visually populated)
63

Key metrics:
- Perceptual Speed Index / Visually complete
(measures how quickly the page contents are visually populated)
- Frame Throughput
(60 fps stuff)
64

What’s the purpose?
65

Define your bottlenecks and then fix them!
66

Let’s ask someone to do it!
67

68

69

Let’s Google it!
70

71

Key stuff
- minimize your bundle
72

Key stuff
- add `defer` attribute to your scripts
73

Key stuff
- add defer attribute to your scripts
<script src="my_script.js" defer></script>
74

75
<script>
<script async>
<script defer>
goo.gl/Ey3IWo

Key stuff
- move noncritical styles to body
76

77

@addyosmani/critical
78

79
Earlier

80
Earlier
Now

81
goo.gl/1rxh8V

Key stuff
- prefetch/preload
82

83
<link rel=”preload”>
Good for fetching later discovered resources

84
<link rel=”preload”>
Good for fetching later discovered resources
<link rel=”prefetch”>
Good for future navigation

85
goo.gl/PfkprA

Key stuff
- prefetch/preload
- PRPL pattern
86

87
PRPL pattern

88
PRPL pattern youtu.be/RWLzUnESylc

89
PRPL pattern
- <link rel=”preload”>
- HTTP/2 Push + Service Worker

90
Let’s apply some of these techniques to
real application

91
babeljs.io/

92
Timeline trace

93
Timeline trace

94
Let’s add `defer` !

95
Timeline trace

96
Timeline trace

97

98
Let’s not show ‘editor’ for mobile !

99
Timeline trace

100
2x speedup!

101
@babel.github.io/pull/1234

102
@brunch.github.io/pull/199

103
@code-nasa-gov/issues/49

Are there more stuff than DevTools?
104

WebPagetest - webpagetest.org
goo.gl/Z4NTol
105

WebPagetest - webpagetest.org
goo.gl/Z4NTol
106
Metrics
- Visuality complete
- Time to interactive (beta)
- to be continued ...

Lighthouse - @GoogleChrome/lighthouse/
~8 K stars
107

Runtime Environment
● Device Emulation (Nexus 5X): Enabled
● Network Throttling (150ms RTT, 1.6Mbps down,
0.7Mbps up): Enabled
● CPU Throttling (5x slowdown): Enabled
108

109

110

111

112

pwmetrics - @paulirish/pwmetrics
113

Runtime Environment
● Device Emulation (Nexus 5X): Enabled
● Network Throttling (150ms RTT, 1.6Mbps down,
0.7Mbps up): Enabled
● CPU Throttling (5x slowdown): Enabled
114

115

116

117

118

119

120
What was learned?
- build mobile first apps
- use real device for testing/measuring
- use different metrics to define performance bottlenecks
- apply latest techniques for improving your application
performance

121
As a result

122
Get better as a developer

123
Get better as a developer
Make more money for your project

Thanks!
124

Артем Денисов "Improve your web application using Progressive Web Metrics"

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Артем Денисов "Improve your web application using Progressive Web Metrics"

Ähnlich wie Артем Денисов "Improve your web application using Progressive Web Metrics" (20)

Mehr von Fwdays

Mehr von Fwdays (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Артем Денисов "Improve your web application using Progressive Web Metrics"