Performance,Optimization and Frontend Happiness.
Nuria Ruiz
@pantojacoder
Disclaimer
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 {…}
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.
Where's the Happiness?
Faster production environment yields Faster development environment
Web workersFlushingPrefetching
Bonus track!
Questions?
