Performace optimizations and frontend happiness

Performance,Optimization and Frontend Happiness.

Nuria Ruiz

@pantojacoder

Disclaimer

Ground ZeroGround Zero

Performance,Optimization and Frontend Happiness.

What is the goal?

Pages that load faster.

Pages that work better.

Architecting for Performance.

First Pageload.

Fastest Javascript is the one you do not have to execute.

First Pageload

DOMContentLoaded triggered as soon as possible.

First Pageload

Download your JavaScript code on demand.

Before:1.5MB of JS

DOMContentLoaded in 5.5 seconds

After:DOMContentLoaded in 1.9 seconds

Still High.

Optimizing yourMarkup.

Too many DOM nodes in a page will (likely) make it

S L O W . .

How many aretoo many?

1.000?

10.000?

20.000?

document.querySelectorAll('*').length

2471

2664

Node ExplosionDemo

CSSmatters.

CSS affectsFramerateScrolling

Browser applies CSS rules from right to left

Badtreehead treerow treecell {…}

Bad but bettertreehead > treerow > treecell {…}

Best.treecell-header {…}

CSS3Handle with care!

Badp ~ span{…}

<p><span>This is not red.</span><p>Here is a paragraph.<span> ...<span> </span>

</span></p><code>Here is some code.</code><span>And here is a span.</span>

</p>

What style is slow?

Disable style, note paintimes.

NOT your friends:border-radiusbox-shadow

MeasuringPerformance.

Telemetry

http://www.chromium.org/developers/telemetry

Where's the Happiness?

Faster production environment yields Faster development environment

Web workersFlushingPrefetching

Bonus track!

Questions?