Embed Size (px)
Citation preview
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, @NG_Tutorial and
@React_Tutorial Web: http://www.TheProblemSolver.nl E-mail: [email protected]
© ABL - The Problem Solver 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 5
What is fast?
© ABL - The Problem Solver 6
It depends
© ABL - The Problem Solver 7
“Performance is the art of avoiding work, and
making any work you do as efficient as possible”
-- Paul Lewis --
© ABL - The Problem Solver 8
DOM Content Loaded
© ABL - The Problem Solver 9
First meaningful
paint
© ABL - The Problem Solver 10
Time to interactive
© ABL - The Problem Solver 11
But there is more
© ABL - The Problem Solver 12
Tooling
© ABL - The Problem Solver 13
ChromeTimeline
© ABL - The Problem Solver 14
ChromeAudits
© ABL - The Problem Solver 15
YSlow
© ABL - The Problem Solver 20
Lighthouse
© ABL - The Problem Solver 21
Use source-map-
explorer
© ABL - The Problem Solver 22
ECMAScript imports
import _ from 'lodash';_.forEach(data, e => console.log(e));
import { forEach } from 'lodash/forEach';forEach(data, e => console.log(e));
© ABL - The Problem Solver 23
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 24
15 minute pauze
© ABL - The Problem Solver 25
Code splitting
© ABL - The Problem Solver 26
Right size framework
© ABL - The Problem Solver 27
Server side rendering
© ABL - The Problem Solver 28
Inlinecritical
CSS
© ABL - The Problem Solver 29
Only render above the
fold
© ABL - The Problem Solver 31
Service Worker
(App-Cache)
© ABL - The Problem Solver 33
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.
