What are Core Web Vitals and why are they important?

Core Web Vitals is a set of metrics created by Google that objectively measure key aspects of a website's user experience. They focus on three main areas: the loading speed of key page elements, the fluidity and responsiveness of interactions, and the visual stability of the layout.

The importance of Core Web Vitals stems from their direct impact on user experience (UX) . Websites that meet the recommended values ​​for these metrics provide users with a comfortable, seamless, and intuitive user experience. This increases the likelihood that users will stay on the site longer, take advantage of the offer, or return in the future.

Additionally, Core Web Vitals are important because, as of 2021, they are a factor in a website's ranking in Google search . Websites that offer a better user experience have the potential to achieve higher rankings in search results, which translates into increased traffic and visibility online.

Definition and Role in User Experience Assessment

We define Core Web Vitals as fundamental metrics of page quality that translate subjective user experience into measurable values. They provide a precise understanding of how a page performs in real-world conditions: how quickly users see the main content, how well the page responds to interactions, and whether its layout remains stable while loading.

The role of Core Web Vitals is to enable website owners and design teams to diagnose and improve aspects of website performance that directly impact user satisfaction . These metrics are based on data collected during actual website use ( field data ), providing reliable information about the website's experience in practice, regardless of device type or internet connection quality.

With Core Web Vitals, UX teams, developers, and SEO specialists can focus on optimizing the page elements that matter most to the user.

Relationship to Page Experience and Google Ranking Factors

Core Web Vitals are an integral part of Google's ranking signal called Page Experience . Page Experience is a set of criteria that assesses how user-friendly a website is. In addition to Core Web Vitals, it also considers elements such as browsing safety (e.g., freedom from malware), HTTPS compliance, lack of intrusive interstitials, and mobile-friendliness.

Since mid-2021, Core Web Vitals have officially been incorporated into Google's search engine algorithm as a ranking factor . This means that sites that meet these metrics' recommendations can gain an advantage in search results, especially when competing sites have similar content quality.

It's worth emphasizing, however, that Core Web Vitals aren't the only factor that determines a page's ranking. Content, its value to the user, and its relevance to search intent remain crucial. Core Web Vitals, however, are an important complement to SEO and SXO optimization strategies because they connect technical aspects with the actual user experience.

The three main metrics of Core Web Vitals

Core Web Vitals are based on three fundamental metrics that measure key aspects of a website's user experience. Each metric focuses on a different dimension of user experience: content display speed , responsiveness during interaction , and visual stability of the page layout . Google chose these metrics because they have the greatest impact on the everyday user experience.

Each metric is discussed below, along with its meaning and range of optimal values.

Largest Contentful Paint (LCP): Content Loading Speed

Largest Contentful Paint (LCP) measures the time it takes from the start of a page loading until the largest visible piece of content (e.g., the main image, video, or block of text) is fully rendered in the browser window. LCP reflects how quickly a user can begin engaging with the main content of the page.

The optimal LCP value is within 2.5 seconds of the page starting to load. Anything above 4 seconds indicates a poor user experience.

LCP is influenced by factors such as server response time, resource download speed (images, CSS styles), JavaScript performance, and page rendering. LCP optimization focuses on accelerating the loading of the largest and most important elements visible above the fold.

Interaction to Next Paint (INP): website responsiveness

Interaction to Next Paint (INP) is a metric used to assess a website's responsiveness , or how quickly a website responds to user actions such as clicks, taps, or keystrokes. INP measures the time it takes from the moment of interaction to the next page rendering ( next paint ), which reflects the visual response to that interaction.

INP is calculated as one of the highest latencies among all page interactions during a user's visit, making this metric a better indicator of the actual smoothness and consistency of responsiveness than the previous metric (FID – First Input Delay).

The recommended INP value is below 200 ms . Results above 500 ms indicate a poor user experience.

INP allows you to identify problems such as blocking scripts, main thread overload, or suboptimal DOM operations that slow down the website's response to user actions.

Cumulative Layout Shift (CLS): Visual Layout Stability

Cumulative Layout Shift (CLS) measures the cumulative level of unexpected shifting of elements on a page during loading or interaction. A high CLS means that page elements (e.g., images, buttons, blocks of text) change position in a way that may distract the user, lead to accidental clicks, or impede content consumption.

CLS is a dimensionless value that describes the sum of all individual system shifts. Google recommends keeping CLS below 0.1 . Scores above 0.25 indicate poor system stability.

The most common causes of high CLS include: images and multimedia elements not having the specified dimensions, dynamically loaded fonts, ads, or external components that change the page layout after it loads.

Core Web Vitals Metric Changes from 2024

Core Web Vitals is a set of metrics that Google continually develops and adapts to evolving web standards, front-end technologies, and users' growing expectations for website quality. The goal of these metrics is not only to provide an objective assessment of user experience (UX) but also to encourage website owners to implement practices that lead to faster, more stable, and user-friendly websites.

In 2024, Google implemented a significant update to Core Web Vitals , which was a response to years of analysis of real-world user data and the need to better reflect the actual user experience. The most significant change was replacing First Input Delay (FID) with Interaction to Next Paint (INP) as the default metric for assessing page interactivity. This change was intended to provide a more accurate measurement of the smoothness and consistency of user interactions across all stages of a page's visit, not just the first action.

Furthermore, in 2024, the importance of auxiliary metrics such as Total Blocking Time (TBT), Time to First Byte (TTFB), and First Contentful Paint (FCP) increased. Although not directly considered as primary ranking metrics, they have become key analytical tools supporting Core Web Vitals optimization. Google, providing tools such as Lighthouse, PageSpeed ​​Insights, and Chrome User Experience Report (CrUX), increasingly emphasizes the role of these metrics in diagnosing the causes of performance issues and identifying areas for improvement.

These changes signal the evolution of Core Web Vitals: from simple, single metrics toward a more comprehensive and realistic view of user experience , taking into account the entire spectrum of interactions and the various factors that influence a website's experience. For website owners, this means a more comprehensive approach to optimization that combines improvements in load time, layout stability, and responsiveness, both at the code and server infrastructure levels.

Replacing FID with INP as the interactivity metric

Until 2024, Core Web Vitals used First Input Delay (FID) as the primary metric for measuring page interactivity. FID only assessed the delay when a user first interacts with a page, measuring the time from the moment an action is performed (e.g., a click) to the browser's processing of that event.

As of March 2024, Interaction to Next Paint (INP) has officially replaced FID as the Core Web Vitals metric for interactivity. INP is more precise because it considers all user interactions during a page visit , not just the first one. It measures the total time it takes to complete an event handling and render a visual response (the next "paint"). This better reflects the user's actual experience of smooth action handling.

This change means that optimizing page interactivity requires a broader approach – focusing not just on the first impression, but on the entire path of a user's interaction with the site.

The importance of auxiliary metrics: TBT, TTFB, and FCP

While Core Web Vitals are based on three main metrics, Google and the web performance community emphasize so-called secondary metrics that help diagnose issues affecting LCP, INP, and CLS. Among the most important are:

• Total Blocking Time (TBT) – Measures the total time the browser's main thread is blocked and unable to respond to user actions. TBT is a key metric in lab analyses (e.g., in Lighthouse) because it strongly correlates with INP results and helps identify the causes of poor responsiveness.
• Time to First Byte (TTFB) – This determines the time from sending a request to the server until the browser receives the first byte of the response. TTFB helps evaluate server performance and the speed of communication with the backend – it has a direct impact on LCP.
• First Contentful Paint (FCP) – Measures the time it takes for a browser to display the first piece of content (e.g., text or an image). While not a core Core Web Vitals metric, FCP is an important indicator of the initial user experience and can signal performance issues with page rendering.

While these secondary metrics aren't directly factored into Google's ranking algorithm, they are essential diagnostic tools in the Core Web Vitals optimization process. They help identify the source of problems and allow you to more effectively improve your key metrics.

Core Web Vitals measurement and analysis tools

Core Web Vitals optimization is a process that requires continuous monitoring of page quality across various conditions, devices, and every stage of the website lifecycle—from design and implementation to daily operation. Core Web Vitals metrics like LCP, INP, and CLS alone provide insight into the end result experienced by the user, but to improve it, it's essential to understand the root causes of issues and areas requiring optimization.

Therefore, it is necessary to use a variety of diagnostic tools that provide data from two main sources:

• Lab data – obtained during tests conducted under controlled conditions. This data allows us to simulate website performance on different devices and at different connection speeds, which is especially useful when developing and testing new features.
• Field data – derived from actual user visits to the site. This data is collected in natural conditions (e.g., via the Chrome User Experience Report) and shows how the site actually performs "in the field," on devices with different parameters and in different locations.

Google and the web performance provide a wide range of tools that support SEO and UX specialists, as well as developers, in their daily work on website quality. These tools vary in data scope, test configuration options, and analysis sophistication. Below are the most important ones—from Google solutions to popular third-party platforms and developer tools.

PageSpeed ​​Insights: Lab and Real-World Data

PageSpeed ​​Insights (PSI) is one of Google's most widely used tools for analyzing website performance and diagnosing Core Web Vitals issues. Its greatest advantage is the combination of lab data (obtained under simulated conditions using the Lighthouse engine) and real-world data (sourced from the Chrome User Experience Report, i.e., actual Chrome users).

What does PageSpeed ​​Insights measure?

PageSpeed ​​Insights generates a report that includes:

• Core Web Vitals core metrics results: Largest Contentful Paint (LCP) , Interaction to Next Paint (INP) , Cumulative Layout Shift (CLS) .
• Supporting metric values: First Contentful Paint (FCP) , Total Blocking Time (TBT) , Speed ​​Index or Time to Interactive (TTI) .
• A detailed list of issues affecting performance, such as:
  – too large uncompressed images,
  – no lazy loading for graphic elements,
  – unused CSS/JavaScript code,
  – lack of effective resource caching,
  – too long server response time (TTFB).

Laboratory data vs. real-world data

By integrating laboratory and real-world data, PSI enables a comprehensive site assessment:

• Lab data shows how a website performs under controlled conditions (simulated 3G/4G network, mid-range device, no random external factors). It's essential during the development and testing phases of changes, as it allows for immediate verification of the performance impact of changes.
• Field data shows how a website performs in practice, for real users—on different devices, systems, with different connections, and in different locations. This data allows us to detect issues that might not be apparent in a lab environment, such as slow performance on older smartphones or with slower mobile internet speeds.

PageSpeed ​​Insights Use Cases

• Diagnosing Core Web Vitals issues – e.g., detecting that high LCP is due to a lack of image optimization or too many CSS assets.
• Website version comparison – checking how code changes affect performance before and after implementation (e.g. after implementing lazy loading or introducing a CDN).
• Monitoring trends – regular use of PSI allows you to track changes over time and respond to emerging issues before they negatively impact your website ranking.
• Team collaboration – PSI reports form the basis for communication between developers, SEO specialists, UX specialists, and project managers, as they clearly identify the sources of problems and suggest specific corrective actions.

Why is PageSpeed ​​Insights a key tool?

PageSpeed ​​Insights is recommended by both Google and the SEO and web performance community because:

• The data from PSI is consistent with what Google's ranking algorithm takes into account in the context of Core Web Vitals.
• The tool is free and available online, without the need to install additional components.
• Results and recommendations are tailored to different audiences – from developers to website managers who don't need to be technically savvy.

Google Search Console: Monitoring Site-Level Metrics

Google Search Console (GSC) is a tool offered by Google that allows website owners to monitor their website's visibility in search results and track its technical health. One of its key features for website performance is the Core Web Vitals report , which presents data on the quality of the user experience based on actual website visits.

How does the Core Web Vitals report work in Google Search Console?

The Core Web Metrics report is based on data from the Chrome User Experience Report (CrUX) , which is a composite of real-world Chrome users who visit a given website. This data is aggregated and presented in a real-world format, allowing you to assess how a website performs in practice, across devices (mobile and desktop) and under various network conditions.

Results are grouped into similar URLs and presented separately for the mobile and desktop of a site. GSC categorizes URLs as:

• Good – meets Google recommendations for all three major Core Web Vitals metrics (LCP, INP, CLS).
• Needing improvement – ​​which deviate slightly from optimal values.
• Poor – which deviate significantly from the recommended quality thresholds.

Thanks to this, the report allows you to quickly locate groups of pages that require optimization intervention.

What information does the report contain?

The Core Web Vitals report in Google Search Console shows:

• A list of issues affecting Core Web Vitals – for example: “LCP exceeds 2.5 seconds on mobile devices” or “High CLS on desktop pages.”
• Number and grouping of affected URLs – GSC automatically groups URLs with similar performance patterns.
• Change history – charts showing how specific indicators have changed over time, allowing you to monitor the effects of implemented corrections.

Importantly, GSC provides links directly to PageSpeed ​​Insights for individual URL groups, allowing for more detailed problem diagnosis.

The Role of Search Console in the Core Web Vitals Optimization Process

Google Search Console plays an important role in the Core Web Vitals optimization process for several reasons:

• Shows data used in Google rankings – the data in GSC reflects the actual state of the page, which Google takes into account when assessing the quality of the page in the context of the Page Experience signal.
• It allows you to monitor the impact of changes on the entire website – the report works at the site-wide level, which makes it easier to manage larger projects and quickly identify problems on groups of subpages.
• Provides comparative data for mobile and desktop devices – allowing you to prioritize optimization efforts based on user behavior.
• Allows you to track progress over time – GSC stores historical data, which allows you to assess whether technical changes have had the expected effect.

Examples of practical application

In practice, the Core Web Vitals report is used to:

• identifying mobile pages that require LCP optimization due to overly large images or a slow server,
• detecting system stability issues (CLS) related to dynamically loaded ads or banners,
• monitoring the effects of optimization activities, such as implementing lazy loading of images or resource minification,
• planning optimization work based on groups of pages that have similar problems and can be improved using the same techniques.

Report limitations

It's worth remembering that the Core Web Vitals report in Search Console is based on data collected over a longer period (usually 28 days). Therefore, changes implemented on a website may not be immediately visible in the GSC report. For quick verification of optimization results, it's recommended to use lab tools like PageSpeed ​​Insights or Lighthouse in parallel.

Lighthouse and CrUX: Chrome Testing and User Data

the Core Web Vitals analysis and optimization process, tools that allow for both testing under controlled conditions and access to real-world user data are crucial. Two key solutions offered by Google in this regard are Lighthouse and Chrome User Experience Report (CrUX) . Each fulfills a different role and addresses the diverse needs of professionals working on website performance.

Lighthouse: Detailed testing in a laboratory environment

Lighthouse is an open-source tool that allows you to run website performance tests in a lab . It's integrated with Chrome DevTools (the developer tools built into the Chrome browser) and is also available as a standalone tool or as a module for running in Node.js.

Lighthouse analyzes the website in several key areas:

• Core Web Vitals and auxiliary metrics such as LCP, CLS, TBT, FCP and Speed ​​Index.
• Accessibility - assesses whether the website is friendly to people with various limitations.
• SEO - Checks the basic elements that influence search engine optimization.
• Best Practices – Verifies compliance with security and code quality recommendations.

One of Lighthouse's greatest advantages is its ability to simulate various conditions : connection speeds (e.g., 3G, 4G), device parameters (e.g., low-end phones), and page rendering with a clean cache. Test results are presented in a clear format, along with recommendations for optimization measures, such as eliminating render-blocking JavaScript, compressing images, or removing unused CSS.

Lighthouse is a tool used primarily during the design, testing, and development stages of a website , as it allows for the rapid detection of issues in a controlled environment before they reach end users.

Chrome User Experience Report (CrUX): Data from real user visits

The Chrome User Experience Report (CrUX) is a public collection of user experience data from Chrome users who have consented to sharing anonymous telemetry data. CrUX collects real-world data (field data) that reflects the actual conditions under which users visit a given website.

Data from CrUX is aggregated and includes:

• Core Web Vitals : LCP, INP (from 2024), CLS.
• Additional metrics : FCP, TTFB, screen resolution, device type, network conditions.

CrUX allows you to analyze website performance across countries, devices (desktop and mobile), and connection speeds. CrUX data is used in PageSpeed ​​Insights and Google Search Console , and is also available for independent analysis via the API, BigQuery, and custom dashboards created in tools like Data Studio.

CrUX is unique because it provides a real-world view of user experience , which cannot be fully replicated through lab testing. It allows us to monitor how a website performs in real-world conditions and how users around the world experience it.

How to combine Lighthouse and CrUX in practice?

Lighthouse and CrUX complement each other and should be used together when working on website performance:

• Lighthouse is used to diagnose problems during development and before implementing changes in production. It allows you to test "what-if" scenarios and simulate various conditions.
• CrUX provides data on how a website performs for real users, taking into account factors that cannot be simulated (e.g., local network disruptions, old devices, diverse user environments).

Using both tools in parallel allows for a deeper understanding of site performance and more effective optimization planning. Lighthouse helps detect and fix issues, while CrUX verifies whether implemented changes have actually improved the user experience.

GTmetrix, WebPageTest and other external tools

In addition to the tools offered by Google, there are a number of third-party diagnostic platforms that allow for the analysis of Core Web Vitals and other website performance metrics. These tools often offer greater flexibility in test configuration, a wider choice of test server locations, and the ability to perform more advanced technical analysis. They are particularly valuable for teams working on international projects, global websites, or applications requiring highly precise diagnostics.

GTmetrix

GTmetrix is ​​a popular online website performance measurement tool that combines the Lighthouse engine and WebPageTest. It allows you to generate detailed reports on key metrics such as Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), Total Blocking Time (TBT), and Speed ​​Index. GTmetrix reports allow you to easily identify issues related to page load times and the impact of individual resources on performance.

One of GTmetrix's strengths is its ability to run tests from a selected geographic location and on various devices (e.g., desktop, mobile). The tool also allows you to simulate website performance at different internet connection speeds, which is useful for optimizing for mobile users and those using lower-quality networks.

An additional feature is the results history, which allows you to track optimization progress and compare performance changes over time. GTmetrix also allows you to export reports in PDF or CSV formats, facilitating documentation and communication between project teams.

WebPageTest

WebPageTest is an advanced diagnostic tool that allows for highly detailed website performance analysis. It offers a wide range of test configuration options, including selecting the test server location, browser type (e.g., Chrome, Firefox), device type (desktop, mobile), and simulated connection (from fast broadband networks to slower 3G connections).

WebPageTest allows you to run multiple tests (e.g., first visit and repeat visits from the cache), which is particularly useful for analyzing the impact of caching on website performance. The tool generates waterfall graphs that detail page load behavior and show the download times of individual resources. This allows you to precisely determine which page elements are responsible for load delays.

One of WebPageTest's unique features is the ability to create time-lapse videos (filmstrip views) that visualize the page rendering process step by step. This makes it easier to understand how users experience a site loading and which elements might lead to frustration, for example, key content appearing too late.

Other external tools

In addition to GTmetrix and WebPageTest, there are other tools available on the market that support performance analysis and Core Web Vitals. Examples include:

• Pingdom Tools – a tool for basic analysis of page loading speed, with the ability to choose the test location.
• Calibre – a platform offering real-time monitoring of Core Web Vitals from various locations around the world and integration with CI/CD processes.
• SpeedCurve – an advanced solution for tracking website performance and its impact on user experience, with the ability to compare results with competitors.

When is it worth using external tools?

External analytics platforms are particularly useful in the following cases:

• when the website operates in international markets and testing from different locations is necessary,
• when in-depth technical analysis is required, beyond the standard reports of Google tools,
• when we want to monitor performance changes over time or integrate Core Web Vitals data with our own analytical systems,
• when we want additional visualization features, such as time-lapse videos or rendering animations.

External tools are a valuable addition to the Google ecosystem and allow for a more comprehensive understanding of a website's performance in various conditions and the drawing of more precise conclusions during the optimization process.

Web Vitals Extension and web-vitals (JavaScript library)

In addition to tools for lab testing and site-wide real-world data analysis, Google and the developer community also offer lightweight tools that enable ongoing monitoring of Core Web Vitals during daily work . These solutions are useful for developers, UX and SEO specialists who want to quickly check site performance without having to run full diagnostic tests. These tools include the Web Vitals Extension web-vitals library .

Web Vitals Extension: Monitor Core Web Vitals in your browser

Web Vitals Extension is an official Chrome extension that allows you to track core page quality metrics in real time while browsing. The extension measures the Core Web Vitals (LCP, INP, CLS) values ​​for the currently visited page and displays them directly in the browser interface.

Key features of the extension:

• Real-time measurement : Metric values ​​are refreshed dynamically during a page visit, allowing you to see how different actions (e.g., scrolling, clicking on elements, loading dynamic content) impact your metrics.
• Easy data interpretation : results are presented in a clear color scheme (green, orange, red), in line with the quality thresholds adopted by Google for each metric.
• No configuration required : the extension works immediately after installation, without the need for additional settings.

The extension is especially useful when working on the frontend or testing new features, as it allows you to quickly catch performance issues during the development or verification phase of changes without engaging full diagnostic tools.

web-vitals (JavaScript library): integration of measurements with analytical systems

web-vitals is a lightweight JavaScript library from Google that allows developers to collect Core Web Vitals data directly from user visits to a website. The library works in browsers that support the Web Vitals API and allows you to record metrics such as LCP, INP, CLS, FID (in older versions), FCP, and TTFB.

Key features of the web-vitals library:

• Integration with your own analytical systems : Data collected by the library can be sent to tools like Google Analytics, your own APIs, or external performance monitoring systems. This allows you to create dedicated reports tailored to your organization's needs.
• Measuring real user experiences : web-vitals works on a similar principle to CrUX, but gives you more flexibility because it collects data exclusively from your own website and allows you to define how it is processed.
• Lightweight and easy to use : The library is small in size and can be easily embedded into a website or web application without burdening its performance.

A typical use for the library is to add it to a project and send the results to the chosen analytics system. For example, a developer could implement code that, after each user interaction with the website, saves INP and LCP values ​​to a database for later analysis.

When is it worth using these tools?

The Web Vitals Extension and the web-vitals library are primarily used in situations where:

• you need a quick, direct check of the website's performance while browsing , without running advanced diagnostic tools,
• the development team wants to continuously monitor the impact of implemented changes on Core Web Vitals in the test or production environment,
• the organization needs its own website performance data , independent of CrUX's public reports, with the ability to integrate with its own analytical tools.

Both solutions are lightweight, easy to use, and a perfect complement to more advanced tools such as PageSpeed ​​Insights, Lighthouse, or Google Search Console.

Core Web Vitals Optimization: Techniques and Best Practices

Improving Core Web Vitals is a key element of website performance, combining technical aspects, front-end architecture, and user delivery strategy. Effective optimization of these metrics translates not only to a better user experience but also to higher rankings in Google search results, lower bounce rates, and higher conversions.

The Core Web Vitals optimization process should be well-thought-out and comprehensive. It requires both quick-to-implement solutions (such as code minification or caching configuration) and more advanced actions that address the site's architecture (e.g., using a CDN or managing the rendering of the area above the fold).

Main areas of optimization activities

Core Web Vitals optimization focuses on three main pillars:

1. Accelerating the loading of key content (LCP) – activities in this area aim to minimize the time it takes users to see the main content of a page after it loads. Effective resource management (images, fonts, CSS and JavaScript files), server optimization, and HTML document structure are key here.
2. Improving website responsiveness (INP) – actions aimed at reducing the delay between user interactions and website response. These include optimizing JavaScript code, reducing blocking scripts, and avoiding long-running operations on the browser's main thread.
3. Page Layout Stability (CLS) Improvements – Actions that minimize unexpected page element shifts during loading or interaction. These include properly declaring image and asset dimensions, managing dynamic components, and controlling loaded content and ads.

Characteristics of good practices

Good practices for optimizing Core Web Vitals should be based on several principles:

• Iterative approach – optimization should be a continuous process, based on the analysis of real data, laboratory tests and verification of the effects of implemented changes.
• Prioritize issues – It's best to focus first on those elements that have the greatest impact on Core Web Vitals metrics and that can be improved relatively quickly. Actions should be planned based on reports from tools like Google Search Console or PageSpeed ​​Insights.
• Integration into the development process – Core Web Vitals optimization should be an integral part of the website creation and updating process. Optimization practices are most effective when implemented during the design and development phases, not as a "fix-it" step after the site launches.
• Taking into account the user context – actions should be tailored to the main groups of website users: device type, geographic location, network connection quality.

Action plan

The following sections will present specific optimization techniques that can improve Core Web Vitals in practice. These include:

• Lazy loading is a technique of deferred loading of images and other resources that significantly affects LCP and stability of the page layout.
• CSS and JavaScript minification , which allows for file size reduction and processing time reduction, which translates into better LCP and INP results.
• Using a CDN network , which enables faster delivery of content to the user from servers located closer to their location.
• Optimizing the area above the fold , i.e. the part of the page that is visible immediately after loading and which is crucial for the user's perception of the page's speed.

Each of these techniques plays a vital role in building a fast, responsive, and stable website that meets the Core Web Vitals and the expectations of modern users.

Lazy loading: impact on LCP and CLS

Lazy loading is a web optimization technique that loads images, videos, and other heavy elements only when they're needed—that is, when the user approaches their intended location in the viewport . This prevents the browser from having to download and render all the resources at once, significantly reducing the load time of the page and reducing the time it takes to display key content.

Lazy loading has a direct impact on Core Web Vitals metrics , especially Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS) .

Lazy loading a Largest Contentful Paint (LCP)

LCP measures the time it takes for the largest element visible in the browser window to be rendered. If a page contains images or multimedia elements in the area above the fold (visible immediately after loading), their loading time has a significant impact on the LCP score.

Improper use of lazy loading can degrade LCP . This happens when images within the viewport are also subject to lazy loading. This causes an unnecessary delay because the browser first loads the page structure and only then initiates downloading the visible images once they have been identified.

Therefore, it is good practice to:

• using lazy loading only for resources located outside the area above the fold ,
• disabling lazy loading for images and multimedia elements that are visible immediately after entering the website,
• manual control of the lazy loading mechanism (e.g. via the loading=”lazy” and loading=”eager” attributes in HTML5), which allows for better control over how resources are loaded.

Well-implemented lazy loading can significantly improve LCP by offloading unnecessary resources from page loading and focusing bandwidth on key elements.

Lazy loading a Cumulative Layout Shift (CLS)

Cumulative Layout Shift measures the visual stability of a page as it loads. A high CLS indicates that page elements change position or size unexpectedly, frustrating users.

Improper use of lazy loading can contribute to increased CLS . This happens when:

• the browser does not know how much space to reserve for the resource (e.g. an image) that is about to be loaded,
• a dynamically loaded image causes content to shift because its space was previously empty or reserved at the wrong size.

To avoid CLS problems when using lazy loading, you should:

• always specify the width and height of images (e.g. using the width, height attributes or CSS styles),
• use modern units and mechanisms that ensure the reservation of appropriate space on the page (e.g. aspect-ratio in CSS),
• avoid dynamically adding elements to the DOM without first preparing the space on the page.

This means that even images loaded with delay will not cause sudden page layout shifts and will not negatively impact CLS.

CSS and JavaScript Minification: Improving LCP and INP

Minification is a fundamental technique for optimizing website performance. It involves removing unnecessary characters, such as spaces, comments, tabs, and line breaks, from CSS and JavaScript files. This reduces file size, making them faster to download and process by the user's browser.

While minification is a simple technical measure, its importance to Core Web Vitals is significant because it translates directly into Largest Contentful Paint (LCP) and Interaction to Next Paint (INP) .

Minification and Largest Contentful Paint (LCP)

LCP measures the time from the start of a page's loading until the largest piece of content visible in the browser window is rendered. One factor influencing LCP is the time it takes to download, parse, and apply CSS styles, which determine how key page elements (e.g., images, text blocks, headings) are rendered.

Minifying CSS files:

• reduces the size of style files, which speeds up their download, especially in conditions of weaker connections or on mobile devices,
• reduces the browser's CSS parsing time, allowing it to start rendering key page elements faster.

For JavaScript, minification reduces the overhead of fetching and interpreting code that often controls the loading of dynamic components that affect LCP.

Minification and Interaction to Next Paint (INP)

INP evaluates the response time of a website to user interactions, from the moment of an action (e.g., click, touch) to the moment when the browser visibly updates the page (the next "paint").

Overloading JavaScript files with large sizes or suboptimal structure can lead to:

• blocking the main browser thread,
• delays in handling interaction events,
• increasing the rendering time of the visual response to user action.

Minifying JavaScript files reduces code size and speeds up analysis and execution, which allows for faster page response times. Furthermore, minification is often the first step towards more advanced actions, such as code splitting or deferred script loading (defer, async).

Best practices for minifying CSS and JavaScript

For minification to be effective and safe, it is worth following a few rules:

• Using proven tools – for CSS minification, popular tools include cssnano , clean-css or PostCSS , while for JavaScript: Terser , UglifyJS or built-in minification functions in modern bundlers (Webpack, Rollup, Vite).
• Automation in the project build process – minification should be a permanent element of the application compilation and deployment process to minimize the risk of accidentally releasing suboptimal files to production.
• Combining minification with HTTP compression – minification significantly reduces the size of source files, and the use of additional compression (e.g. Gzip, Brotli) allows for even better results in reducing the size of transmitted data.
• Careful testing of changes – before deploying minified files to production, it is worth thoroughly testing the operation of the website, because incorrectly configured minification can lead to errors in the operation of scripts, especially if the code is not resistant to removing whitespace or shortening variable names.

Example of the benefits of minification

For example, a page using 500 KB of uncompressed CSS might only deliver 50–100 KB of styling data to the user after minification and compression. Similarly, JavaScript can often reduce file size by 30–70%, significantly improving page load and performance, especially on mobile networks.

Using CDN to speed up content loading

A Content Delivery Network (CDN) is a distributed network of geographically distributed servers that collaborate to deliver website resources to users faster, such as HTML, CSS, JavaScript files, images, fonts, and multimedia. Using a CDN is one of the key techniques for improving website performance, as it reduces the time required for data transfer between the server and the user's browser, and thus positively impacts Core Web Vitals , especially Largest Contentful Paint (LCP) and, to some extent, Interaction to Next Paint (INP) .

How does CDN work?

When a website uses a CDN, resources are cached on servers located in various locations around the world (so-called Points of Presence (PoP)). When a user visits a website, their browser retrieves data not from the original server (often located in a single country), but from the server closest to their physical location. This allows:

• the time needed to establish a connection and transfer data is reduced,
• the number of network nodes through which a request passes is reduced,
• the risk of delays due to network congestion or geographical distance is reduced.

CDN Impact on Core Web Vitals

CDN and Largest Contentful Paint (LCP)

LCP is a sensitive metric for downloading key page resources. When large elements like images, fonts, or main content blocks are served via a CDN:

• server response time (TTFB – Time to First Byte) is shorter,
• resources are downloaded and rendered faster,
• the display time of the largest element in the visible area is improved.

CDN therefore allows for a significant reduction in LCP, especially for users located far from the main website server or using mobile networks with higher latency.

CDN and Interaction to Next Paint (INP)

While INP primarily addresses how a website responds to user actions, a CDN can help improve it indirectly. Faster delivery of JavaScript and CSS files with a CDN:

• shortens application initialization time,
• enables earlier start of event handling,
• reduces the load on the main server, allowing for more seamless handling of dynamic content and interactions.

Good practices for using CDN

For a CDN to effectively support the improvement of Core Web Vitals, it is worth following a few rules:

• Caching the right resources – static files (images, fonts, compiled CSS and JS) should be kept in the CDN cache for as long as possible to avoid re-downloading from the main server.
• Applying file versioning policies – whenever a resource is updated (e.g. changing CSS styles), it is worth using unique identifiers in file names (hashing names) so that users receive the latest versions and not old cached files.
• Serving images and multimedia via CDN – Images are often the largest resources on a website. Using a CDN to deliver them can significantly speed up the loading of large elements.
• Optimize your geographic settings – If your website has global users, it’s worth making sure your CDN points of presence cover key regions (e.g., Europe, North America, Asia).
• Integration with compression and optimization mechanisms – many CDNs offer additional features such as automatic Gzip/Brotli compression, image optimization (e.g. conversion to WebP, AVIF), CSS and JS minification, and deferred resource loading.

Examples of popular CDN providers

There are many CDN providers on the market, both global and regional. The most popular include:

• Cloudflare – a popular CDN offering additional security features (protection against DDoS attacks, WAF application firewall), compression, and image optimization.
• Akamai – one of the largest CDN providers in the world, used by large corporations and global services.
• Amazon CloudFront – integrated with the AWS infrastructure, often chosen by companies using the Amazon cloud.
• Fastly , BunnyCDN , KeyCDN – other popular solutions used depending on the needs, budget and scope of the website.

The importance of the area above the fold for LCP

The area above the fold (the part of the page visible on the user's screen without scrolling after the page loads) plays a key role in the user's perception of a site's speed. It's the first part of the page that users see and, based on it, forms their first impression of the site. In the context of Core Web Vitals, the area above the fold is directly related to Largest Contentful Paint (LCP) , as this area typically represents the largest element rendered during page load.

LCP and elements above the fold

Largest Contentful Paint (LCP) measures the time it takes for the largest visible element of content to be rendered on screen. Typically, this element is:

• main hero image (large banner graphic or illustration),
• a heading or block of text (e.g. article title, main e-commerce offer),
• video or other multimedia element.

If this element is located above the fold, rendering it quickly is crucial to achieving a good LCP score. Loading the largest element too slowly makes the page feel sluggish and slow to respond to the user, even if the rest of the content loads quickly.

Best practices for above-the-fold optimization for LCP

To improve LCP, ensure the area above the fold is as optimized as possible and ready to quickly display key content. Below are key techniques and best practices:

1. Priority loading of key resources

Resources related to rendering elements above the fold (images, CSS, fonts) should be loaded first. This can be achieved by:

• applying the preload attribute to the main image or fonts,
• avoiding render-blocking CSS and JavaScript in the section<head> ,
• limiting the number of CSS and JS files that need to be downloaded and processed before rendering above the fold.

2. Hero image optimization

Images in the area above the fold are often the largest elements of a page. Therefore, you should:

• use modern image formats such as WebP or AVIF, which provide high quality at a smaller size,
• scale images appropriately to actual display sizes,
• avoid lazy loading for images above the fold (they should load immediately).

3. Critical CSS

It's a good idea to extract and inline critical CSS—styles needed for above-the-fold rendering—directly in the HTML. This allows the browser to immediately apply styles without waiting for external CSS files to be downloaded.

4. Reduction of render-blocking resources

Any resource that delays display above the fold degrades LCP. You should:

• defer loading of non-critical CSS and JS (techniques such as media=”print” followed by changing it to all, defer or async attributes for scripts),
• minimize the use of external libraries loaded in<head> ,
• avoid unnecessary external requests that are not needed to render the initial page view.

5. Reserving space for items above the fold

To avoid system shifts during charging (which affects not only the LCP but also the CLS), you should:

• declare the dimensions of images and multimedia using HTML (width, height) or CSS (aspect-ratio) attributes,
• ensure that the layout above the fold does not change dynamically unnecessarily.

The most common errors in the area above the fold that worsen LCP

In practice, you may encounter errors that negatively affect LCP:

• using lazy loading on images above the fold,
• no preload for key fonts or main image,
• excessive amount of scripts loaded before rendering visible content,
• too large, suboptimal graphics or lack of compression,
• a large number of external render-blocking CSS and JS resources.

Core Web Vitals and SEO and SXO

Core Web Vitals are metrics that connect the world of front-end technology with business goals related to search engine visibility (SEO) and building a positive user experience (SXO). Since 2021, Google has officially included Core Web Vitals as one of the ranking signals within a broader set of criteria known as Page Experience . This has made these metrics an integral part of the optimization strategies of websites that want to compete in both content quality and usability.

The Relationship of Core Web Vitals to SEO

For SEO professionals, Core Web Vitals are a crucial element of technical SEO because they influence how Google evaluates a page's usability. While content quality and relevance to search intent remain the most important ranking factors, pages that meet Core Web Vitals have a competitive advantage , especially when the content quality of two pages is similar. High Core Web Vitals scores can therefore be a decisive factor in achieving a higher ranking in search results.

Google makes no secret of its goal of promoting sites that offer a fast, responsive, and stable user experience , as such sites better meet the needs of internet users. Core Web Vitals are a tool for measuring and verifying this quality.

Core Web Vitals as the foundation of SXO

The concept of SXO (Search Experience Optimization) combines traditional SEO activities with on-site user experience (UX) optimization. In this context, Core Web Vitals become a key tool for achieving SXO goals. Strong LCP, INP, and CLS scores not only support a website's visibility in Google but also increase visitor satisfaction, which translates into:

• lower bounce rate,
• longer session duration,
• higher conversion rates.

Websites that combine high-quality content with excellent technical performance not only attract users through high search engine rankings, but also retain them longer and encourage them to take action.

The importance of Core Web Vitals in strategy

A modern SEO and SXO strategy cannot be limited to content and link optimization alone. A website's technical performance has become an equally important pillar of optimization efforts , and Core Web Vitals provide measurable metrics that allow for the assessment of progress in this area. Regular monitoring and improvement of these metrics should be a regular element of optimization efforts, just like content audits, keyword analysis, and link building.

In the following sections, we will discuss in detail how Core Web Vitals affect Google positioning and what role they play in a comprehensive Search Experience Optimization (SXO) strategy .

The impact of indicators on Google positioning

Core Web Vitals, as part of the Page Experience , have a direct impact on how Google evaluates websites for usability and user experience. Since these metrics were introduced into the ranking algorithm (initially in 2021, with an update in 2024—replacing FID with INP), Core Web Vitals have become a factor in determining page rankings in search results.

How does Google use Core Web Vitals in rankings?

Google has repeatedly emphasized that the primary goal of its search algorithm is to provide users with the best possible answers to their queries —that is, pages with high-quality content that meet search intent. Core Web Vitals don't replace key factors like content relevance to the query, page authority, or the quality of inbound links. However, they do provide an additional ranking signal that can determine a page's position when multiple sites offer similar content value.

Good Core Web Vitals scores support website rankings when:

• competing sites present a similar level of content quality,
• the user uses mobile devices or a slower connection, and the page loading speed is more important for the browsing comfort,
• Google's algorithm must decide between pages with a comparable link structure and relevance to the query.

The weight of Core Web Vitals in the Page Experience signal

Core Web Vitals are the central element of Page Experience , a collection of ranking signals related to website usability. In addition to LCP, INP, and CLS, Page Experience also includes:

• compliance with mobility principles (mobile-friendly),
• browsing security (no malware),
• HTTPS support,
• no intrusive interstitials (full-screen ads that make access to content difficult).

Together, these elements create a picture of the quality of the user experience that Google wants to promote in its search results. Core Web Vitals play a special role in this group because they are measurable, comparable, and directly related to the perception of a site's speed, responsiveness, and stability.

Do good Core Web Vitals guarantee a high ranking?

High Core Web Vitals scores don't guarantee top rankings in search results. A page's content and its relevance to user queries remain paramount . However, poor Core Web Vitals scores can become a limiting factor in a page's visibility, especially in situations where there's competition between sites with comparable content quality.

In addition, pages with low technical performance:

• may be abandoned more often by users due to frustration with slow performance,
• may generate a higher bounce rate, which signals to Google that the website does not meet user expectations,
• may perform worse in Search Console quality reports, which makes it harder for them to rise in search results.

Core Web Vitals and positioning in the context of mobile devices

Given the growing importance of mobile-first indexing and the dominance of mobile devices in internet traffic, Core Web Vitals are particularly important for websites viewed on smartphones and tablets. Mobile users are more sensitive to lag and responsiveness issues, and Google's algorithm places greater emphasis on the quality of the mobile experience.

The role of Core Web Vitals in the Search Experience Optimization strategy

Search Experience Optimization (SXO) is an approach that combines traditional SEO (Search Engine Optimization) with user experience optimization (UX). The goal of SXO is not only to attract users to a website by ranking high in search results but also to provide them with the best possible user experience. Core Web Vitals are one of the foundations of this strategy, providing measurable indicators of a website's technical quality that directly impact user experience and SEO effectiveness.

How do Core Web Vitals fit into SXO?

Core Web Vitals answer key SXO questions:

• Does the page load quickly? (Largest Contentful Paint – LCP)
• Does the website respond smoothly to user actions? (Interaction to Next Paint – INP)
• Is the page layout stable and predictable? (Cumulative Layout Shift – CLS)

Optimizing these metrics impacts how a user perceives a page, from the moment it loads to interacting with its elements. A high-quality user experience increases the likelihood that a user will:

• stay on the site longer,
• will go to the next subpages,
• performs the desired actions (e.g. purchase, filling out a form, subscribing to the newsletter).

SXO believes that search engine and on-site success are inseparable—and Core Web Vitals are the intersection between these areas.

Core Web Vitals as a Conversion Improvement Tool

In SXO's strategy, optimizing Core Web Vitals doesn't end with improving search engine rankings . Equally important is their impact on business metrics, such as:

• conversion rate,
• bounce rate,
• average session duration,
• average number of pages per session.

In practice, this means that a website optimized for Core Web Vitals not only has better visibility in Google but also achieves business goals more effectively. For example, reducing the LCP from 4 to 2 seconds can significantly reduce the number of users abandoning their visits before the page fully loads.

Integrating Core Web Vitals into the SXO process

For Core Web Vitals to effectively support your SXO strategy, metric optimization should be part of:

• website design (UX/UI) – at the stage of mockups and graphic designs, it is worth taking into account performance issues, e.g. the size of graphics, the number of dynamic components or the CSS and JS structure.
• implementing frontend and backend technologies – the choice of frameworks, resource loading techniques, server and CDN configurations should take into account the impact on Core Web Vitals.
• Continuous monitoring of site quality – SXO is an ongoing process. Regularly tracking metrics using tools like Search Console, PageSpeed ​​Insights, Lighthouse, and CrUX allows you to quickly respond to issues and maintain high site quality.

Why are Core Web Vitals crucial to SXO?

In the context of SXO, Core Web Vitals enable objective and comparable measurement of user experience quality . This allows SEO, UX, and technology development teams to speak the same language and work with shared, hard data.

Well-optimized Core Web Vitals support:

• gaining organic traffic (SEO) through better positions in Google,
• retaining and engaging users (UX) thanks to fast, smooth and stable website operation,
• achieving business goals (conversions, user loyalty), which is the ultimate goal of SXO.

The most common problems and how to solve them

Core Web Vitals optimization is a process that requires not only implementing techniques to speed up page loading and improve responsiveness, but also continuous monitoring, analysis, and troubleshooting of issues that may arise in real time. Website performance is the result of the interaction of many factors: code quality, resource architecture, external scripting, server configuration, and content and advertising dynamics.

Despite best practices, many websites encounter recurring issues that negatively impact LCP (Largest Contentful Paint) , INP (Interaction to Next Paint) , and CLS (Cumulative Layout Shift) . Understanding the causes and implementing effective solutions is crucial to maintaining high-quality sites and ensuring a positive user experience.

Why are Core Web Vitals problems common?

Problems with Core Web Vitals often result from:

• the complexity of modern websites that combine dynamic content, numerous scripts, integration with external services and multimedia components,
• lack of consistency in optimization throughout the website lifecycle – from design, through development, to maintenance and updates,
• the influence of external factors , such as dynamic ads, tracking scripts, social widgets or the instability of service providers' infrastructure.

These problems can manifest themselves both during the initial page load and during user interaction, making their detection and resolution more challenging.

Common Problems in Core Web Vitals

High CLS (Cumulative Layout Shift)

It is often associated with:

• lack of dimension declarations for images, videos or advertisements,
• dynamically loaded elements that change the page layout,
• using fonts without mechanisms to control "jumps" when rendering them (e.g. no font-display: swap).

Low LCP (Largest Contentful Paint)

It usually results from:

• large and suboptimal images or multimedia,
• too long server response time,
• blocking the rendering of CSS or JavaScript files,
• lack of prioritization of loading key resources above the fold.

Weak INP (Interaction to Next Paint)

Most often it is the result of:

• overloading the main browser thread with heavy scripts,
• long-running DOM operations or expensive calculations performed in response to user actions,
• external scripts that delay interaction processing (e.g. analytics tools, ads, widgets).

The key to effective problem-solving

Every Core Web Vitals issue requires a data-driven approach and the gradual elimination of bottlenecks. An effective troubleshooting process should include:

1. Diagnosis based on real data (field data) – using Google Search Console reports, CrUX data, integration with Google Analytics or your own monitoring tools.
2. Lab data testing – Run analyses using PageSpeed ​​Insights, Lighthouse, or WebPageTest to reproduce issues in a controlled environment.
3. Map issues to specific page elements – identify which images, scripts, or components are responsible for latency and instability.
4. Implementing iterative solutions – gradually improving the website, including A/B testing and assessing the impact of changes on metrics and user experience.

Why troubleshoot Core Web Vitals?

Poor Core Web Vitals scores not only reduce the user experience but can lead to:

• lower visibility in Google, especially in the context of mobile devices,
• higher bounce rate,
• fewer conversions (e.g. purchases, newsletter subscriptions),
• negative perception of the brand in the eyes of users.

Therefore, systematically identifying and eliminating Core Web Vitals issues should be a permanent part of every website's maintenance and development strategy .

High CLS: causes and ways to stabilize the system

Cumulative Layout Shift (CLS) is a Core Web Vitals metric that measures the cumulative instability of a page's layout during loading and interaction. A high CLS means that elements on the page shift unexpectedly, which negatively impacts the user experience and can lead to accidental clicks, user frustration, and ultimately, abandonment.

Common causes of high CLS

High CLS problems typically stem from a lack of proper control over where and how individual components are loaded. Common causes include:

1. No dimension declaration for images and multimedia elements

If the browser doesn't know the dimensions of images, videos, or other resources before loading them, it can't allocate adequate space for them. When these elements load, they shift the existing layout, causing content to jump.

2. Dynamically loaded ads and external components

Advertisements, banners, widgets, and social media modules are often injected into the DOM after the basic page structure has been rendered, leading to layout shifts.

3. Element styles or sizes change when loading fonts

If web fonts are not loaded optimally, their subsequent use may change the size of text blocks and cause offsets.

4. Interactive components without space reservation

Sliders, carousels, accordions, and other dynamic elements that change size after loading can cause layout shifts if they don't have appropriate constraints and dimensions.

5. Unforeseen changes in the DOM

Adding elements (e.g. notifications, cookie messages) without first preparing their place in the page structure also leads to unexpected layout jumps.

Ways to stabilize the system and reduce CLS

To improve your CLS score and ensure a stable page layout, implement the following best practices:

1. Defining dimensions for images and multimedia elements

Every image, video, or iframe should have width and height attributes declared or be styled with a CSS aspect ratio. This lets the browser know how much space to allocate before loading the content.

2. Reserving space for ads and dynamic components

For modules that appear dynamically (e.g., ads, widgets), space should be reserved in the page layout using containers with fixed dimensions or a minimum height. Alternatively, placeholders can be used.

3. Font loading optimization

It's a good idea to use CSS properties like font-display: swap, which allow you to display text in a fallback font and replace it with the target font when it loads, without causing text to jump.

4. Avoiding dynamic element resizing

Interactive components should have a fixed maximum height or width, and their expansion should be smooth and controlled so as not to disrupt the overall page layout.

5. Adding DOM elements in a controlled manner

If the website adds messages (e.g. cookie banners), they should be included in the website structure and not push out important elements, but appear, for example, as overlay elements or in places that do not affect the main layout.

6. Testing the system on different devices

Some CLS issues only manifest themselves on certain resolutions. It's worth testing your site on multiple devices and simulating poor connection conditions to identify potential shifts.

Examples of tools supporting the diagnosis of CLS

To identify sources of high CLS and monitor optimization progress, it is worth using:

• Lighthouse and PageSpeed ​​Insights – offer visualization of layout shifts and highlight the elements responsible for the jumps.
• Web Vitals Extension – enables real-time CLS tracking while browsing the site.
• Chrome DevTools (Performance tab) – allows you to analyze layout shifts during the rendering process.

Low LCP: Optimize the largest page elements

Largest Contentful Paint (LCP) is a Core Web Vitals metric that measures the time it takes for the largest visible piece of content (e.g., hero image, headline, text block) to render in the browser window. A low (i.e., unfavorable) LCP score means that users wait too long for key content to appear, leading to a feeling of slowness and sluggishness. From an SEO, UX, and SXO perspective, LCP is one of the most important metrics because it directly impacts a user's first impression.

Common causes of low LCP

Low LCP typically results from delays in loading or rendering the largest element on the page. Common causes include:

1. Large and suboptimal images

The largest element of an LCP is often the hero image or above-the-fold illustration. If the image is too heavy, in an inefficient format, or poorly scaled, it takes too long to load.

2. Server response time too long

When a server responds too slowly to a user request, the TTFB (Time to First Byte) increases, which delays the entire process of loading and rendering key content.

3. Render-blocking CSS and JavaScript files

A large number of render-blocking resources prevents the browser from immediately drawing the page. Any additional CSS or JS required before rendering increases LCP time.

4. Lack of prioritization of key resource loading

If the main image, fonts, or styles are loaded along with less important resources, the browser doesn't know which elements are most important to display at startup.

5. No caching or CDN

Failure to utilize browser caching or CDN servers causes the user to download all resources from the original server each time, significantly slowing down LCP.

Ways to improve LCP

Improving LCP requires a comprehensive approach to optimizing the largest page elements and their entire delivery process. The most important strategies are described below:

1. Image optimization

• Use modern formats (WebP, AVIF) that provide high quality with a much smaller file size.
• Scale images to actual display dimensions, avoiding uploading larger files than needed.
• Use lossless or lossy compression techniques at the appropriate level.
• Disable lazy loading for main images above the fold so they load immediately.

2. Reducing server response time

• Use solutions such as server-level caching (e.g. Varnish, Redis) or full-page caching.
• Use a CDN to speed up the delivery of content to the user from servers closer to their location.
• Optimize your backend and database queries to reduce response time.

3. CSS and JS Minification and Optimization

• Minify CSS and JS files to reduce their size.
• Use critical CSS inline so that basic styles for above the fold are immediately available.
• Mark scripts as defer or async so they don't block rendering.

4. Prioritizing key resources

• Use the preload attribute for main images, fonts, and CSS needed to render above the fold.
• Think about your HTML structure so that key elements appear as early as possible in the page's source code.

5. Resource caching

• Configure cache headers for static files so that the browser stores resources locally and does not re-download them each time the page is refreshed.
• Use service workers (for PWAs) to manage resource caching at the browser level.

Tools to support the diagnosis of LCP problems

• PageSpeed ​​Insights - Indicates the largest LCP element and identifies resources blocking it from loading.
• Lighthouse – Shows the resource loading order and recommends corrective actions.
• WebPageTest - allows you to analyze the page rendering "filmstrip" and determine exactly when and how the largest element appears.

Weak INP: Identifying Blocking Scripts and Latencies

Interaction to Next Page (INP) is a Core Web Vitals metric that measures a website's responsiveness to user actions throughout its entire visit. INP reflects how quickly a website visually responds to clicks, taps, keystrokes, and other interactions. Poor INP means that users experience a delay between their action and the page's visible response, which directly impacts the user experience, especially on mobile devices.

Common causes of low INP

A poor INP score typically results from the browser being overloaded with tasks that block interaction support or delay the rendering of visual responses to user actions. The main causes include:

1. Heavy, blocking JavaScript

When a page loads and executes large JavaScript files (e.g., libraries, frameworks, trackers), the browser's main thread is busy and cannot quickly handle user actions.

2. Long-term DOM operations

Manipulations of the DOM tree (e.g., generating large HTML fragments, changing CSS classes, extensive animations) can block the rendering thread and delay the visual response to the interaction.

3. External scripts

Analytics tools, advertising, live chat, social media widgets – all of these components can introduce additional load and increase interaction latency.

4. No code splitting

If the entire JavaScript application is loaded and executed at once, the browser takes more time to parse and execute it, which increases the INP.

5. Complex animations and visual effects

Inefficient animations (e.g. changing properties that require expensive layout recalculation, such as width, height, top, left) can overload the rendering thread and delay the page's response to user actions.

Ways to identify blocking scripts and delays

To effectively improve INP, it's essential to precisely identify the source of the problem. This can be accomplished using the following methods:

1. Profiling the main browser thread

Tools like Chrome DevTools ( Performance ) let you see which scripts and operations are consuming the most time on the main thread. You can see which tasks are being performed during interactions and which ones are the heaviest.

2. Analysis of Long Tasks

Chrome DevTools and Lighthouse reports show tasks taking longer than 50ms, which can block interaction handling. Eliminating or shortening such tasks is crucial to improving INP.

3. Lighthouse and WebPageTest

Both tools allow you to analyze the impact of scripts on the page's response time. These reports highlight the most critical scripts and their impact on performance.

4. Code Splitting and Lazy Loading

Analyzing JavaScript bundles using tools like Webpack Bundle Analyzer allows you to identify elements that can be offloaded or loaded asynchronously.

Ways to improve INP

1. Splitting and optimizing JavaScript code

• Implement code splitting to load only what is needed on a given page or at a given time.
• Defer loading of non-critical modules using import() or dynamic import.
• Remove unused code (tree shaking).

2. Reduction and optimization of DOM operations

• Limit the number and complexity of DOM manipulations in response to user actions.
• Use efficient APIs (e.g. requestAnimationFrame for animations, classList for managing CSS classes).

3. Offloading the main thread

• Offload expensive calculations to Web Workers so they don't burden the main browser thread.
• Use debounce or throttle when handling events (e.g. scrolling, resize).

4. Minimizing the impact of external scripts

• Monitor and limit external scripts.
• Use async/defer when loading them.
• Choose lightweight alternatives to heavy components (e.g. lightweight chat or analytics libraries).

5. Optimizing animations and transitions

• Use animations on properties that do not require expensive layout recalculation (e.g. transform, opacity).
• Avoid animations that change width, height, top, left unnecessarily.

Current Trends and the Future of Core Web Vitals in 2025

Core Web Vitals have become a cornerstone of website quality optimization strategies, bridging the worlds of technology, SEO, UX, and SXO. The year 2025 brings further changes and developments that demonstrate that the role of these metrics extends far beyond the technical performance of a website and begins to play a key role in the overall evaluation of digital products. Core Web Vitals are no longer perceived solely as a set of metrics for developers; they are increasingly becoming a starting point for building a digital user experience quality strategy.

Key Trends in Core Web Vitals Development

1. From Technical Metrics to Comprehensive User Experience Assessment

Google is working to ensure that Core Web Vitals increasingly reflect the actual user experience when using a website. In 2024, a significant step in this direction was the replacement of FID (First Input Delay) with INP (Interaction to Next Paint), which provides a more realistic picture of a website's responsiveness throughout the user's session. In 2025 and beyond, we can expect further development of these metrics to include aspects such as:

• consistency of animations and transitions,
• smooth rendering of interactive elements,
• stability of SPA (Single Page Application) web applications.

Core Web Vitals are evolving from a technical tool to a real indicator of the quality of user experience (UX).

2. The growing role of field data in quality assessment

There's a growing emphasis on measuring Core Web Vitals based on real-world data—that is, the experiences of real users in natural settings. Google, as well as analytics providers, are developing ways to collect and analyze field data to ensure the results are as representative and useful as possible for optimization teams.

3. Deeper integration of Core Web Vitals with analytics and monitoring ecosystems

By 2025, the ability to track Core Web Vitals directly in tools like Google Analytics 4, Google Tag Manager, APM (Application Performance Monitoring) systems, and proprietary BI platforms will become standard. Companies are increasingly considering these metrics as part of a broader analysis of the quality of digital products and a tool to support business decisions.

4. Linking Core Web Vitals to Business Results

As the digital market matures, there's a growing awareness that strong Core Web Vitals directly impact conversion rates, user loyalty, and brand perception. Organizations are beginning to see optimizing these metrics as an investment that translates into tangible business results—from lower bounce rates to increased revenue.

The Future of Core Web Vitals

1. New indicators and development directions

We can expect Core Web Vitals to be expanded with new metrics in the coming years. Google is already experimenting with measuring animation quality, scrolling smoothness, and the stability of dynamic components. Additional metrics could include:

• measuring visual consistency on different devices,
• assessment of accessibility as an element of the quality of experience,
• analysis of the rendering time of key elements of SPA and PWA (Progressive Web App) applications.

2. Even greater importance in the mobile market

Core Web Vitals are playing an increasingly important role in assessing the quality of websites on mobile devices. Given that the majority of internet traffic in 2025 will come from mobile devices, we can anticipate further development of metrics and optimization tools focused on the mobile user experience, including those using slower connections.

3. Stronger connection to security and accessibility

Optimizing Core Web Vitals increasingly goes hand in hand with implementing security mechanisms (e.g., HTTPS, protection against man-in-the-middle attacks) and adapting websites to the needs of people with disabilities. Google emphasizes that the quality of user experience is not only about speed and stability, but also security and accessibility.

Development of tools and metrics supporting UX quality

The year 2025 brings significant changes in the approach to measuring and optimizing the quality of user experience ( UX ) on websites and web applications. Core Web Vitals , while still a key set of technical quality indicators, are increasingly being supplemented with new metrics and supported by evolving analytical tools. The goal of these changes is to better reflect the real user experience and provide optimization teams with more precise data for decision-making.

The main directions of development of tools supporting UX quality

1. Better integration of real data (field data) in analytical tools

A growing number of platforms—from Google Analytics 4 , through performance monitoring tools (APM), to dedicated BI dashboards—allow for direct tracking of Core Web Vitals and linking them to business outcomes such as conversions, bounce rate, and cart value. The development of APIs (e.g., web-vitals JS, Web Performance API) allows companies to create their own UX quality reporting systems tailored to the specifics of their products.

2. Modern tools for visualizing and debugging UX issues

Tools like WebPageTest , Chrome DevTools , Lighthouse , and SpeedCurve are constantly being developed with new features that allow for better visualization of UX issues. Examples include:

• the ability to recreate the page loading process frame by frame (filmstrip view),
• analysis of the impact of individual resources on UX metrics,
• automatic recommendations for corrective actions based on analysis of the main browser thread.

3. The growing importance of synthetic UX testing

Alongside real-world data, synthetic testing is playing an increasingly important role. Conducted under controlled conditions, it helps detect issues before they impact end users. Synthetic testing tools (e.g., Lighthouse CI, Calibre, SpeedCurve) enable the integration of UX monitoring with CI/CD processes, allowing for the detection of issues during the development and implementation phases.

Development of UX quality metrics beyond Core Web Vitals

1. Fluency and animation metrics

Google and the web performance community are increasingly focusing on the quality of animations, transitions, and scrolling. New metrics are emerging to measure:

• animation smoothness (frame rate stability),
• smooth scrolling metrics,
• quality of transitions between interface states.

The purpose of these metrics is to assess how users perceive the smoothness of the page during interactions.

2. Extending the assessment of accessibility and visual consistency

In 2025, the importance of metrics assessing website accessibility for people with disabilities (e.g., key feature availability time, keyboard accessibility, color contrast) will grow. While not yet formally part of Core Web Vitals, they are becoming an important complement to UX quality analysis.

3. New quality indicators in dynamic applications (SPA, PWA)

In response to the popularity of Single Page Applications and Progressive Web Apps, metrics are being developed to measure:

• rendering time of new views after changing the application state,
• smooth internal transitions without page reloading,
• consistency of offline functionality.

Examples of tools that set new standards in UX evaluation

• SpeedCurve – enables you to link UX metrics to business results, monitors animations and scrolling smoothness.
• Calibre – a modern platform for synthetic UX testing, supporting the monitoring of Core Web Vitals and performance smoothness.
• WebPageTest – advanced tools for visualizing problems with fluidity and resource rendering order.
• Chrome DevTools (Performance panel) – constantly being expanded with features for animation debugging, scrolling smoothness, and script performance.

The Importance of Core Web Vitals in the Context of Mobility and Security

In 2025, Core Web Vitals will play a crucial role not only as an indicator of a website's technical quality, but also as a foundation for building a positive user experience on mobile devices and ensuring secure access to content. With the growing importance of mobile and increasing cybersecurity requirements, optimizing Core Web Vitals is becoming an integral element of website and application development strategies.

Core Web Vitals and Mobility

1. The dominance of mobile traffic

In 2025, the majority of web traffic will come from mobile devices. Smartphones and tablets are the primary tools for browsing, shopping, using online services, and communicating. In this context, Core Web Vitals are becoming a fundamental tool for assessing the quality of websites on mobile devices , as they precisely measure the aspects that most impact user experience:

• LCP (Largest Contentful Paint) – determines how quickly the user sees the main content of the page on their smartphone screen.
• INP (Interaction to Next Paint) – determines how well a page responds to touchscreen taps and gestures.
• CLS (Cumulative Layout Shift) – avoids frustrating content shifts that make the site particularly difficult to use on small screens.

2. Importance for mobile users in difficult network conditions

Optimizing Core Web Vitals is crucial for ensuring page quality when users are using a slower connection (e.g., 3G networks in some regions) or on a device with limited processing power. A well-optimized mobile site should:

• load key resources as a priority,
• avoid redundant, heavy scripts,
• provide a stable and responsive interface regardless of the connection quality.

3. Mobile-first indexing and Core Web Vitals

Because Google has been using mobile-first indexing , the quality of a mobile site—including Core Web Vitals scores on mobile devices—has a direct impact on a site's search engine visibility. Mobile optimization is no longer optional, but standard for every website.

Core Web Vitals and Security

1. A safe environment as part of the quality of experience

Google emphasizes that a fast, stable, and responsive website isn't everything. Users also expect a website to be secure. Core Web Vitals are closely linked to other Page Experience , such as:

• HTTPS support,
• no malware,
• no intrusive interstitials and ads that may lead to fraud or accidental clicks.

High-quality Core Web Vitals often go hand in hand with ensuring a website's technical security. Loading speed and layout stability help reduce the user's attack surface, for example, by limiting the possibility of embedding malicious ads or scripts.

2. Impact of performance on user safety

Delays in page loading and poor interface responsiveness can be exploited by attackers (e.g., for clickjacking). A site with good Core Web Vitals scores is less susceptible to these types of threats because:

• limits the time during which the user can be manipulated into unconscious action,
• minimizes the number of dynamically generated elements that can be intercepted or replaced.
• 3. New safety standards and efficiency

In 2025, we'll see the development of solutions like Content Security Policy (CSP) , which enforce secure resource loading and better script management. The same practices that improve security (e.g., eliminating unnecessary external scripts, controlling resource origins) also contribute to improving Core Web Vitals—reducing the number of blocking requests and increasing site stability.

Summary of Core Web Vitals as a pillar of quality for modern websites

Core Web Vitals have become an integral part of building modern and competitive websites. These metrics, which include the largest element loading speed (LCP), layout stability (CLS), and responsiveness to user interactions (INP), allow for the measurement and analysis of key aspects of the user experience. Their importance now extends far beyond the purely technical, influencing both a website's visibility in Google search and the effectiveness of business activities such as conversions and building user loyalty.

Core Web Vitals are closely linked to Google's ranking signals within the Page Experience suite, making their optimization a mandatory element of every website's work. Good results in these metrics can give a website a competitive advantage in search results, especially when the content quality of the sites being compared is similar. At the same time, improving Core Web Vitals directly supports the goals of a Search Experience Optimization strategy, which combines SEO activities with building a positive user experience.

Optimizing Core Web Vitals requires both an understanding of the technical aspects of website development and the ability to manage the process of monitoring and improving them. Techniques such as lazy loading, code minification, CDN utilization, prioritizing above-the-fold resource loading, and splitting JavaScript code into smaller fragments have become standard in improving website performance and quality. Diagnostic tools like Google Search Console, PageSpeed ​​Insights, Lighthouse, and Chrome User Experience Report enable systematic progress tracking and identification of areas requiring improvement.

The year 2025 brings further development of Core Web Vitals and the entire ecosystem of tools and metrics supporting UX quality. These metrics are increasingly integrated with analytical systems and business platforms, and their importance in the context of mobility and security is greater than ever before. High-quality Core Web Vitals are now not just a technical requirement but a strategic element of building a competitive advantage in the digital world. For organizations seeking to effectively develop their websites, regular monitoring, analysis, and optimization of these metrics should be a permanent element of their website maintenance and development strategy.