performance-web

Core Web Vitals: improve performance while preserving design

A new section increases JavaScript and changes the mobile experience without attracting attention on the development computer. Later, the response is pressure to remove the visual identity for a score.

A new section increases JavaScript and changes the mobile experience without attracting attention on the development computer. Later, the response is pressure to remove the visual identity for a score. A performance budget supports decisions earlier: which work must load, when and at what interaction cost?

Separate three questions

LCP concerns the largest visible content, INP interaction responsiveness and CLS unexpected layout movement. These measures do not replace readability, accessibility or a working form. A laboratory result is not a field measurement of every visitor's INP.

web.dev explains complementary roles for field data and investigation tools. When comparing versions, keep page, profile and conditions consistent, record samples and retain slower runs. State explicitly when field data is unavailable.

Evaluate visual resources within limits

ResourceOption to investigate
Opening imageAppropriate dimensions, format and priority
Decorative textureLightweight CSS or SVG where suitable
Interactive demonstrationUseful initial content and scoped code
Lower-page mediaReserved proportions and later loading
AnimationFinite feedback and reduced-motion support

These are design decisions rather than universal rules. A small illustration may cost less than many complex elements; elsewhere CSS is enough. Measure the actual resource before changing technology.

Establish a regression routine

Select commercial pages and important interaction tasks. Script transfer, request count and layout behaviour can support diagnosis. Compare after meaningful changes alongside keyboard, touch and submission checks. Better LCP does not compensate for a broken action.

In a hypothetical improvement, the composition stays intact while footer media loads later and an embedded player stops blocking initial information. Its effect must be measured under the same conditions; smaller-looking code is not proof of a gain.

Include optimisation in engineering scope

My modernisation service can investigate dependencies, resources and rendering. A new website can establish limits from the start. Preserve identity and use criteria while documenting what was measured and what remains uncertain.

List priority pages and indispensable interactions. This creates a performance budget supporting future decisions without turning an isolated score into a sales or ranking promise.

Sources and further reading

About the author and editorial process

Rafael de Sanzio Nonato develops websites, web applications and integrations independently. Scope and responsibilities are agreed for each engagement.

Prepared with AI assistance. Examples are hypothetical unless explicitly documented. Publication is subject to the author's editorial approval.

Approach and responsibilities →

Create a performance budget for your front end

Bring priority pages and interactions worth preserving. I can measure bottlenecks and define resource limits with regression checks.

Create a performance budget for your front end ↗