Our attention span has decreased over time. Online, if a page loads slowly, people are quick to go to a competitor’s site. They have no patience for slow websites. Businesses that fail to realize this can lose a lot of money after racking up negative reviews from customers.
As testers, we need to make sure that our users’ experience is positive. It’s not enough to test that requirements function as intended. We need to ensure that performance and user experience are not affected. And we cannot leave any of this for a later stage.
Performance testing is often done two ways: on the back end, and on the front end. You need to test that the servers can handle the load when multiple requests are sent from users simultaneously. If they can’t, users will get the dreaded 503 error. You can anticipate how your servers will respond using load-testing tools such as JMeter, K6, or Gatling.
With front-end performance testing, servers might send the response back within the expected time, but this doesn’t necessarily mean that your users will see the response instantly. The way different browsers process payload data from servers also has an impact on performance. JavaScript makes websites interactive and fully functional, but it can also add drag, especially if it’s not optimized and blocks content from being rendered completely. The same is true of cascading style sheets.
Back-end testing also has a lot of tools to help you test the performance of your website. One of the most popular is Google Lighthouse, which you can use as an extension for Cypress, a JavaScript-based, end-to-end tool to test web page performance.
Here's how to put the combination to work for better performance testing.
Google Lighthouse
Open-source Google Lighthouse lets you audit other areas besides performance, including accessibility and search engine optimization. Lighthouse is easy to use: You don’t need additional technical skills to start auditing the performance of your website. You can run Lighthouse in multiple ways, but the most straightforward is as part of Chrome Developer Tools, since that’s built in. Just open up Developer Tools, click the Lighthouse tab, and start the audit. The images below show Google Lighthouse in action.
Google Lighthouse running on the Airbnb website. Click image to enlarge.
Google Lighthouse scores measuring performance, accessibility, best practices, and SEO on the Airbnb website. Click image to enlarge.
When Lighthouse finishes running the audits, it calculates a set of scores based on checking metrics such as “first contentful paint,” “largest contentful paint,” and “time to interact.” The article “Lighthouse Performance Scoring” provides a good explanation of how it calculates the score and what the various metrics mean.
To get the most benefit from Lighthouse, integrate it early in your development and testing pipelines. Once you and your team have decided the performance thresholds to operate, it will be possible to detect which code changes have contributed to changes in your performance scores.
Cypress and Google Lighthouse
One way to run Google Lighthouse is to use the command-line interface, which can give you and your team more flexibility. Another option is to use the custom plugin cypress-audit to extend Cypress to cover web page performance.
Yes, you can extend Cypress to cover web page performance. Cypress is arguably one of the most popular testing frameworks out there, and one of the things I like about it is its ability to cover other types of testing easily. I have used Cypress to test UI functionality, make requests to API endpoints, and test for accessibility and visual aspects with its range of available plugins and integrations. So when I found out that there was a plugin to integrate Google Lighthouse with Cypress, I decided to give it a try.
The plugin, created by Marvin Frachet, lets you leverage the existing Cypress tests you have and introduces additional commands to check the performance of any pages you want.
It’s a relatively new plugin, but its NPM weekly downloads show that many engineers are adopting it.
Here is what a simple test can look like:
Lighthouse audit direct from Cypress. Click image to enlarge.
By default, if you don't provide any arguments to the cy.lighthouse command, the test will fail if any of the default categories from Lighthouse have a reported score of less than 100.
Once the test has finished, you should see a log displaying any categories that were less than the default threshold. Here’s an example test run:
Example test run using the cypress-audit plugin. Click image to enlarge.
How to get started
To begin, simply install Cypress and cypress-audit and give them a try. My blog post on “Web Performance Testing with Google Lighthouse” will take you through how to install the packages you need as well as an example GitHub repository that you can clone.
Performance testing, both back-end and front-end, can provide massive benefits. With the abundance of performance testing tools out there, you can integrate performance testing earlier. Google Lighthouse provides a way to measure key metrics to track the performance of your websites, and Cypress makes it easier to test for performance.
Want to know more about Google Lighthouse and cypress-audit? Come to my talk on “Performance Testing using Cypress.io” at Automation Guild 2021 for a live demonstration on how to setup and run cypress-audit into your Cypress projects. The online conference runs om Feb 8-10, 2021.
Keep learning
Take a deep dive into the state of quality with TechBeacon's Guide. Plus: Download the free World Quality Report 2022-23.
Put performance engineering into practice with these top 10 performance engineering techniques that work.
Find to tools you need with TechBeacon's Buyer's Guide for Selecting Software Test Automation Tools.
Discover best practices for reducing software defects with TechBeacon's Guide.
- Take your testing career to the next level. TechBeacon's Careers Topic Center provides expert advice to prepare you for your next move.
