Performance Testing with Cypress, Lighthouse and k6

Marie Drake

Quality Engineering Manager @ Zoopla

@mcruzdrake | mariedrake.com

Nicole van der Hoeven

Developer Advocate @ k6

@n_vanderhoeven | nicolevdh.com

Why care for performance?

@mcruzdrake

@n_vanderhoeven

@mcruzdrake

@n_vanderhoeven

@mcruzdrake

@n_vanderhoeven

@mcruzdrake

@n_vanderhoeven

We use technology on a daily basis and have been accustomed to instant gratification.

@mcruzdrake

@n_vanderhoeven

“While customers will forgive and forget the odd bug, crash, or period of site maintenance, they will not tolerate a site that doesn't move at the speed they’ve become accustomed to.”

- Dr. John Bates, CEO, Eggplant from Slow Websites Are Silent Killers for Businesses

@mcruzdrake

@n_vanderhoeven

Performance Testing

Front End/Client Side

Back End/Server Side

@mcruzdrake

@n_vanderhoeven

Google Lighthouse

@mcruzdrake

@n_vanderhoeven

http://nicole.com.ph/

@mcruzdrake

@n_vanderhoeven

Key metrics to know

1. First Contentful Paint

2. Large Contentful Paint

3. Speed Index

4. Time to Interactive

5. Total Blocking Time

6. Cumulative Layout Shift

@mcruzdrake

@n_vanderhoeven

Ways to run Lighthouse tests

1. Chrome Dev Tools (Lighthouse tab)

2. Browser extension

3. https://web.dev/measure/

4. Lighthouse CLI

5. cypress-audit plugin

@mcruzdrake

@n_vanderhoeven

https://www.npmjs.com/package/cypress-audit

@mcruzdrake

@n_vanderhoeven

Time for some live demo! 😱

https://github.com/mdcruz/performance-testing-cypress

@mcruzdrake

@n_vanderhoeven

https://www.mariedrake.com/post/web-performance-testing-with-google-lighthouse

Useful Links

https://github.com/mfrachet/cypress-audit

https://github.com/GoogleChrome/lighthouse

https://github.com/GoogleChrome/lighthouse/blob/master/docs/emulation.md