frontend performance metrics

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