Building high performance web applicationsMaurice de Beijer@mauricedb@react_tutorial
© ABL - The Problem Solver 2
Topics
What is fast? Tooling Code splitting Server side rendering Only render above the fold Service worker
3
Maurice de Beijer The Problem Solver Microsoft Azure MVP Freelance developer/instructor Twitter: @mauricedb and @React_Tutorial Web: http://www.TheProblemSolver.nl E-mail: [email protected]
© ABL - The Problem Solver 4
What is fast?
© ABL - The Problem Solver 5
It depends
© ABL - The Problem Solver 6
DOM Content Loaded
© ABL - The Problem Solver 7
First meaningful
paint
© ABL - The Problem Solver 8
Time to interactive
© ABL - The Problem Solver 9
But there is more
© ABL - The Problem Solver 10
Tooling
© ABL - The Problem Solver 11
ChromeTimeline
© ABL - The Problem Solver 12
ChromeAudits
© ABL - The Problem Solver 13
YSlow
© ABL - The Problem Solver 14
WebPageTest
© ABL - The Problem Solver 15
WebPageTest
select the device
© ABL - The Problem Solver 16
WebPageTest
select the bandwidth
© ABL - The Problem Solver 17
WebPageTest
iPhone 6
© ABL - The Problem Solver 18
Lighthouse
© ABL - The Problem Solver 19
Code splitting
© ABL - The Problem Solver 20
Right size framework
© ABL - The Problem Solver 21
Server side rendering
© ABL - The Problem Solver 22
Inlinecritical
CSS
© ABL - The Problem Solver 23
Only render above the
fold
© ABL - The Problem Solver 24
Service Worker
(App-Cache)