%% date:: [[2022-10-17]], [[2023-03-17]], [[2023-04-30]], [[2023-11-03]] %% # [[Frontend performance testing]] Frontend [[Performance Testing]] is a type of testing that seeks to verify user experience on the interface level; that is, everything that a user sees on their local machine. Unlike [[Backend performance testing]], frontend performance testing does not concern itself with optimizing the network or application layers. It focuses on the first mile of a customer's experience with an application. For web apps, that's the part of the application that's displayed and run within the browser. <iframe width="560" height="315" src="https://www.youtube.com/embed/gYfUoX85ElA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> ## Measuring frontend performance testing - [[Field data]] is collected from real users or scripts simulating real users - [[Lab data]] is collected from a controlled environment ## Types of frontend performance testing <iframe width="560" height="315" src="https://www.youtube.com/embed/uERQXeWVV_E" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> ### [[Performance profiling]] Performance profiling is the easiest way to get started with performance testing, because many profilers are free and easily accessible. - [[Chrome DevTools]] - [[Google Lighthouse]] - [[WebPageTest]] - [[GTMetrix]] - [[YSlow]] ### [[Real User Monitoring]] - [[New Relic RUM]] - [[Catchpoint]] - [[Uptrends]] - [[Elastic RUM]] - [[SpeedCurve]] - [[Grafana Faro]] ### [[Browser-based testing|Browser-based automation tools]] - [[k6 browser]] - [docs](https://k6.io/docs/javascript-api/xk6-browser/) - [[Playwright]] - [site](https://playwright.dev/) - [[Puppeteer]] - [site](https://developers.google.com/web/tools/puppeteer/) - [[Cypress]] - [site](https://www.cypress.io/) - [[Selenium WebDriver]] - [site](https://www.selenium.dev/) ## Related