Speed on the web is a complex problem that we must solve at different levels of our app. But how can we do that and why should we care?

1. V I R T U A L C O N F E R E N C E / / N O V - D E C 2 0 2 0 / / P R E S E N T E D B Y E P A M

2. V I R T U A L C O N F E R E N C E / / N O V - D E C 2 0 2 0 / / P R E S E N T E D B Y E P A M
Writing Performant
Front-end Code
LY U B O M I R B O Z H I N O V

3. ADAPT BY ZED
Who Am I?
Lyu b omir
B ozh in ov
Lead Software Engineer
Lead Software Engineer @ EPAM. Author. Speaker.
But most importantly, a tinkerer at heart, who
believes one should always leave the code better
than they found it - and apply the same to
everything.
3
About Me

4. 4
About Me
So, yeah, I write code for a living.

5. 5
About Me
Sometimes I even know why it works!

6. ADAPT BY ZED
• MAKE IT WORK
• MAKE IT FAST
• MAKE IT PRETTY
6
Intro

7. ADAPT BY ZED
• MAKE IT WORK
• MAKE IT FAST
• MAKE IT PRETTY
HOW OFTEN DO YOU IGNORE CODE PERFORMANCE?
7
Intro

8. Level Zero: Code Performance
The Art of the Tinkerer
1

9. ADAPT BY ZED
9
Computational Complexity: Time v Space
Sometimes the best way to visualise something is with
a poor drawing of random ‘wibbly-wobbly’ lines.

10. ADAPT BY ZED
10
Computational Complexity: The Problem
In the classic find all anagrams in a dataset problem,
you could iterate every time. Or just pre-process and use KVPs.
v

11. ADAPT BY ZED
11
Computational Complexity: Time v Space
Hungry, hungry Chrome tabs!

12. ADAPT BY ZED
12
Computational Complexity: Time v Space
CompSci101 Reference

13. 13
Premature Optimisation
What do I mean by that?
Basically any situation where one
tries to make the code run faster
before even having completed the
functionality.

14. 14
Level Zero Fast?
Speed can be weird at this level.

15. 15
Measure!
Measure your code speed!
And do it with enough consistency
across the codebase to have an
early-warning system for
performance problems.

16. 16
Measure How?
USER TIMING API
MARKS & MEASURES
https://developer.mozilla.org/en-
US/docs/Web/API/User_Timing_API

17. ADAPT BY ZED
https://caniuse.com/#search=user-timing
17
Measure How?

18. ADAPT BY ZEDLevel Zero: How & Why?
18
WHY
MEASURE
LOG
TINKER
RINSE
REPEAT
SLOW CODE IS BAD
HOW

19. Level One: Rendering
Performance
Precision is the Key
2

20. ADAPT BY ZED
Our favourite language in the multiverse is single-threaded. 
20
The Event Loop

21. ADAPT BY ZED
The Pixel Pipeline. Source: web.dev
21
The Pixel Pipeline

22. Say ‘hello’ to your new best friend!
22
The Performance Tab

23. 23
Optimise Your JS
Your code drives the entire pipeline!

24. ADAPT BY ZED
Changing an element’s width or class will trigger visual
changes. ‘It’s only logical.’
24
Optimise Your JS

25. ADAPT BY ZED
Anything small that will trigger a visual update should be done
in a RAF call to ensure it’s finished on time. No setTimeout!
25
Optimise Your JS

26. ADAPT BY ZED
Split the work into smaller tasks, push them onto a stack, and
then use RAF calls to deal with them one by one.
26
Optimise Your JS

27. ADAPT BY ZED
Just spin up a web worker to keep the main thread free of the
long-running computation.
27
Optimise Your JS

28. ADAPT BY ZED
The possibilities are endless.
28
Optimise Your JS

29. ADAPT BY ZED
Jason Miller (@developit)
29
Optimise Your JS
greenlet: https://www.npmjs.com/package/greenlet
workerize: https://www.npmjs.com/package/workerize-loader

30. 30
Improve Style Calculations
We all joke around that CSS is a necessary evil, but the reality
is that we simply MUST try to keep it in check.

31. 31
Improve Style Calculations
SMACSS: http://smacss.com/
BEM: http://getbem.com/introduction/
https://www.smashingmagazine.com/20
13/10/challenging-css-best-practices-
atomic-approach/

32. 32
Minimise Layout Complexity
The fewer elements you have in your DOM tree, the
more quickly the browser will calculate the locations and
dimensions of all of them.

33. 33
Paint and Compositing
• All property changes except transform and
opacity will trigger a repaint.
• Identify excessive paints with the dev tools
and create a separate layer.
• But too many layers at the compositing
stage can have a performance impact.

34. ADAPT BY ZED
The four parts of the RAIL model are basically four
perspectives on a web app’s state. Picture source: web.dev
34
The RAIL Model

35. ADAPT BY ZEDThe RAIL Model
35
10ms50ms

36. ADAPT BY ZED
Source: web.dev
36
The RAIL Model

37. ADAPT BY ZEDLevel One: How & Why?
37
WHY
THE PERFORMANCE TAB
OPTIMISE JAVASCRIPT EXECUTION
IMPROVE STYLE CALCULATIONS
MINIMISE LAYOUT COMPLEXITY
SIMPLIFY PAINT AND MANAGE LAYERS
KEEP THE RAIL MODEL IN MIND
VISUAL JANK AND STUTTER IS JUST BAD
UX
SLOW RENDERING WILL MAKE THE
USER FRUSTRATED
HOW

38. Level Two: Framework and
Bundle
Optimise Everything!
3

39. ADAPT BY ZED
There are number of other auto-magical features in modern
frameworks – usually just a boolean flag in a JSON file.
39
The Pros and Cons of Frameworks

40. ADAPT BY ZED
I’ve had the misfortune to write jQuery in IE6. It was about as
fun as it sounds.
40
The Pros and Cons of Frameworks

41. ADAPT BY ZED
Bundle analyzer: https://www.npmjs.com/package/webpack-
bundle-analyzer
41
The Pros and Cons of Frameworks

42. ADAPT BY ZED
Redux + React
42
The Pros and Cons of Frameworks

43. ADAPT BY ZED
Preact + Unistore
https://preactjs.com/
https://www.npmjs.com/package/unistore
43
The Pros and Cons of Frameworks

44. ADAPT BY ZED
Intro to PWAs: https://web.dev/progressive-web-apps
44
Going PWA

45. Lighthouse CI:
https://github.com/GoogleChrome/l
ighthouse-ci
45
Shed Some Light

46. ADAPT BY ZEDLevel Two: How & Why?
46
WHY
‘RIGHT TOOL FOR THE JOB’ TO ACHIEVE A GREAT USER EXPERIENCE
HOW

47. Level Three: The Network
Waterfall
Every Byte Matters
4

48. ADAPT BY ZED
It requires an absurd amount of tinkering to get it right. And
the solution is different for every project.
48
The Network Waterfall

49. ADAPT BY ZED
Addy Osmani (@addyosmani)
49
Optimise Your JS
critical: https://github.com/addyosmani/critical

50. ADAPT BY ZEDLevel Three: How & Why?
50
WHY
SOMEWHAT CLEAR CRYSTAL CLEAR
HOW

51. ADAPT BY ZED
None of the things I’ve mentioned here today are FINAL.
51
Final Words

52. 52
Final Words
Largest Contentful Paint (LCP)
First Input Delay (FID)
Cumulative Layout Shift (CLS)
Total Blocking Time (TBT)
Keep an eye on https://web.dev

53. V I R T U A L C O N F E R E N C E / / N O V - D E C 2 0 2 0 / / P R E S E N T E D B Y E P A M
Thank you!
LinkedIn: https://www.linkedin.com/in/lyubomir-bozhinov/
Twitter: https://twitter.com/TheElegantDev