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 · World Congress 2023

1:58 min

Defining frontend web performance and developer responsibility

Ramona Schwering Ramona Schwering · World Congress 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 · World Congress 2025

2:24 min

Tools for measuring web app performance

Laura Morinigo · World Congress 2022

2:48 min

Using end-to-end tests for performance measurement

Ramona Schwering Ramona Schwering · World Congress 2023

More from WeAreDevelopers LIVE

WeAreDevelopers LIVE - Is CSS Catching Up to Flash? thumbnail
1:03:33
10 days ago

WeAreDevelopers LIVE - Is CSS Catching Up to Flash?

Chris Heilmann, Daniel Cranney, Bramus Van Damme

WeAreDevelopers LIVE - Project Chopin: Make Your Team and Agents Play Along thumbnail
1:21:17
17 days ago

WeAreDevelopers LIVE - Project Chopin: Make Your Team and Agents Play Along

Chris Heilmann, Daniel Cranney, Krzysztof Cieślak

Fake or News - AI Toothbrushes, Carrier Pigeon Tech & Life on Mars - Krzysztof Cieślak thumbnail
4:23
18 days ago

Fake or News - AI Toothbrushes, Carrier Pigeon Tech & Life on Mars - Krzysztof Cieślak

Chris Heilmann, Daniel Cranney

WeAreDevelopers LIVE - Open Source Agent Toolkits thumbnail
1:00:38
24 days ago

WeAreDevelopers LIVE - Open Source Agent Toolkits

Chris Heilmann, Daniel Cranney, Eddie Jaoude

Fake or News - AI Music Detectors, Translating Ancient Languages & Tiny Heads in Teslas - Eddie Jaoude thumbnail
6:16
25 days ago

Fake or News - AI Music Detectors, Translating Ancient Languages & Tiny Heads in Teslas - Eddie Jaoude

Chris Heilmann, Daniel Cranney

Fake or News: AI Agents Hire Each Other, Spider-Man Ads in Cars & RAM Thieves - Marc Plogas thumbnail
5:46
about 1 month ago

Fake or News: AI Agents Hire Each Other, Spider-Man Ads in Cars & RAM Thieves - Marc Plogas

Chris Heilmann, Daniel Cranney, Marc Plogas

Related videos

Measure and improve frontend performance by using test automation thumbnail
25:38
World Congress 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 • over 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 • 2 months 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
World Congress 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
World Congress 2025 • about 1 year ago

The Journey of a Pixel in a React Application

Shem Magnezi

The Illusion of a Performant Web Application thumbnail
28:56
World Congress 2023 • almost 3 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.