Website speed and Core Web Vitals: measure and improve LCP, INP and CLS

Start with the experience you want to create

Choose an important task and describe what a smooth version looks like. On a product page, the title, price and main image should help someone understand the item promptly. A filter should give a clear response to a selection. A booking button should stay in a predictable position while the page presents supporting information.

Record the exact page, device, connection and action you want to study. The same product can serve a desktop researcher and a mobile buyer, so examine the relevant journeys separately. For useful comparisons, keep first or repeat visits, cache, account state and consent conditions consistent. These details turn a broad goal into an experience you can reproduce.

Follow the journey from server to screen

The browser receives a response, reads HTML and discovers stylesheets, JavaScript, fonts and images. It retrieves those resources and builds the presentation. Resources discovered early can start their journey sooner, while dependencies establish the order for other work. The server response, resource delivery and rendering all contribute to the moment useful content appears.

After loading, event handlers, scripts and rendering continue to share processing time. Keeping tasks focused gives the browser opportunities to respond to input and show the next update. Reserving space for content supports a stable layout as resources arrive. This model connects each design choice to server work, delivery, client processing or presentation.

Read three signals of user experience

The Core Web Vitals describe important aspects of this experience. The Web Vitals guidance gives the following good reference boundaries. For real-user evaluation, assess the 75th percentile and consider mobile and desktop separately.

Lighthouse provides a laboratory run for diagnosis. CrUX aggregates eligible real-user experiences when enough data is available. As PageSpeed Insights explains, these sources describe different conditions. Check whether field data applies to the exact page or an entire origin. A lab test helps you study a page under repeatable conditions; field data adds the experience of a broader visitor population.

Bring important content into view early

Identify the LCP element and follow how it reaches the screen. For an image, inspect the request start and transfer size. Make the resource discoverable early, choose suitable dimensions and formats, and load the important first-screen image promptly. Request timing and file size together shape when that image becomes visible.

Study the initial server response, including database work and caching opportunities. Then examine rendering styles, fonts and dependencies in the page's loading sequence. The LCP optimization guide divides this journey into useful phases. Images outside the first screen can load later when appropriate; reserve their space and check how they appear as someone scrolls.

Create responsive interactions and a steady layout

Record an important filter or menu interaction and examine the work that produces the next visible update. Keep event handlers focused, organize updates efficiently and split long work into manageable tasks. When an action takes time, a clear progress state helps someone understand the next step.

The INP optimization guide explains input delay, processing and presentation. Total blocking time provides an additional laboratory diagnostic with its own meaning. For layout stability, reserve dimensions for images, videos, banners and embeds. Plan font changes and notices so that people can keep reading and selecting the intended element comfortably.

Compare the experience before and after

1. Save the URL, device, time, consent state and the task you are studying.
2. Record the metric and its supporting detail, such as the LCP element or an interaction trace.
3. Make a coherent change to the relevant image, script or layout component.
4. Repeat several laboratory runs under comparable conditions and read the overall pattern.
5. Walk through the main task on the relevant screen sizes and account states.
6. Return to field data as its collection period includes more visits after the change.

Review the complete experience alongside the measurement. Preserve image readability and confirm where a deferred script supports other pages. Document the baseline, component and change so a colleague can understand the result. This practical record makes the next round of improvements easier to plan.

Put the lesson into practice

Sitelemetry's performance audit, part of the paid plans from $49 a month, uses Google PageSpeed Insights, so it reports Lighthouse lab results and, where available, Chrome UX Report field data for LCP, INP, CLS, FCP and TTFB, on mobile by default. Choose an important mobile journey, connect a measurement to its image, script or layout component, and compare the same experience after an improvement. Keep the user task alongside the numbers.