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

182 views

Published on

Slides from my "Building high performance web applications" session at http://boostjs.io/. Demo code https://github.com/mauricedb/ng-split-bundle and https://github.com/mauricedb/high-performance-web-applications

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 @react_tutorial
  2. 2. Topics  What is fast?  Tooling  Code splitting  Server side rendering  Only render above the fold  Service worker © ABL - The Problem Solver 2
  3. 3.  Maurice de Beijer  The Problem Solver  MicrosoftAzure MVP  Freelance developer/instructor  Twitter: @mauricedb and @React_Tutorial  Web: http://www.TheProblemSolver.nl  E-mail: maurice.de.beijer@gmail.com 3
  4. 4. What is fast? © ABL - The Problem Solver 4
  5. 5. It depends  © ABL - The Problem Solver 5
  6. 6. DOMContent Loaded © ABL - The Problem Solver 6
  7. 7. First meaningful paint © ABL - The Problem Solver 7
  8. 8. Time to interactive © ABL - The Problem Solver 8
  9. 9. But there is more © ABL - The Problem Solver 9
  10. 10. Tooling © ABL - The Problem Solver 10
  11. 11. Chrome Timeline © ABL - The Problem Solver 11
  12. 12. Chrome Audits © ABL - The Problem Solver 12
  13. 13. YSlow © ABL - The Problem Solver 13
  14. 14. WebPageTest © ABL - The Problem Solver 14
  15. 15. WebPageTest select the device © ABL - The Problem Solver 15
  16. 16. WebPageTest select the bandwidth © ABL - The Problem Solver 16
  17. 17. WebPageTest iPhone 6 © ABL - The Problem Solver 17
  18. 18. Lighthouse © ABL - The Problem Solver 18
  19. 19. Code splitting © ABL - The Problem Solver 19
  20. 20. Right size framework © ABL - The Problem Solver 20
  21. 21. Server side rendering © ABL - The Problem Solver 21
  22. 22. Inline critical CSS © ABL - The Problem Solver 22
  23. 23. Only render above the fold © ABL - The Problem Solver 23
  24. 24. ServiceWorker (App-Cache) © ABL - The Problem Solver 24
  25. 25. Try it  http://bit.ly/fast-apps © ABL - The Problem Solver 25
  26. 26. Maurice de Beijer @mauricedb maurice.de.beijer @gmail.com © ABL - The Problem Solver 26

×