In short: Core Web Vitals measure three dimensions of real experience: the display of main content with LCP, responsiveness to interactions with INP and visual stability with CLS. They are improved by treating their causes on each template, not by pursuing an isolated score.
A site can seem fast on the developer's computer and remain painful on a common phone. Actual conditions vary: network, device power, cache, consent, third-party scripts, and content viewed. Performance must therefore combine laboratory diagnosis and field data.
The current recommended thresholds qualify an experiment as "good" when, at the 75th percentile, the LCP is less than or equal to 2.5 seconds, the INP at 200 milliseconds and the CLS at 0.1. These are benchmarks, not a reason to degrade content or accessibility.
LCP: make the main content visible
The Largest Contentful Paint usually corresponds to the hero image, the title or a large block of text. To improve it, start by identifying the exact element rather than applying generic optimizations.
Frequent causes are a slow server, a redirect chain, an image that is too heavy, a resource discovered late, a blocking style sheet or main content injected after several JavaScript calls.
Priority actions may include:
-
reduce response time and use an adapted cache;
-
serve the image with useful dimensions in a modern format;
-
do not lazily load the LCP image;
-
discover the main resource early;
-
limit the dependencies necessary for the first rendering;
-
make the content important in the initial HTML.
A quality image does not need to weigh several megabytes. The right compromise depends on its details, display size and format chosen.
INP: respond quickly to interactions
Interaction to Next Paint observes the latency of clicks, keys, and interactions during the visit. A bad INP often comes from long JavaScript tasks that occupy the main thread, React renderings that are too wide, or synchronous processing triggered by an action.
Measure which interaction is problematic. A menu can be fluid while a catalog filter or editor becomes slow. Cut tasks, reduce work by event, avoid unnecessary recalculations and give immediate feedback when the server operation takes time.
Initial loading and responsiveness are linked: too much JavaScript downloaded, analyzed and then executed leaves fewer resources to interactions. Interactive components must be justified by use.
CLS: preserve visual stability
Cumulative Layout Shift measures unexpected movements. A button that goes down when the user wants to touch it creates a concrete error, even if the page is visually elegant.
Reserve the dimensions of images, videos, ads and embedded content. Use fonts with a consistent loading strategy and avoid inserting a banner on top of the content already displayed. Animations must use properties that do not recalculate the entire layout when possible.
Consent, error messages and asynchronous results are cases to be tested. Their appearance should not mask the action in progress or abruptly move the interface.
Laboratory measurement and field data
Lighthouse and development tools reproduce a controlled visit and provide diagnostics. They are valuable for identifying an image, a script or a long task. However, a single execution remains a sample.
Field data aggregate real experiences over a period of time. They reflect the diversity of devices and networks, but may be missing for a new page or a little visited site. Analyze the two without mixing their scales.
The documentation Core Web Vitals by web.dev explains the metrics, thresholds and the use of the 75th percentile.
Audit by template and by course
An overall average masks the differences. Select representative pages:
-
homepage with a large hero image;
-
long service page;
-
article with visual;
-
product sheet and filterable list;
-
form;
-
connected space.
Also test the states: first visit without cache, consent accepted or refused, validation error, mobile menu open and third-party content loaded.
Optimize images without making them mediocre
Generate multiple sizes when the component varies greatly by screen. Reserve the width and height. Use srcset or an image component capable of selecting a suitable resource. Lazyly load off-screen images, but prioritize the one that is the main content.
The alternative text is not used for performance, but must remain present during a component redesign. Optimization should not erase accessibility or blur the visual on high-density screens.
Mastering fonts
Limit families, fats and subsets. Host them in a controlled way when it matches the project, preload only the really critical resources and choose a suitable display behavior.
A backup font with very different metrics can cause shifts. Adjust the stack and test the rendering before and after loading, especially on long titles on mobile.
Reduce JavaScript cost
The best script is sometimes the one that is not sent. Favor server or static rendering for the content, then hydrate only the necessary interactions. Load third-party widgets after consent and when their value becomes real.
Scan bundles, import in a targeted manner, and remove unused dependencies. For a complex interface, observe the renders and virtualize the lists only if the volume justifies it.
Process third-party services
Analytics, advertising, chat, video and maps can weigh more than the app. Document their owner, their purpose, their triggering and their impact. A tag added by a tag manager must pass the same acceptance testing as a code change.
The refusal of consent must leave the main course functional. Acceptance must not make the site unusable. Compare these two states during the tests.
Do not sacrifice content to a score
Removing decisive information to earn a few points can reduce the conversion. Conversely, a very heavy decorative video can be replaced without loss. Each arbitration links technical cost and user value.
The steps of a successful site creation integrate the performance from the scoping. The technical SEO audit then verifies indexability, metadata and rendering in parallel.
Install a budget and monitoring
Set budgets by template: image weight, initial JavaScript, number of queries or metric threshold. Automate controls that detect significant regression in the delivery chain.
After publishing, track field metrics, errors, and conversions. Degradation can come from new content, a marketing script or a change in infrastructure. The goal is to spot it before it becomes the new norm.
BlackStone Digital designs fast and maintainable websites and can prioritize the causes that really affect your journeys. For analysis, indicate the most important pages and actions, not just a score obtained on the home page.
