Building high performance web applications

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: maurice.de.beijer@gmail.com

© 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)

© ABL - The Problem Solver 25

Try it http://bit.ly/fast-apps

© ABL - The Problem Solver 26

Maurice de Beijer

@mauricedb

maurice.de.beijer@gmail.com