Frontend performance metrics

1. Javascript performance
metrics * Measure first. Measure often.
@blackrabbit99

2. Who am I ?
● Gameloft
● WebSpellChecker
● DevPro
● Pics.io
● Epam
● KharkivJS organizer
● Community member
@blackrabbit99

3. Where are we now?
1) Desktop pattern
2) Incredibly fast development of technology
3) Frontend adopt backend responsibility
4) Enormous market that need it

4. What do we have?
1) More than 1000 frontend frameworks
2) Javascript is the most popular language
3) Frontend developers are over in-demand developers
4) Hipsta but rudimentary infrastructure

5. Why is it matter?
● Google: 2% slower = 2% less searching per user
● Yahoo: 400 milliseconds faster = 9% more traffic
● AOL: Faster pages = more page views
● Amazon: 100 milliseconds faster = 1% more revenue
● Aberdeen Group: 1 second slower = 11% fewer page
views, 7% less conversion
● Google uses website speed in search ranking.

6. Move to performance

7. Networking

8. Rendering performance

9. Rendering performance

10. Rendering performance

11. CSS Triggers

12. Computation

13. Computation

14. Computation

15. Computation

16. Garbage collection

17. … and More
CSS
Images
Fonts
HTML

18. RAIL?

20. Goals

21. Principles
Measure first

22. Dev Tools Audit

23. Dev Tools Audit
● Network requests
● Browser caching
● Cookies size
● Ordering of your styles and scripts
● Unused css

24. Page Speed Insight
https://developers.google.com/speed/pagespeed/insights/

25. Page Speed Insight
● Enable compression
● Minify CSS
● Minify JavaScript
● Prioritize visible content
● Reduce server response time
● Configure the viewport
● Avoid app install interstitials that hide content
● Avoid plugins
● Size content to viewport

26. WebPage Test

27. WebPage Test

28. WebPage Test

29. Something
went wrong

30. We need
automation

31. PSI
npm install psi

32. PSI

33. PSI
● strategy mobile|desktop
● format cli|json|tap
● locale
● threshold

34. Web Page test
npm install webpagetest
The API key is limited to 200 page loads per day

37. Localhost?
ngrok http-tunnel

38. Phantomas
phantom or slimmer
modular approach
python or node
wait for selectors
run locally
export to elastic search
Request monitor
Assets time
Dom Complexity
Window performance
Error
Console alerts

39. SPA?

40. Browser Perf
More than 100
metrics

41. Browser Perf env
● SauceLab
● Selenium
● BrowserStack

42. Browser Perf
● Cordova/Phonegap
● Hybrid Mobile Application

43. Browser Perf
● Wait
● Scroll

44. Browser Perf
Custom behavior scripts !!!

45. https://github.
com/blackrabbit99/browser-
performance-testing-tools

46. Thank you for being with me
@blackrabbit99