Everyone loves fast web sites. And it makes good business sense as well. But there are lots of techniques that can be used. And some might work in one case but not in another.

1. Building high
performance web
applications
Maurice de Beijer
@mauricedb
@react_tutorial

2. Topics
 What is fast?
 Tooling
 Code splitting
 Server side rendering
 Only render above the fold
 Service worker
© ABL - The Problem Solver 2

3.  Maurice de Beijer
 The Problem Solver
 MicrosoftAzure MVP
 Freelance developer/instructor
 Twitter: @mauricedb, @NG_Tutorial and @React_Tutorial
 Web: http://www.TheProblemSolver.nl
 E-mail: maurice.de.beijer@gmail.com
3

4. Why?
 40% of the web traffic is from mobile devices.
 Bol.com in July 2016
 Adding 100 ms of latency costs 1% of sales
 Amazon.com
© ABL - The Problem Solver 4

5. What is fast?
© ABL - The Problem Solver 5

6. It depends 
© ABL - The Problem Solver 6

7. “Performance is the art of
avoiding work, and
making any work you do
as efficient as possible”
-- Paul Lewis --
© ABL - The Problem Solver 7

8. DOMContent
Loaded
© ABL - The Problem Solver 8

9. First
meaningful
paint
© ABL - The Problem Solver 9

10. Time to
interactive
© ABL - The Problem Solver 10

11. But there is
more
© ABL - The Problem Solver 11

12. Tooling
© ABL - The Problem Solver 12

13. Chrome
Timeline
© ABL - The Problem Solver 13

14. Chrome
Audits
© ABL - The Problem Solver 14

15. YSlow
© ABL - The Problem Solver 15

16. WebPageTest
© ABL - The Problem Solver 16

17. WebPageTest
select the
device
© ABL - The Problem Solver 17

18. WebPageTest
select the
bandwidth
© ABL - The Problem Solver 18

19. WebPageTest
iPhone 6
© ABL - The Problem Solver 19

20. Lighthouse
© ABL - The Problem Solver 20

21. Use source-
map-explorer
© ABL - The Problem Solver 21

22. ECMAScript
imports
import _ from 'lodash';
_.forEach(data, e => console.log(e));
© ABL - The Problem Solver 22
import { forEach } from 'lodash/forEach';
forEach(data, e => console.log(e));

23. import rxjs from 'rxjs';
rxjs.Observable.from(data)
.map(e => 2 * e)
.subscribe(e => console.log(e));
ECMAScript
imports import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/from';
import 'rxjs/add/operator/map';
Observable.from(data)
.map(e => 2 * e)
.subscribe(e => console.log(e));
© ABL - The Problem Solver 23

24. 15 minute
pauze
© ABL - The Problem Solver 24

25. Code splitting
© ABL - The Problem Solver 25

26. Right size
framework
© ABL - The Problem Solver 26

27. Server side
rendering
© ABL - The Problem Solver 27

28. Inline
critical
CSS
© ABL - The Problem Solver 28

29. Only render
above the fold
© ABL - The Problem Solver 29

30. HTTP
&
Latency
© ABL - The Problem Solver 30

31. ServiceWorker
(App-Cache)
© ABL - The Problem Solver 31

32. Try it  http://bit.ly/fast-apps
© ABL - The Problem Solver 32

33. Conclusion
 Everyone loves faster web apps.
 And they are good for business
 Avoid or delay as much as possible.
 What you don’t do can’t slow you down
 Do as few request as possible to display the first page.
 The fastest HTTP request is one not made
 Use the browsers capabilities as much as possible.
© ABL - The Problem Solver 33

34. Maurice de Beijer
@mauricedb
maurice.de.beijer
@gmail.com
© ABL - The Problem Solver 34