WeAreDevelopers Logo WeAreDevelopers
Sign in
For You LIVE
WeAreDevelopers LIVE • Jun 17, 2020

Frontend Performance Testing in practice

Jonas Kröger

Your high-end dev machine is hiding real-world performance bottlenecks. Master automated frontend testing across local, CI, and production environments to stop code regressions before they reach users.

Pause
Mute Enter Fullscreen
#1 about 7 min

Understanding the business impact of frontend performance

Real-world network differences and device limitations demonstrate why optimized page loading increases active usage and business revenue.

#2 about 4 min

Mapping loading states to performance key performance indicators

Translating user perceptions of rendering speed into technical measurements like time to first byte and first meaningful paint.

#3 about 2 min

Establishing baseline goals for frontend performance metrics

Setting aggressive targets for interactive times and speed indexes ensures web applications remain competitive and usable across varying conditions.

#4 about 3 min

Classifying performance testing into proactive and passive strategies

Development teams implement local preventative checks, automated reactive budgets, and live user monitoring to cover the complete delivery lifecycle.

#5 about 3 min

Emulating network conditions using browser developer tools locally

Throttling bandwidth connections within local environments surfaces actual loading experiences before pushing unoptimized code to remote staging areas.

#6 about 2 min

Inspecting javascript package bundles during local application builds

Visualizing module sizes exposes large external dependencies and third-party libraries that bloat the overall application vendor payload.

#7 about 4 min

Automating performance tests as deployment pipeline triggers

Executing remote diagnostic tools against dedicated branch environments verifies metric improvements and catches regressions before merging into production.

#8 about 2 min

Enforcing strict size thresholds through technical performance budgets

Configuring automatic build warnings and pipeline failures prevents bloated components from ever reaching live user devices if asset limits are exceeded.

#9 about 3 min

Improving rendering speed via code splitting and dependency removal

Chunking single massive files into smaller discrete payloads and replacing heavy helper libraries with native code directly minimizes processing overhead.

#10 about 4 min

Verifying branch improvements using remote evaluation APIs continuously

Hooking automated branch pushes directly to web evaluation infrastructure compares historic deployment benchmarks inside isolated remote test servers seamlessly.

#11 about 3 min

Monitoring live site environments alongside external marketing snippets

Running constant synthetic evaluations and live user telemetry correctly observes the real degradation caused by third-party publisher scripts.

#12 about 3 min

Applying performance automation and building team network empathy

Replacing manual metrics collection with automated rules and simulating poor networks globally focuses the engineering culture entirely towards inclusive speeds.

Matching moments

1:43 min

Key strategies for continuous frontend performance testing

Ramona Schwering Ramona Schwering · WWC 2023

1:58 min

Defining frontend web performance and developer responsibility

Ramona Schwering Ramona Schwering · WWC 2023

4:47 min

Automating frontend performance metrics with Google Lighthouse

Miki Lombardi · JS Congress

1:01 min

Connecting frontend application performance to user retention and revenue

Dani Coll Dani Coll · WWC 2025

2:24 min

Tools for measuring web app performance

Laura Morinigo · WWC 2022

2:48 min

Using end-to-end tests for performance measurement

Ramona Schwering Ramona Schwering · WWC 2023

More from WeAreDevelopers LIVE

Aliens in Quarantine, Python Deprecates Loops, and AI Buys Old Books - Zbyszek Tenerowicz thumbnail
5:43
5 days ago

Aliens in Quarantine, Python Deprecates Loops, and AI Buys Old Books - Zbyszek Tenerowicz

Chris Heilmann, Daniel Cranney

WeAreDevelopers LIVE - Node and Package Security thumbnail
1:08:30
5 days ago

WeAreDevelopers LIVE - Node and Package Security

Chris Heilmann, Daniel Cranney, Zbyszek Tenerowicz

WeAreDevelopers LIVE - Streaming HTML thumbnail
1:10:26
12 days ago

WeAreDevelopers LIVE - Streaming HTML

Chris Heilmann, Daniel Cranney, Jad Joubran

WeAreDevelopers LIVE - CODE100 at WeAreDevelopers Europe thumbnail
1:02:34
19 days ago

WeAreDevelopers LIVE - CODE100 at WeAreDevelopers Europe

Chris Heilmann, Daniel Cranney, Justin Halsall, Werner Jeschko, Nicole Jeschko, Mirco Tomić

WeAreDevelopers LIVE - Web Performance in an AI World thumbnail
1:07:59
26 days ago

WeAreDevelopers LIVE - Web Performance in an AI World

Chris Heilmann, Daniel Cranney

FIFA Hack, Midjourney Does Ultrasounds, and Trampoline Traffic Lights - Nicole Jeschko and Werner Jeschko thumbnail
5:55
about 2 months ago

FIFA Hack, Midjourney Does Ultrasounds, and Trampoline Traffic Lights - Nicole Jeschko and Werner Jeschko

Chris Heilmann, Daniel Cranney

Upcoming sessions on this topic

Open session

World Congress 2026 North America

Fast by Design: A Masterclass in High-Performance Web Engineering

Aaron Grogg

Senior web developer, committed to improving the user experience by improving web performance

Aaron Grogg
Open session

World Congress 2026 North America

How to generate business value through performance optimizations

Nikolai Sidiropulo

Software Engineer at Meta

Nikolai Sidiropulo
Open session

World Congress 2026 North America

One Repo, One Strategy: Scalable Full-Stack Testing in a Monorepo World

Bartosz Leczycki, Paweł Matynia

Bartosz Leczycki
Paweł Matynia
Open session

World Congress 2026 North America

Testing React Backends Like a Pro: Mocking Databases with SQLite

David Morris

Solution Architect

David Morris
Open session

World Congress 2026 North America

Reinventing Testing Practices in the AI Era

Eric Deandrea

Java Champion & Senior Principal Software Engineer, IBM

Eric Deandrea
Open session

World Congress 2026 North America

The Autonomous Performance Agent: A Netflix Production Story

Rajat Shah

Staff Software Engineer, AI Platform, Netflix

Rajat Shah

Related videos

Measure and improve frontend performance by using test automation thumbnail
25:38
WWC 2023 • almost 3 years ago

Measure and improve frontend performance by using test automation

Ramona Schwering

Catching up on the basics you don't really need that much code thumbnail
14:44
LIVE • about 2 years ago

Catching up on the basics you don't really need that much code

Chris Heilmann

WeAreDevelopers LIVE - Web Performance in an AI World thumbnail
1:07:59
LIVE • 26 days ago

WeAreDevelopers LIVE - Web Performance in an AI World

Chris Heilmann, Daniel Cranney

Jamstack and Web Performance, a match made in heaven thumbnail
42:04
WWC 2021 • about 5 years ago

Jamstack and Web Performance, a match made in heaven

Tamas Piros

The Journey of a Pixel in a React Application thumbnail
27:01
WWC 2025 • 12 months ago

The Journey of a Pixel in a React Application

Shem Magnezi

The Illusion of a Performant Web Application thumbnail
28:56
WWC 2023 • over 2 years ago

The Illusion of a Performant Web Application

Cathrin Möller

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.