Yes, your page/app is a little bumpy, and you probably need some performance fixes…But before you start searching for a solution, you have to find the problem!In this session, we will dive into Performance API and some profiling tools, and get some insights on how to analyze your performance issues without losing your head.

1. Think About Web
Performance
Ron Apelbaum

2. About me..
Tired Father of 2 boys
Love food and cooking
Code Quality freak
Software Developer - 7 yrs
Front End Developer - 4 yrs
https://ronapelbaum.github.io

3. About us..

4. About Us..

5. About Us..

6. A true story...
Improve
Performance!
Blame
Back-End..
Blame
Front-End..

7. Agenda
Define
Measure
Analyse
Improve

8. What is Performance?

10. The RAIL Model

11. Response
User Interaction
Respond in under 100ms
● UX can help

12. Animation
User expects 60 FPS
Produce a frame in 10ms

13. Idle
Maximize idle time
User interaction - top priority
Return to main thread every <50ms
● Smart event listening

14. Load
Deliver content under 1000ms
● Cache
● Compression
● CDN
● Minify
● Parallel Loading - Avoid Waterfall!
● Lazy Loading
● HTTP2

15. Think Performance!

16. Load - continue
Web App (SPA)
● Separate static & data(xhr)
● Modularity
Hosted / Embedded
● Few Bundles
● Server-side rendering?

17. Measure Performance

18. How long did it take for X?

20. “ The Performance interface provides
access to performance-related information
for the current page. ”

21. performance.now()
Starts at navigationStart
DOMHighResTimeStamp (double)
Indifferent to system clock

22. performance.timing
navigationStart
domComplete
...

23. performance.mark()
events.forEach(event => {
eventBus.addEventListener(
eventName,
() => performance.mark(eventName)
)
})

24. performance.mark()

25. performance.getEntries()

26. performance.getEntries()
performance.getEntriesByType('resource')
=> PerformanceResourceTiming
performance.getEntriesByType('mark')
=> PerformanceMark

27. PerformanceMark
{
"name": "my-
mark",
"startTime":
220,
"entryType":
"mark"
}
{
"name": "script.js",
"startTime": 20,
"responseEnd": 180,
"duration": 160,
"entryType":
"resource",
"initiatorType":
"script"
}
PerformanceResourceTiming

28. Next step..
Automation (CI)
Analytics (RUM)
…

29. Analyse Performance

33. Live Demo!

34. Summary
Define
Measure
Analyse
Improve

35. ● RAIL Model: https://developers.google.com/web/fundamentals/performance/rail
● Performance API: https://developer.mozilla.org/en-US/docs/Web/API/Performance_API
● DevTools: https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/
● Understand frames: https://aerotwist.com/blog/the-anatomy-of-a-frame/