MayaLogic
Frontend

Web performance: the five metrics that pay back

Most performance budgets get ignored because they are too long. Here are the five numbers we hold ourselves to, and why each one matters.

MayaLogic Admin · MayaLogic Editorial

3 min read

Web performance: the five metrics that pay back

Performance budgets fail when they are too long. A spreadsheet with thirty metrics gets ignored by week three. The teams that ship fast websites hold themselves to a small set of numbers that everyone on the team can recite from memory.

These are the five we use.

1. Largest Contentful Paint (LCP) under 2.0s on a mid-tier device

LCP measures when the largest meaningful element renders. Below 2.5s is Google's "good" threshold; we hold ourselves to 2.0s because the user-perceived ceiling is closer to that. The two biggest wins are right-sized hero images and a server that responds quickly to the document request.

2. Interaction to Next Paint (INP) under 200ms

INP replaced FID as the responsiveness metric in 2024. The single biggest cause of poor INP scores is long-running JavaScript on the main thread — usually a third-party tag or a poorly-shipped React component. Audit your scripts and your hydration boundaries.

3. Cumulative Layout Shift (CLS) under 0.05

CLS is the cheapest metric to fix and the most jarring to users. Reserve space for every image and embed. Render the layout before the data when you can. Never load fonts without size-adjust and font-display: swap.

4. Total JavaScript transferred under 170KB compressed

This is the budget that matters most for long-tail devices and slow networks. Most teams blow it on a single large dependency, often a date library, an icon set imported in full, or a state management library that was never necessary. Bundle analyzers are free; run one on every release.

5. Time to First Byte (TTFB) under 200ms from the user's region

TTFB is your server's responsibility. If you are above 200ms, the answer is almost always edge caching for unauthenticated routes, or moving compute closer to users for authenticated ones. There is no JavaScript fix.

Hold the line in CI

Every one of these numbers can be measured in CI. Lighthouse-CI for synthetic checks, real-user monitoring for the production picture, and a hard fail on regressions in the budget. If the numbers can regress silently, they will.

After the technical detail

Talk to an engineer about this.

If this maps to a system you are building, we can help pressure-test the architecture, estimate the trade-offs, and identify the riskiest assumptions before you commit.

Book a technical call

Get the checklist for frontend.

Request the PDF guide, architecture template, or implementation checklist and we will send the most relevant resource when it is available.

Author credibility

MayaLogic Admin

MayaLogic Editorial

The MayaLogic editorial team — senior engineers and consultants sharing what we have learned from building software for ambitious teams.

Production deliveryArchitecture reviewOperational ownership

Engineering support

Apply this thinking to your own roadmap.

Bring us the constraints, legacy behavior, and delivery pressure. We will help shape the technical plan.

Newsletter

Want more notes like this?

Get occasional field notes on architecture, AI in production, cloud economics, and resilient delivery.