Artem Denysov "Easy ways to speed up your web application"

twitter/@denar90_ github/@denar90
Artem Denysov
Easy ways to speed up your web application
1

2

3

4

@brunch @marionettejs
5

6
@paulirish @samccone

7
pwmetrics DevTools Timeline Viewer

8
Agenda
1. Why mobile/offline apps?
2. Techniques.
3. Real example.
4. Tools.
5. Profit.

Progressive Web Applications
9

10

11

12

13

14
Network latency
goo.gl/JYgVdB

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

16
goo.gl/08Dibh

goo.gl/3lfWDH
17

18

19

20

21

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

How to improve it?
23

Measure!
24

Perf audit by @paulirish
goo.gl/druO7c
25

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

27

28

29

What’s the purpose?
30

Define bottlenecks and then fix them!
31

Let’s ask someone to do it!
32

33

34

Let’s Google it!
35

36

Key stuff
- minimize your bundle
37

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

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

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

Key stuff
- move noncritical styles to body
41

42

@addyosmani/critical
43

44
Earlier

45
Earlier
Now

46
goo.gl/1rxh8V

Key stuff
- move noncritical styles to body
- prefetch/preload
47

48
<link rel=”preload”>
Good for fetching later discovered resources
(key scripts, Web Fonts, hero images)

49
<link rel=”preload”>
Good for fetching later discovered resources
<link rel=”prefetch”>
Good for future navigation
(key scripts, Web Fonts, hero images)

50
goo.gl/PfkprA

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

52
babeljs.io/

53
Timeline trace

54
Timeline trace

55
Let’s add `defer` !

56
Timeline trace

57
Timeline trace

58

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

60
Timeline trace

61
2x speedup!

62
@babel.github.io/pull/1234

63
@brunch.github.io/pull/199

64
@code-nasa-gov/issues/49

Are there more stuff than DevTools?
65

@GoogleChrome/lighthouse/
~9 K stars
66

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

68
Chrome Launcher
npm install chrome-launcher
@GoogleChrome/lighthouse/tree/master/chrome-launcher

69

70

71
youtu.be/NoRYn6gOtVo

72

pwmetrics - @paulirish/pwmetrics
73
~600 stars

74

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

76

77

78

79

80
goo.gl/Z9rKrb

81
@ChromeDevTools/timeline-viewer

82

83
Shareable timeline traces

84

85
Offline work

86

87
Split View

88

89
Google Drive Uploading

90

91
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

92
As a result

93
Get better as a developer

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

Thanks!
95
@github/denar90
@twitter/denar90_

Artem Denysov "Easy ways to speed up your web application"

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Artem Denysov "Easy ways to speed up your web application"

Similar to Artem Denysov "Easy ways to speed up your web application" (20)

More from OdessaJS Conf

More from OdessaJS Conf (20)

Recently uploaded

Recently uploaded (20)

Artem Denysov "Easy ways to speed up your web application"

Editor's Notes