Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Building high performance web applications

278 vues

Publié le

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

Publié dans : Technologie
  • Login to see the comments

  • Soyez le premier à aimer ceci

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

×