> Markdown version of [/videos/719-measure-and-improve-frontend-performance-by-using-test-automation?t=1103](https://www.wearedevelopers.com/videos/719-measure-and-improve-frontend-performance-by-using-test-automation?t=1103). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md).

---

# Measure and improve frontend performance by using test automation

Stop treating frontend speed as a manual afterthought. Discover how to repurpose existing E2E tests to automatically track Core Web Vitals and block slow pull requests.

- **Speakers:** [Ramona Schwering](https://www.wearedevelopers.com/@ramona-schwering)
- **Event:** World Congress 2023
- **Published:** September 27, 2023
- **Duration:** 25:38
- **URL:** https://www.wearedevelopers.com/videos/719-measure-and-improve-frontend-performance-by-using-test-automation

## Summary

The mantra of software development is often "make it work, make it right, make it fast," yet optimizing for speed frequently becomes a neglected chore on the frontend. While functionality is readily validated with unit tests, manual performance profiling is time-consuming, risking poor user experiences and search engine penalties. Frontend engineers cannot offload performance responsibilities to backend teams, as frontend bottlenecks remain the most immediately noticeable to end-users. Without consistent measurement, there can be no meaningful improvement.\n\nInstead of introducing entirely new load-testing tools or complex architectures, engineering teams can repurpose existing end-to-end (E2E) test automation to continuously monitor speed metrics. Frameworks like Cypress and Playwright can seamlessly capture browser-level telemetry because they already execute complete user workflows. By integrating libraries such as the cypress-audit plugin for Google Lighthouse and the cypress-web-vitals plugin, teams can expose critical application performance metrics with a single line of code.\n\nAdopting this unified testing strategy ensures performance becomes a non-negotiable standard within the development cycle. Developers should configure E2E tests to automatically fail whenever a pull request degrades predefined thresholds for Core Web Vitals, including Largest Contentful Paint (LCP), First Input Delay (FID), Cumulative Layout Shift (CLS), and Time to First Byte (TTFB). Executing these guardrails during standard CI/CD merge requests or scheduled nightly builds eliminates the cognitive load of manual benchmarking, keeping performance highly visible without disrupting standard engineering workflows.

**Keywords:** frontend performance optimization, end-to-end testing frameworks, cypress test automation, google lighthouse integration, core web vitals monitoring, largest contentful paint, first input delay, cumulative layout shift, time to first byte, ci/cd pipeline guardrails, cypress-audit plugin, playwright performance metrics, test automation thresholds, user experience bottlenecks

## Chapters

1. **Balancing functionality, maintainability, and speed in applications** (00:04) — Prioritizing information and test automation empowers developers to build fast, functional, and maintainable applications.
1. **Using end-to-end tests for performance measurement** (04:10) — Repurposing existing end-to-end testing frameworks captures performance metrics without requiring additional dedicated tooling.
1. **Tracking performance data through application logging** (06:59) — Logging through standard test frameworks and browser developer tools provides accessible runtime performance metrics.
1. **Defining frontend web performance and developer responsibility** (09:42) — Frontend developers must fully own application page load times, runtime responsiveness, and continuous code optimization.
1. **Automating Lighthouse audits within the Cypress framework** (11:41) — Configuring the Cypress audit plugin enforces automated Lighthouse performance score checks within active test pipelines.
1. **Understanding core Web Vitals for user experience** (18:23) — Measuring largest contentful paint, first input delay, and cumulative layout shift accurately quantifies real user experiences.
1. **Validating Web Vitals thresholds with test frameworks** (20:38) — Integrating the Cypress Web Vitals plugin enforces strict performance threshold validation directly inside code peer reviews.
1. **Key strategies for continuous frontend performance testing** (23:54) — Consistently applying automated measurements and baseline thresholds ensures frontend applications reliably maintain excellent usability.

## Related Moments

- [Automating frontend performance metrics with Google Lighthouse](https://www.wearedevelopers.com/videos/322-automate-everything-via-nodejs-and-puppeteer) (from "Automate everything via NodeJS and Puppeteer")
- [Debugging performance bottlenecks with developer tools](https://www.wearedevelopers.com/videos/817-the-illusion-of-a-performant-web-application) (from "The Illusion of a Performant Web Application")
- [Tools for measuring web app performance](https://www.wearedevelopers.com/videos/453-is-your-progressive-web-app-lazy-how-to-read-and-improve-your-pwa-performance) (from "Is your Progressive Web App Lazy? How to read and improve your PWA Performance")
- [Analyzing test automation challenges and the Cypress timeline](https://www.wearedevelopers.com/videos/834-fighting-test-flakiness-with-time-machines) (from "Fighting test flakiness with time machines")
- [Introduction to the speaker and visual testing journey](https://www.wearedevelopers.com/videos/540-let-s-get-visual-visual-testing-in-your-project) (from "Let's get visual - Visual testing in your project")
- [Testing local site performance with Lighthouse audits](https://www.wearedevelopers.com/videos/169-jamstack-and-web-performance-a-match-made-in-heaven) (from "Jamstack and Web Performance, a match made in heaven")

## Related Articles

- [Dev Digest 133 - Back to Front](https://www.wearedevelopers.com/magazine/474-dev-digest-133-back-to-front)
- [Dev Digest 139 - Soft and hard queries](https://www.wearedevelopers.com/magazine/487-dev-digest-139-soft-and-hard-queries)
- [Dev Digest 120 - Apple and peers](https://www.wearedevelopers.com/magazine/455-dev-digest-120-apple-and-peers)
- [25 Essential Tools for Front End Developers](https://www.wearedevelopers.com/magazine/210-25-essential-tools-for-front-end-developers)

## Related Jobs

- [Staff Frontend Engineer](https://www.wearedevelopers.com/jobs/48313-staff-frontend-engineer) at **SMG Swiss Marketplace Group**
- [Staff Frontend Engineer (Expert+/Lead equivalent) - Hybrid working model, 100%, Ho Chi Minh City](https://www.wearedevelopers.com/jobs/48314-staff-frontend-engineer-expert-lead-equivalent-hybrid-working-model-100-ho-chi-minh-city) at **SMG Swiss Marketplace Group**
- [Junior Frontend Engineer](https://www.wearedevelopers.com/jobs/ext/1532351-junior-frontend-engineer) at **Almedia**
- [Software Engineer Frontend (all genders welcome) in the field of Water Line Integrity Solutions](https://www.wearedevelopers.com/jobs/ext/127888-software-engineer-frontend-all-genders-welcome-in-the-field-of-water-line-integrity-solutions) at **Rosenxt Group**
- [Senior Web Designer, Growth](https://www.wearedevelopers.com/jobs/ext/102722-senior-web-designer-growth) at **Intercom, Inc.**
- [Software Engineer](https://www.wearedevelopers.com/jobs/ext/1304673-software-engineer) at **Bitpanda**