Building high performance web applications
Download as PPTX, PDF0 likes269 views
![Maurice De Beijer [MVP], profile picture](https://cdn.slidesharecdn.com/profile-photo-mauricedb-48x48.jpg?cb=1750747544)
This document discusses building high performance web applications. It covers topics like what defines a fast application, useful tooling for measuring performance like the Chrome DevTools and WebPageTest, code splitting techniques, server side rendering, only rendering content above the fold, and minimizing HTTP requests and latency. The presenter emphasizes avoiding unnecessary work, doing as little as possible to display initial content to the user, and leveraging the browser and server capabilities to build fast and high performing web applications.
Building high performance web applications
- 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
Editor's Notes
- #6: https://pixabay.com/nl/supersonische-vechter-vliegtuigen-63211/
- #7: https://pixabay.com/nl/boord-blackboard-lettertype-1805318/
- #9: https://www.pexels.com/photo/train-on-railroad-tracks-against-sky-258367/
- #10: https://unsplash.com/photos/EXcDH29WLbg
- #11: https://pixabay.com/nl/dolfijn-kind-kinderen-spelen-1548448/
- #12: https://pixabay.com/nl/batterij-aa-energie-huidige-1109088/
- #13: https://www.pexels.com/photo/grey-metal-hammer-34520/
- #24: https://unsplash.com/search/splitting?photo=Xxd33FUBQeA
- #26: https://pixabay.com/nl/marokko-truck-vrachtwagen-hooi-842660/
- #27: https://pixabay.com/en/technology-servers-server-1587673/
- #28: https://jonassebastianohlsson.com/criticalpathcssgenerator/
- #29: https://pixabay.com/nl/sprinkhaan-viridissima-groene-193721