frontend performance metrics
TRANSCRIPT
Javascript performance metrics
* Measure first. Measure often.
@blackrabbit99
Who am I ?
● Gameloft● WebSpellChecker● DevPro● Pics.io● Epam
● KharkivJS organizer● Community member
@blackrabbit99
Where are we now?1) Desktop pattern
2) Incredibly fast development of technology
3) Frontend adopt backend responsibility
4) Enormous market that need it
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
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.
Move to performance
Networking
Rendering performance
Rendering performance
Rendering performance
CSS Triggers
Computation
Computation
Computation
Computation
Garbage collection
… and More
CSS
Images
FontsHTML
RAIL?
Goals
Principles
Measure first
Dev Tools Audit
Dev Tools Audit
● Network requests● Browser caching ● Cookies size● Ordering of your styles and scripts ● Unused css
Page Speed Insighthttps://developers.google.com/speed/pagespeed/insights/
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
WebPage Test
WebPage Test
WebPage Test
Something went wrong
We need automation
PSI
npm install psi
PSI
PSI
● strategy mobile|desktop
● format cli|json|tap
● locale
● threshold
Web Page test
npm install webpagetest
The API key is limited to 200 page loads per day
Localhost?
ngrok http-tunnel
Phantomasphantom or slimmermodular approachpython or nodewait for selectorsrun locallyexport to elastic search
Request monitorAssets timeDom ComplexityWindow performanceErrorConsole alerts
SPA?
Browser Perf
More than 100 metrics
Browser Perf env
● SauceLab● Selenium● BrowserStack
Browser Perf
● Cordova/Phonegap● Hybrid Mobile Application
Browser Perf
● Wait● Scroll
Browser Perf
Custom behavior scripts !!!
https://github.com/blackrabbit99/browser-performance-testing-tools
Thank you for being with me
@blackrabbit99