Frontend Performance Testing is Hard

John Hill

About Me

Open MCT

In this talk

• Browser Performance and DevTools
• First Load
• After First Load
• What to Measurement
• Why is it hard?
• How to Measure

In this talk

• How to fix performance problems
• Load Testing
• Paid solutions

Browser Performance

• "Load" Times
• User Experience
• Clientside Resource Management

Lighthouse

• Built into DevTools
• Performance and SEO
• "First Load"

What happens after load?

What to measure on client?

• Backend Response Time  
  • After!!!!
• CPU
  • Long Tasks API - "Freeze" main thread >50ms
  • Overall Utilization
• Memory
  • Leaks - Heapdump
  • Overall Usage
• User Experience
  • Performance.Marks() API aka "User Journey"
  • Interactivity

How?

(Chrome! Devtools!)

Selenium?

• Yes? No? Maybe?
• Variability in results due to waitFor
• Driver? Jmeter+Selenium
• 2 Cores per User!
• CDP in 4.0

Puppeteer/Playwright

• "Official" Chrome Support
• Connects to chrome with native CDP
• Access to Chrome's internals aka "Inside-out Performance Measurements"
• Execute tests and capture perf metrics along the way

Capabilities Demo

"Hard" Demo

Hard?

• Variability
  • We "only" want App-under-test variation
  • Network
  • CPU
  • Chrome
  • Test Framework
• Transferability
  • CPU/GPU
• QA Team giving us bad builds!

What do we need?

• Stable Interface
• Playwright "bless your own damn build" testing
• sitespeed.io is a better specialized tool

• "Chrome as a service" and way more than today's demo
• "Interface for Performance Testing"
• Chrome + essentials in a container. Hard.
• Drivers like Selenium (4.0), Puppeteer and Playwright
• Lighthouse, prom-client, heapdump
• Transferrability!
  • CPU=2.0, RAM= 4GB in docker/k8s

browserless

Remote CDP

Demo

What do we need?

• Stable Interface
• Controlled Environment

JS-Perf-Toolkit

• github.com/unlikelyzero/js-perf-toolkit
• Moves everything* into containers
  • browserless
  • influxdb+prometheus+grafana
  • Puppeteer/Playwright Examples
  • NodeJS->InfluxDB (coming soon)
  • xk6-browser*
• Network control with toxiproxy
• Integrates into monitoring systems with InfluxDB and Prometheus*

Demo

Summary

• Browser Performance and DevTools
• Load Testing and Perf Problems
• What to Measure
• Browserless
• Driving with Puppeteer
• js-perf-toolkit