performace optimizations and frontend happiness
DESCRIPTION
There are two goals when it comes to performance: faster pages and pages that work fast. Performant applications met both goals, pages get to the user fast but also scroll and update responsively. We will go over the not so obvious performance problems we had in those areas the past year and the solutions (or coding practices) that helped us solve the issues.TRANSCRIPT
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?