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

200 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

×