2 Awesome Tools to Automate Client-side Performance Testing | by Eldad Uzman | Mar, 2022

A have a look at lighthouse and playwright

As functions are getting extra advanced and testing efforts is over-extended, automating our testing pipelines is paramount.

On this article, I’ll show how you should utilize 2 superior instruments to shortly cowl a number of check realms with ease.

Googles’ lighthouse is an open-source web site high quality evaluation device.
It’s based mostly on googles’ web-vitals tips and it measures 5 high quality elements:

1: efficiency

This issue has 3 aspects:

  • Largest Contentful Paint (LCP): measures loading efficiency. To supply a superb consumer expertise, LCP ought to happen inside 2.5 seconds of when the web page first begins loading.
  • First Input Delay (FID): measures interactivity. To supply a superb consumer expertise, pages ought to have a FID of 100 milliseconds or much less.
  • Cumulative Layout Shift (CLS): measures visible stability. To supply a superb consumer expertise, pages ought to keep a CLS of 0.1. or much less.

2: Accessibility

I’ve already elaborated on accessibility and its significance in up to date software program improvement here.
Basically, lighthouse lints to enhance websites accessibility in accordance with its web accessibility vitals.

3: Finest Practices

This would offer net builders with alternatives to enhance the standard of their code.

4: Search Engine Optimization (search engine optimisation)

Optimizes search engine outcomes

5: Progressive Net App (PWA)

Preserve your web site updated with trendy applied sciences.

Every one among these 5 elements will generate a rating from 0 to 100, and the result is an in depth report concerning the issues discovered and the alternatives to repair them.

You’ll be able to run Lighthouse in 4 most important methods:

  1. From chrome dev instruments
  2. On-line
  3. From cli
  4. As a node package deal

Lets concentrate on the node package deal choice 🙂

first, we have to set up lighthouse package deal from NPM

More Posts