Chapter 15: Performance and cost

So far this has mostly been about servers. In a browser, Google has put numbers on what a person feels.

Core Web Vitals

Also called LCP, INP, CLS

Three scores for how a page feels. LCP: how soon the main content appears. INP: how soon the page responds when you tap. CLS: how much things jump around. Good means LCP within 2.5 seconds, INP within 200 ms and CLS at 0.1 or less.

An agent can't feel a page. It sees that the tests pass, and it may never load the page on a slow phone. These numbers put what a person feels into a form it can read and act on, and be held to. A fast laptop on good wifi will flatter all three, so look at what real visitors got.

Say it to your agent

“Add the web-vitals library and send LCP, INP and CLS to our analytics on every page view. In the CI Lighthouse run, fail if CLS is over 0.1 on / or /pricing. Give every image width and height, and don't insert anything above existing content after load.”

The workshop

Name a word, or describe what you mean in everyday language.