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.

1. Performance,
Optimization and
Frontend
Happiness.

2. Nuria Ruiz
@ pantojacoder

3. Disclaimer

4. Ground Zero

5. Performance,
Optimization and
Frontend
Happiness.

6. What is the
goal?

7. Pages that
load faster.

8. Pages that
work better.

9. Architecting
for
Performance.

10. First Pageload.

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

12. First Pageload
DOMContentLoaded
triggered as soon as
possible.

13. Download your
JavaScript code
on demand.

15. Before:
1.5MB of JS
DOMContentLoaded in
5.5 seconds

18. After:
DOMContentLoaded in
1.9 seconds
Still High.

19. Optimizing
your
Markup.

20. Too many DOM nodes in
a page will (likely) make it
S L O W ..

21. How many are
too many?

22. 1.000?
10.000?
20.000?

23. 2471
2664
document.querySelectorAll('*').length

24. Node Explosion
Demo

25. CSS
matters.

26. CSS affects
Framerate
Scrolling

27. Browser applies CSS
rules from right to
left

28. Bad
treehead treerow treecell {…}
Bad but better
treehead > treerow > treecell {…}
Best
.treecell-header {…}

29. CSS3
Handle with care!

30. Bad
p ~ 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>

31. What style is slow?
Disable style, note
paintimes.

32. NOT your friends:
border-radius
box-shadow

33. Measuring
Performance.

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

37. Where's the
Happiness?

38. Faster production
environment yields
Faster development
environment

39. Bonus track!
Web workers
Flushing
Prefetching

40. Questions?