Polymer Performance Patterns

+Eric Bidelman @ebidel Polymer Performance Patterns Amsterdam

@ebidel github.com/ebidel/polymer-experiments

@ebidel @polymer #polymersummit optimizing load & first paint LOAD optimization
tips for minimizing in-app jank RENDER future APIs for performance FUTURE

the extent to which an investment is profitable, especially in
relation to other investments. PERFORMANCE noun -

the extent to which an investment is profitable, especially in
relation to other investments. PERFORMANCE noun - app apps usable

DELAY USER REACTION 0 - 100 ms Instant 100 -
300 ms Slight perceptable delay 300 - 1000 ms Task focus, perceptable delay 1000+ ms Mental context swtich 10,000+ ms I’ll come back later! User perception-reaction times http://goo.gl/7noSwL

0 150 300 450 600 Time 3x faster CHROME 0
750 1500 2250 3000 Time 4x faster iOS SAFARI

LOAD optimizations

thistock.im WE CAN DO BETTER.

<html> <head> </head> <body ... </body> </html> <link rel="import" href="elements.html">
HTML Imports do not block parsing but they do block page rendering.

<html> <head> </head> <body ... </body> </html> <link rel="import" href="elements.html"
async> Make it async if you don’t want to block rendering.

HTML IMPORTS <link rel=“import” ASIDE

Dynamically load an HTML Import function importPage(url) { return new
Promise(function(resolve, reject) { resolve(e.target.import); }, reject); }); }; Polymer.Base.importHref(url, function(e) { importPage(‘/path/to/import.html’).then(doStuff);

Dynamically load an HTML Import function resolve }; Dynamically creates
and loads <link rel=“import” href=“/path/to/ import.html”> Polymer.Base.importHref(url, function(e) { importPage

Dynamically load an HTML Import function importPage(url) { return new
Promise(function(resolve, reject) { resolve(e.target.import); }, reject); }); }; Dynamically creates and loads <link rel=“import” href=“/path/to/ import.html”> Polymer.Base.importHref(url, function(e) { importPage(‘/path/to/import.html’).then(doStuff);

<html> <head> <script src="webcomponents-lite.min.js" async></script> </head> <body unresolved> <paper-drawer-panel> ...
</paper-drawer-panel> </body> </html> Declarative imports load faster <link rel="import" href="elements.html" async>

<html> <head> </head> <body ... </body> </html> Declarative imports load
faster <link rel="import" href="elements.html" async>

<html> <head> <link </head> <body ... </body> </html> unresolved

<html> <head> <script src="webcomponents-lite.min.js" async></script> <link rel="import" href="elements.html" async> </head>
<body> <paper-drawer-panel> ... </paper-drawer-panel> </body> </html> “Fast load skeleton” Async all the things. Control FOUC ourselves!

</paper-drawer-panel> </body> </html>

</paper-drawer-panel> </body> </html> <script src=“app.js" async></script>

var webComponentsSupported = ( 'registerElement' in document && 'import' in
document.createElement('link') && 'content' in document.createElement('template')); Lazy load the web component polyfills

var webComponentsSupported = ( 'registerElement' in document && 'import' in
document.createElement('link') && 'content' in document.createElement('template')); if (!webComponentsSupported) { var script = document.createElement('script'); script.async = true; script.src = 'webcomponents-lite.min.js'; script.onload = finishLazyLoading; document.head.appendChild(script); } else { finishLazyLoading(); } Lazy load the web component polyfills

( DevTools emulation - Good 3G ) 1430ms first paint
230ms first paint 6.2x faster OLD NEW Stock Ticker App

FOUC thistock.im f

CUSTOM ELEMENTS PROGRESSIVELY ENHANCED MARKUP ARE ASIDE

<x-foo></x-foo> document.registerElement( ‘x-foo’, {prototype: … ASIDE

App shell = progressively enhanced HTML

<html> <head> <link rel="import" href="elements.html" async> <style> paper-header-panel[drawer]:unresolved { display:
none; } paper-toolbar.tall:unresolved { height: 192px; background: #42A5F5; } </style> </head> <body> <paper-drawer-panel> <paper-header-panel drawer>...</paper-header-panel> <paper-header-panel mode="cover" main> <paper-toolbar class="tall"> ... </paper-toolbar> </paper-header-panel> </paper-drawer-panel> </body> </html>

App shell reduced first paint.

-100ms App shell reduced first paint.

@ebidel @polymer #polymersummit PolyMail 1.0 ‣ ES6 classes ‣ Async
Imports, lazy loaded polyfills ‣ Add to Homescreen ‣ <meta name="theme-color"> ‣ Offline Source: github.com/ebidel/polymer-gmail poly-mail.appspot.com

Cable connection ( DESKTOP ) webpagetest.org results: https://goo.gl/LY0sxj

Cable connection ( DESKTOP ) webpagetest.org results: https://goo.gl/LY0sxj 589ms first
paint

Cable connection ( DESKTOP ) webpagetest.org results: https://goo.gl/LY0sxj 589ms first
paint 1s total load

1144 speed index Cable connection ( DESKTOP ) webpagetest.org results:
https://goo.gl/LY0sxj 589ms first paint 1s total load

3G Fast connection ( MOTO G ) webpagetest.org results: https://goo.gl/LY0sxj

3G Fast connection ( MOTO G ) 1.66s first paint
webpagetest.org results: https://goo.gl/LY0sxj

3G Fast connection ( MOTO G ) 1.66s first paint
~ 7s total load webpagetest.org results: https://goo.gl/LY0sxj

3G Fast connection ( MOTO G ) 5614 speed index
1.66s first paint ~ 7s total load webpagetest.org results: https://goo.gl/LY0sxj

PolyMail poly-mail.appspot.com

@ebidel @polymer #polymersummit Changes for fast load 1.Make HTML Imports
2.Conditionally load the polyfills (or make 3.Manually control FOUC instead of using 4.Load critical “app shell”

RENDER optimizations

QUICK TIPS for

Use touch events instead of click events <x-panel on-tap="_openPanel" on-down=“…”
on-up=“…” on-track=“…”>

Yo, don’t jank those ripples <paper-button raised on-transitionend="_doNav"> <a href="/new"
on-tap="_navAfterRipple">Add a new feature</a> </paper-button> <script> Polymer({ _navAfterRipple: function(e) { e.preventDefault(); this._href = Polymer.dom(e).localTarget.href; // save reference } _doNav: function(e) { var href = this._href; if (href) { this._href = null; // clear location.href = href; } } }); </script> Ripple jank on page navigations

properties: { selected: { type: Boolean, reflectToAttribute: true } }
Minimize property reflection

DON’T create 1000s of element instances

DON’T create 1000s of element instances DO lazy render elements

@ebidel @polymer #polymersummit How DOM nodes do modern apps create?
APP # NODES AT PAGE LOAD Maps 624 Contacts 713 Inbox 988 Calendar 968 Photos 1,106 Github 1,276 G+ 2,838 GMail 2,890

chromestatus.com case study

Clicking feature panel reveals more

1817 icons!! Clicking feature panel reveals more

<iron-list> <template is="dom-if" if="{{open}}"> Generate fewer elements

<template is=“dom-if"> <hr> </template> FAIL

Reducing elements on chromestatus.com

1227ms 383ms 4,400 elements Reducing elements on chromestatus.com 53 elements
load load

FUTURE optimizations

Preload an Import preload what you’ll use

Preload an Import <link rel="preload" href=“/path/to/import.html" as=“html”> Declarative preload what
you’ll use

Preload an Import <link rel="preload" href=“/path/to/import.html" as=“html”> Declarative preload what
you’ll use HTTP header Link: </path/to/>; rel=preload; as=html

Preload an Import <link rel="preload" href=“/path/to/import.html" as=“html”> Declarative var l
= document.createElement('link'); l.rel = 'preload'; l.as = 'html'; l.href = '/path/to/import.html'; document.head.appendChild(l); Script preload what you’ll use HTTP header Link: </path/to/>; rel=preload; as=html

HTTP 2.0 push critical resources

http20-experiment.appspot.com goo.gl/mnQ5rN WebPageTest results: code: github.com/GoogleChrome/http2push-gae

http20-experiment.appspot.com HTTP2 push reduced load by 300ms! goo.gl/mnQ5rN WebPageTest results:
code: github.com/GoogleChrome/http2push-gae

If you can’t measure it, you can’t improve it.

@ebidel @polymer #polymersummit Polydev Chrome extension know the costs of
your elements goo.gl/pgPeCE source: github.com/polymerlabs/polydev

@ebidel @polymer #polymersummit Polymer perf bookmarklet know your app’s metrics
‣ Time to first paint & page load ‣ HTML Import load times ( main page ) ‣ # of custom element instances ‣ Element properties using goo.gl/vkJHWm

+Eric Bidelman @ebidel thistock.im code: github.com/ebidel/polymer-experiments

Polymer Performance Patterns

Polymer Performance Patterns

More Decks by Eric Bidelman

Other Decks in Technology

Featured

Transcript