Slides from building high performance web applications at NextBuild 2017 in Eindhoven

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

2. Topics
 What is fast?
 Tooling
 Code splitting
 Server side rendering
 Only render above the fold
© 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. ECMAScript
imports
import _ from 'lodash';
_.forEach(data, e => console.log(e));
© ABL - The Problem Solver 21
import { forEach } from 'lodash/forEach';
forEach(data, e => console.log(e));

22. 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 22

23. Code splitting
© ABL - The Problem Solver 23

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

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

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

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

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

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

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

31. 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 31

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