Performance is about retaining users, improving conversions, user experience. It's about people. DevTools performance tab as well as some hidden gems that you probably had no idea existed.

1. DebuggIng Perf with
devtools
@piyukore06

2. Priyanka Kore
@piyukore06
Frontend Developer at img.ly
https://priyanka.codes

3. Why is performance Important?
53% of visits are likely to be abandoned if pages take
longer than 3 seconds to load.
And unreliable networks combined with low-end smartphones
can make otherwise slick sites appear agonisingly slow.

5. Let’s understand
how rendering
works?

6. HTML JS CSS

7. HTML CSS

8. HTML CSS
DOM

9. HTML CSS
DOM CSSOM

10. HTML CSS
DOM CSSOM+
Render Tree

11. Render Tree

12. Render Tree
Layout

13. Render Tree
Layout Paint

14. Render Tree
Layout Paint Composite

15. HTML CSS
DOM CSSOM+
Render Tree
Js

16. HTML CSS
DOM CSSOM+
Render Tree
Js
The Entire DOM construction
process is halted until a
script finishes Executing

17. Critical Rendering Path
Load only what is needed

18. 1. Loading only what is being viewed (tree
shaking, code splitting and mutation
observer, async and defer)
2. Avoid large complex layout and layout
thrashing (csstriggers.com)
3. Think about if you really need a framework
4. Loading images/scripts lazily
Shortest Critical Rendering Path

19. But What does Slow
MeAn?

20. I like this definition

21. But What does Slow
MeAn?
If you didn’t measure
it, it is not slow, and
even if you measure it,
the numbers are
meaningless without
context.

22. Audit your Website

23. Check out
Performance trace
for granular view on
problems

24. Reading the waterfall chart

25. 1. FPS calculations
2. Throttle Check
3. Useful metrics for your use-case
4. Performant animations
5. Use Event delegation
6. Measure and Optimise :)

26. B
E
W
A
R
E

27. 1. Workerize
2. Comlink
Future Looks exciting

28. @piyukore06

29. Resources
1. web.dev
2. csstriggers.com
3. Performance Dev tool docs
4. How to go about perf