Client side performance testing with Cypress.io + Google Lighthouse
Performance testing is a non-functional software testing technique that determines how the stability, speed, scalability, and responsiveness of an application holds up under a given workload. Performance testing is often done two ways: on the back end, and on the front end.
Back end/ server side performance test checks whether the servers can handle the load when multiple requests are sent from users simultaneously. Server side performance can be measured using load, stress, endurance, spike, volume and scalability testing among other similar approaches.
Client side performance testing aims to test how fast a single user can see the web responses instantly. It focuses on rendering of front-end elements like CSS and javascript files to measure important KPIs like TTFB (Time To First Byte), Payload, Speed Index, Load Time, Time to Render, Time to Interact and CPU Idle Time among other important metrics.
Google Lighthouse is an open source front end or client side performance testing tool. It is an automated tool which is used for improving the quality of web pages. It can be executed against any web page and has audits for performance, accessibility, progressive web apps, SEO and more.
Cypress.io is an open-source javascript based front-end testing framework to write powerful and flexible tests for web applications. It provides benefits such as easy test configuration, convenient reporting, intuitive dashboard experience, and more. It works completely on a real browser without the need for driver binaries.
Running Google Lighthouse tests
The Lighthouse tests can be started in many ways. The easiest way is to simply open a Chrome browser, visit any website, open up developer tools and click the Lighthouse tab. From the Lighthouse tab, we can start the test as seen on the image below.
The other ways to start the test are using the Lighthouse browser extension, Lighthouse CLI (lets you run the audit straight from your command line or programmatically) and cypress-audit (Cypress plugin).
The Lighthouse tool offers test results under the following categories: Performance, Accessibility, Best Practices, SEO and Progressive Web App. In Lighthouse 6.0, there are six important performance metrics as detailed below (lower scores indicate better performance).
- First Contentful Paint (FCP)
FCP measures how long it takes for the browser to render the first piece of DOM content after a user navigates to your page. - Large Contentful Paint (LCP)
LCP measures how long it takes for the browser to render the largest piece of DOM content (image or text block) after a user navigates to your page. - Speed Index
Speed index measures how long the content visually loads on page load. - Time to Interactive (TTI)
TTI measures how long it takes for the page to become fully interactive. - Total Blocking Time (TBT)
TBT measures the time the page is blocked from responding to user inputs. Anything that executes above 50ms is considered a blocking task. - Cumulative Layout Shift (CLS)
CLS measures the visual stability of your page.
Cypress and Google Lighthouse
Cypress is a JavaScript based frontend testing tool which is primarily suited for testing modern web applications. Cypress operates directly inside the web browser and is ideal for End-to-End and integration testing.
Cypress Lighthouse Plugin
https://www.npmjs.com/package/cypress-lighthouse
Cypress Lighthouse Plugin is a lighthouse plugin that adds the cy.lighthouse command to audit websites against the lighthouse performance metrics.
Installation
Use npm or yarn to install cypress-lighthouse:
npm install --save-dev cypress-audityarn add -D cypress-audit
package.json dependencies:
"devDependencies": {"cypress": "^8.7.0","cypress-audit": "^0.3.0"}
Test class:
/// <reference types="Cypress" />describe('Cypress Lighthouse test', () => {beforeEach(() => {cy.visit('https://google.com');});it('should run performance audits', () => {cy.lighthouse();});it('should run performance audits using custom thresholds', () => {const customThresholds = {performance: 50,accessibility: 50,seo: 70,'first-contentful-paint': 2000,'largest-contentful-paint': 3000,'cumulative-layout-shift': 0.1,'total-blocking-time': 500,};const desktopConfig = {formFactor: 'desktop',screenEmulation: { disabled: true },};cy.lighthouse(customThresholds, desktopConfig);});});
Use npx cypress open command to run the cypress test.
The first test does not set any threshold and the test will be based on 100 score for every metrics. Refer to https://github.com/mfrachet/cypress-audit to have more information.
The second test has defined threshold and the metrics is compared with the limit that is set.
Conclusion
Improving the performance of a website is extremely important. Cypress and Google Lighthouse are a good combination for running client side performance tests on a website. Lighthouse plugins in Cypress make it easy to perform Cypress performance test with minimum code changes. A well-optimized website helps build a good user experience and definitely impacts search engine rankings.