The document discusses optimizing front-end code performance. It covers measuring performance, optimizing JavaScript execution, improving style calculations, minimizing layout complexity, and simplifying painting and compositing. Later sections discuss optimizing frameworks and bundles, as well as network performance. The overall message is that slow or inefficient code leads to poor user experiences, so performance should be considered at all levels of front-end development.

1. WRITING PERFORMANT
FRONT-END CODE

4. MAKE IT WORK,
MAKE IT FAST, MAKE
IT PRETTY

5. HOW OFTEN DO
YOU IGNORE CODE
PERFORMANCE?

6. * not actually me ;D

7. LEVEL ZERO: CODE
PERFORMANCE

9. COMPUTATIONAL
COMPLEXITY
TIME VERSUS SPACE

12. PREMATURE
OPTIMISATION

15. USER TIMING API
MARKS &
MEASURES
https://developer.mozilla.org/en-US/docs/Web/API/User_Timing_API

16. https://caniuse.com/#search=user-timing

17. LEVEL ZERO: HOW?
• MEASURE
• LOG
• TINKER
• RINSE
• REPEAT

18. LEVEL ZERO: WHY?
SLOW CODE IS BAD

19. LEVEL ONE:
RENDERING
PERFORMANCE

21. The Pixel Pipeline. Source: web.dev

22. Say ‘hi’ to your new best friend!

23. OPTIMISE
JAVASCRIPT
EXECUTION

25. Source: web.dev

29. Jason Miller (@developit)
greenlet: https://www.npmjs.com/package/greenlet
workerize: https://www.npmjs.com/package/workerize-loader

30. IMPROVE STYLE
CALCULATIONS

31. BEM:
http://getbem.com/introduction/
SMACSS: http://smacss.com/
https://www.smashingmagazine.com/2013/10/challenging-css-best-practices-atomic-approach/

32. MINIMISE LAYOUT
COMPLEXITY

33. PAINT AND
COMPOSITING

34. Source: web.dev

35. 10 MS
50 MS

36. Source: web.dev

38. LEVEL ONE: HOW?
• THE PERFORMANCE TAB
• OPTIMISE JAVASCRIPT EXECUTION
• IMPROVE STYLE CALCULATIONS TIME
• MINIMISE LAYOUT COMPLEXITY
• SIMPLIFY PAINT AND MANAGE
LAYERS
• KEEP THE RAIL MODEL IN MIND AT
ALL TIMES

39. LEVEL ONE: WHY?
VISUAL JANK AND STUTTER
IS JUST BAD UX
SLOW RENDERING WILL
MAKE THE USER FRUSTRATED

40. LEVEL TWO:
FRAMEWORK AND
BUNDLE

43. Bundle analyzer: https://www.npmjs.com/package/webpack-bundle-analyzer

44. Redux + React

45. https://preactjs.com/ https://www.npmjs.com/package/unistore

46. Link to video: https://www.youtube.com/watch?v=fWc3Zu6A3Ws

48. Lighthouse CI: https://github.com/GoogleChrome/lighthouse-ci

49. LEVEL TWO: HOW?
‘RIGHT TOOL FOR
THE JOB’

50. LEVEL TWO: WHY?
TO ACHIEVE A
GREAT USER
EXPERIENCE

51. LEVEL THREE: THE
NETWORK
WATERFALL

53. Addy Osmani (@addyosmani)
critical: https://github.com/addyosmani/critical

54. LEVEL THREE:
HOW & WHY?

55. FINAL WORDS

59. THANK YOU
LINKEDIN: HTTPS://WWW.LINKEDIN.COM/IN/LYUBOMIR-BOZHINOV/
TWITTER: HTTPS://TWITTER.COM/THEELEGANTDEV