Frontend Performance Testing is Hard

John Hill

About Me

Web UI Test Engineer,

Space Mission Control Software, KBR

NASA Ames Research Center

unlikelyzero.com

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

Your Internal Network

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