Transcript
Page 1: Building high performance web applications

Building high performance web applicationsMaurice de Beijer@mauricedb@react_tutorial

Page 2: Building high performance web applications

© ABL - The Problem Solver 2

Topics

What is fast? Tooling Code splitting Server side rendering Only render above the fold Service worker

Page 3: Building high performance web applications

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]

Page 4: Building high performance web applications

© ABL - The Problem Solver 4

What is fast?

Page 5: Building high performance web applications

© ABL - The Problem Solver 5

It depends

Page 6: Building high performance web applications

© ABL - The Problem Solver 6

DOM Content Loaded

Page 7: Building high performance web applications

© ABL - The Problem Solver 7

First meaningful

paint

Page 8: Building high performance web applications

© ABL - The Problem Solver 8

Time to interactive

Page 9: Building high performance web applications

© ABL - The Problem Solver 9

But there is more

Page 10: Building high performance web applications

© ABL - The Problem Solver 10

Tooling

Page 11: Building high performance web applications

© ABL - The Problem Solver 11

ChromeTimeline

Page 12: Building high performance web applications

© ABL - The Problem Solver 12

ChromeAudits

Page 13: Building high performance web applications

© ABL - The Problem Solver 13

YSlow

Page 14: Building high performance web applications

© ABL - The Problem Solver 14

WebPageTest

Page 15: Building high performance web applications

© ABL - The Problem Solver 15

WebPageTest

select the device

Page 16: Building high performance web applications

© ABL - The Problem Solver 16

WebPageTest

select the bandwidth

Page 17: Building high performance web applications

© ABL - The Problem Solver 17

WebPageTest

iPhone 6

Page 18: Building high performance web applications

© ABL - The Problem Solver 18

Lighthouse

Page 19: Building high performance web applications

© ABL - The Problem Solver 19

Code splitting

Page 20: Building high performance web applications

© ABL - The Problem Solver 20

Right size framework

Page 21: Building high performance web applications

© ABL - The Problem Solver 21

Server side rendering

Page 22: Building high performance web applications

© ABL - The Problem Solver 22

Inlinecritical

CSS

Page 23: Building high performance web applications

© ABL - The Problem Solver 23

Only render above the

fold

Page 24: Building high performance web applications

© ABL - The Problem Solver 24

Service Worker

(App-Cache)

Page 25: Building high performance web applications

© ABL - The Problem Solver 25

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

Page 26: Building high performance web applications

© ABL - The Problem Solver 26

Maurice de Beijer

@mauricedb

[email protected]


Recommended