Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Building high
performance web
applications
Maurice de Beijer
@mauricedb
NEXTBUILD 2017
Topics
 What is fast?
 Tooling
 Code splitting
 Server side rendering
 Only render above the fold
© ABL - The Problem...
 Maurice de Beijer
 The Problem Solver
 MicrosoftAzure MVP
 Freelance developer/instructor
 Twitter: @mauricedb, @NG_...
Why?
 40% of the web traffic is from mobile devices.
 Bol.com in July 2016
 Adding 100 ms of latency costs 1% of sales
...
What is fast?
© ABL - The Problem Solver 5
It depends 
© ABL - The Problem Solver 6
“Performance is the art of
avoiding work, and
making any work you do
as efficient as possible”
-- Paul Lewis --
© ABL - Th...
DOMContent
Loaded
© ABL - The Problem Solver 8
First
meaningful
paint
© ABL - The Problem Solver 9
Time to
interactive
© ABL - The Problem Solver 10
But there is
more
© ABL - The Problem Solver 11
Tooling
© ABL - The Problem Solver 12
Chrome
Timeline
© ABL - The Problem Solver 13
Chrome
Audits
© ABL - The Problem Solver 14
YSlow
© ABL - The Problem Solver 15
WebPageTest
© ABL - The Problem Solver 16
WebPageTest
select the
device
© ABL - The Problem Solver 17
WebPageTest
select the
bandwidth
© ABL - The Problem Solver 18
WebPageTest
iPhone 6
© ABL - The Problem Solver 19
Lighthouse
© ABL - The Problem Solver 20
ECMAScript
imports
import _ from 'lodash';
_.forEach(data, e => console.log(e));
© ABL - The Problem Solver 21
import { fo...
import rxjs from 'rxjs';
rxjs.Observable.from(data)
.map(e => 2 * e)
.subscribe(e => console.log(e));
ECMAScript
imports i...
Code splitting
© ABL - The Problem Solver 23
Use source-
map-explorer
© ABL - The Problem Solver 24
Right size
framework
© ABL - The Problem Solver 25
Server side
rendering
© ABL - The Problem Solver 26
Inline
critical
CSS
© ABL - The Problem Solver 27
Only render
above the fold
© ABL - The Problem Solver 28
HTTP
&
Latency
© ABL - The Problem Solver 29
Try it  http://bit.ly/fast-apps
© ABL - The Problem Solver 30
Conclusion
 Everyone loves faster web apps.
 And they are good for business
 Avoid or delay as much as possible.
 What...
Maurice de Beijer
@mauricedb
maurice.de.beijer
@gmail.com
© ABL - The Problem Solver 32
Upcoming SlideShare
Loading in …5
×

Building high performance web applications

231 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Building high performance web applications

  1. 1. Building high performance web applications Maurice de Beijer @mauricedb NEXTBUILD 2017
  2. 2. Topics  What is fast?  Tooling  Code splitting  Server side rendering  Only render above the fold © ABL - The Problem Solver 2
  3. 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. 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. 5. What is fast? © ABL - The Problem Solver 5
  6. 6. It depends  © ABL - The Problem Solver 6
  7. 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. 8. DOMContent Loaded © ABL - The Problem Solver 8
  9. 9. First meaningful paint © ABL - The Problem Solver 9
  10. 10. Time to interactive © ABL - The Problem Solver 10
  11. 11. But there is more © ABL - The Problem Solver 11
  12. 12. Tooling © ABL - The Problem Solver 12
  13. 13. Chrome Timeline © ABL - The Problem Solver 13
  14. 14. Chrome Audits © ABL - The Problem Solver 14
  15. 15. YSlow © ABL - The Problem Solver 15
  16. 16. WebPageTest © ABL - The Problem Solver 16
  17. 17. WebPageTest select the device © ABL - The Problem Solver 17
  18. 18. WebPageTest select the bandwidth © ABL - The Problem Solver 18
  19. 19. WebPageTest iPhone 6 © ABL - The Problem Solver 19
  20. 20. Lighthouse © ABL - The Problem Solver 20
  21. 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. 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. 23. Code splitting © ABL - The Problem Solver 23
  24. 24. Use source- map-explorer © ABL - The Problem Solver 24
  25. 25. Right size framework © ABL - The Problem Solver 25
  26. 26. Server side rendering © ABL - The Problem Solver 26
  27. 27. Inline critical CSS © ABL - The Problem Solver 27
  28. 28. Only render above the fold © ABL - The Problem Solver 28
  29. 29. HTTP & Latency © ABL - The Problem Solver 29
  30. 30. Try it  http://bit.ly/fast-apps © ABL - The Problem Solver 30
  31. 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. 32. Maurice de Beijer @mauricedb maurice.de.beijer @gmail.com © ABL - The Problem Solver 32

×