Skip to content
UX Atlas
Plate FND·054 · UI foundationGrid C2 · Rev. 2026-08-14

Performance as User Experience

Speed is a usability property, and the metrics that matter are the ones measured on real devices.

UI foundationEstablished researchIntermediate

Definition

Performance determines whether an interface feels responsive. Core Web Vitals measure three aspects of that experience: loading, interactivity and visual stability, as experienced by real users rather than in a lab.

Established research. Originates in published research and has been replicated. The effect is real. Its size in your product still needs measuring.

On this plate
  1. 1Definition
  2. 2Core Web Vitals thresholds
  3. 3Design decisions that dominate these numbers
  4. 4Design decisions that move the numbers
  5. 5In practice
  6. 6Local chart
  7. 7Sources
  8. 8Continue from here

Reach for this when

  • Any web product.
  • Prioritising performance work against features.
  • Reviewing third-party script additions.
  • A page is measurably slow, or feels slow despite acceptable measurements.

Common mistakes

  • Optimising lab scores rather than field data.
  • Unreserved image and embed space.
  • Lazy loading the hero image.
  • Third-party scripts added without measuring the cost.

Core Web Vitals thresholds

Measured at the 75th percentile of real user experiences.

MetricMeasuresGood
LCP, Largest Contentful PaintWhen the main content appearsUnder 2.5 seconds
INP, Interaction to Next PaintResponsiveness to input across the visitUnder 200 milliseconds
CLS, Cumulative Layout ShiftUnexpected movement of contentUnder 0.1

Design decisions that dominate these numbers

  • Hero image size and loading strategy, which usually determines LCP.
  • Web font loading, which delays text rendering and can shift layout.
  • Reserved space for images, ads and embeds, which is the main lever on CLS.
  • Amount of client-side JavaScript, which drives INP.
  • Third-party scripts, which are frequently the largest single cost and the least examined.

Design decisions that move the numbers

Do

  • Reserve space for anything that loads late, including images, embeds and injected banners.
  • Set the hero image to load eagerly and everything below the fold lazily.
  • Ship fewer webfont weights, and subset them.
  • Respond to input immediately, even when the work behind it is slow.

Do not

  • Insert a cookie banner or promotion above content after first paint.
  • Load a carousel library for three static images.
  • Animate layout properties on scroll, which forces repeated reflow.
  • Judge performance on a fast laptop and a wired connection.

In practice

  1. i.

    The banner that moved the page

    Layout shift

    A consent notice injected after first paint pushed the content down by ninety pixels, and readers who had started to tap hit the wrong thing. Reserving its height removed a measurable shift and a category of mis-taps.

  2. ii.

    Perceived speed and actual speed

    Two different problems

    An operation that takes two seconds and acknowledges the tap in fifty milliseconds is experienced as faster than one that takes one second in silence. Both numbers are worth improving, and only one of them is visible in a profiler.

Local chart

FND·054 · Region II · Grid C2

This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.

Infinite Scroll and PaginationPAT·021 · APPLIED THROUGHLoading StatesPAT·011 · APPLIED THROUGHOptimistic UIPAT·013 · APPLIED THROUGHSkeleton ScreensPAT·012 · APPLIED THROUGHDoherty ThresholdLAW·006 · PRINCIPLES BEHIND THISFramerTOOL·004 · OFTEN USED WITHLighthouseTOOL·031 · OFTEN USED WITHWebPageTestTOOL·032 · OFTEN USED WITHMobile UX ChecklistCHK·003 · CHECK YOUR WORKPre-Launch ChecklistCHK·009 · CHECK YOUR WORKWeb UX ChecklistCHK·011 · CHECK YOUR WORKAbove the FoldTERM·046 · SHORT DEFINITION

Sources

Where a source establishes something narrower than the popular reading of it, the note says so.

  1. [1]

    Core Web Vitals

    web.dev, Google

  2. [2]

Continue from here

Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.

Applied through

Where this shows up as a concrete interface decision.

Principles behind this

The reasoning this solution is an application of.

Often used with

These usually appear in the same screen or the same decision.

Check your work

Review passes that test whether this was done properly.

Short definition

The one-paragraph version, for when that is all you need.

Related concept

Connected closely enough to change how you apply this.