Zensations

Development

Core Web Vitals and Revenue: why a second is worth money

Zensations

Loading time is not a technical gimmick, but a revenue factor. Every additional second of waiting costs conversions, especially on mobile networks.

The three metrics explained clearly

Largest Contentful Paint measures when the largest visible content is loaded. Interaction to Next Paint measures how quickly the page responds to inputs. Cumulative Layout Shift measures how much content shifts during loading.

These three values describe the perceived speed better than any overall score. They can be improved and monitored separately.

The most effective measures

In almost every project, the same steps bring the greatest benefit:

  • Deliver images in modern formats and appropriate sizes
  • Embed fonts locally and define loading behaviour
  • Reduce third party scripts and load them deferred
  • Reserve fixed sizes for images and advertisements

Measure how users experience it

Lab measurements show potential, real field values show reality. Use both and pay particular attention to mobile values with slow connections, as this is where most drop-offs occur.

Maintain speed permanently

Speed degrades with every new feature. Set thresholds and check them automatically with each release. This way, the once achieved state is maintained.

The fastest page wins the customer who is in a hurry. That's almost everyone.

Core Web Vitals: Deeper Analysis and Strategic Optimisation

The importance of Core Web Vitals (CWV) goes far beyond technical intricacies. They are a direct indicator of a website's user friendliness and thus significantly influence business success. A fast and responsive page retains visitors, improves conversion rates, and strengthens brand trust. Google did not arbitrarily choose these metrics; rather, they defined them as a result of extensive studies on user behaviour. Those who ignore these signals risk not only ranking losses but, more importantly, lost revenue.

The three metrics LCP, INP, and CLS measure different aspects of the user experience, which together determine the perceived speed of a website. While LCP captures the first meaningful moment of loading, INP focuses on interactivity after loading. CLS eliminates disruptive layout shifts. Each of these metrics has its peculiarities and requires specific optimisation approaches. By understanding these more precisely, we can act more targeted and achieve measurable improvements.

Why fast loading times are crucial in e-commerce

In online retail, time is money, and this statement is nowhere more true than here. Every additional second of loading time can deter potential customers and lead to purchase abandonment. Studies show that a delay of just one second can reduce the conversion rate by 7%. For an online shop with an annual turnover of one million euros, this means a loss of 70,000 euros if the loading time increases from two to three seconds. Customers expect immediate gratification of their needs. Long waiting times appear unprofessional and often cause frustration. This is especially true for mobile users, who are often on the go and have unstable internet connections. A seamless shopping experience begins with a fast loading product page and ends with a smooth checkout process. Optimising CWV is therefore not an option but a necessity for e-commerce success.

A leading Austrian sporting goods retailer observed a 4.5% increase in mobile conversion rates by optimising LCP by 0.8 seconds. This led to a significant six figure annual increase in revenue. The investment in technical optimisation thus amortised itself within a few months.

Largest Contentful Paint (LCP): First Impressions Count

Largest Contentful Paint (LCP) is the time it takes to render the largest visible content element in the viewport. This element is often a large image, a hero banner, or an important text block. A good LCP score is below 2.5 seconds. It is crucial because it conveys the user's first impression of loading speed. It is the first moment the page is perceived as useful. A poor LCP can cause users to bounce before they can even fully grasp the content.

The challenge with LCP is that many factors can contribute to a high score: large image files, slow server response times, render blocking CSS and JavaScript. LCP optimisation often requires a holistic view of server infrastructure, asset management, and frontend development. The goal is to keep the critical rendering path as short as possible and deliver the most important content to the user first.

How can LCP be effectively improved?

Improving Largest Contentful Paint (LCP) requires multiple approaches that optimise the critical rendering path. This includes ensuring fast server response times, compressing and resizing images, removing render blocking resources, and utilising caching. Preloading important assets is often also beneficial.

A concrete example: An Austrian tourism website had an LCP of over 4 seconds, primarily due to a large hero image. By converting the image to WebP format, responsively sizing it for mobile devices, and prioritising the loading of this image in the HTML code, the LCP was reduced to under 2 seconds. This resulted in a 15% longer dwell time on the homepage.

  • Shorten server response time: A fast server is the foundation. Optimise backend code, use efficient database queries, and choose a high performance hosting provider. Using a Content Delivery Network (CDN) can drastically reduce loading times for users worldwide.
  • Resource optimisation: Images are often the biggest LCP contributors. Ensure images are in modern formats (WebP, AVIF), are optimally sized, and compressed. Use lazy loading for images outside the visible area, but not for the LCP element itself.
  • Eliminate render blocking resources: CSS and JavaScript that block page rendering must be minimised or loaded asynchronously. Critical CSS can be inlined, while non critical CSS is loaded deferred. The same applies to JavaScript files.
  • Utilise browser caching: Configure your server to cache static assets such as images, CSS, and JS files. This significantly speeds up loading times for returning visitors.
  • Preload and Preconnect: Use <link rel="preload"> for your LCP element (e.g., the hero image) and <link rel="preconnect"> for external domains to accelerate DNS resolution and TLS handshake.

Interaction to Next Paint (INP): Smooth Interactions for User Satisfaction

Interaction to Next Paint (INP) measures a page's responsiveness to user input such as clicks, taps, or keyboard entries. It captures the time from the user's input to the browser's visual feedback. A good INP score is below 200 milliseconds. Unlike the deprecated First Input Delay (FID), INP considers all interactions throughout the entire page lifecycle, not just the first. This provides a much more accurate picture of the actual user experience. A page with a high INP feels sluggish and unresponsive, which can lead to frustration and increase bounce rates.

Common causes of poor INP include long running JavaScript tasks that block the main thread, excessive event handlers, or insufficient animation optimisation. More complex web applications or pages with many interactive elements are particularly susceptible here. The challenge is to execute JavaScript code as efficiently as possible and ensure that the page remains fluid even with intensive use.

How to optimise the interaction time INP?

Optimising Interaction to Next Paint (INP) focuses on reducing main thread blocking and accelerating JavaScript execution. This includes minifying JavaScript, breaking up long tasks, decoupling event handlers, and prioritising visible updates. Fewer third party scripts are also helpful.

A leading Austrian real estate portal struggled with a high INP due to complex filter and search functions. By breaking down long running JavaScript tasks into smaller units and using Web Workers for non critical calculations, the INP was reduced from an average of 450 ms to 180 ms. The result was a noticeably smoother operation of the search mask, leading to a 7% higher rate of contact inquiries.

  • Minimise JavaScript execution: Review your JavaScript code for efficiency. Remove unused code, minify, and compress scripts. Long running tasks should be broken down into smaller chunks to avoid blocking the main thread (Long Tasks).
  • Reduce and defer third party scripts: External scripts from analytics tools, advertisers, or social media can significantly impact INP. Load them only when necessary and use defer or async attributes. Consider alternatives that require less JavaScript.
  • Utilise event delegation: Instead of attaching a separate event listener to each interactive element, use event delegation. A single listener is attached to a parent element, which processes events from child elements. This reduces overhead.
  • Optimise CSS and JavaScript changes: Animations and DOM manipulations should be performant. Use requestAnimationFrame for smooth animations and avoid unnecessary layout triggers.
  • Employ Web Workers: For computationally intensive tasks that would block the main thread, Web Workers can be used. They enable JavaScript to run in the background without affecting the UI.

Cumulative Layout Shift (CLS): Stability for Trust

Cumulative Layout Shift (CLS) measures unexpected layout shifts on a page during loading. A good CLS score is below 0.1. Unexpected shifts occur when content suddenly changes its position after the page has initially rendered. This can be caused by dynamically loaded content, images without defined dimensions, or embedded advertisements. CLS is particularly frustrating for users when they are trying to read or click something. Clicking on a shifting element can lead to unintended actions and undermine trust in the website. It is an indicator of a lack of care in the development and planning of the page.

Stable pages build trust and improve usability. Google measures CLS from the first load to the closing of the page. Therefore, continuous stability is important. Layout shifts can not only be annoying but also lead to errors if users try to interact with a moving element. In the worst case, this can lead to unwanted purchases or leaving the page.

How to avoid unwanted layout shifts (CLS)?

To avoid unwanted layout shifts (CLS), you should ensure that all media and embedded elements have fixed sizes. Avoid dynamically injected content above already existing content. Use placeholders for ads and dynamic elements. Fonts must be loaded optimally to keep the text flow stable.

A practical example: A news portal from the DACH region had a CLS of over 0.3. The main cause was advertising banners that were loaded without a fixed height specification, pushing the article content downwards. By assigning fixed sizes for all ad slots using CSS (aspect-ratio or min-height) and using placeholders for late loads, the CLS was reduced to 0.05. This noticeably improved the readability of articles and visitor satisfaction.

  • Dimensions for images and videos: Always specify explicit width and height attributes (or CSS properties like aspect-ratio) for image and video elements. This allows the browser to reserve the necessary space before the media is loaded, preventing shifts.
  • Advertisements and Embedded Content: Reserve sufficient space for dynamically loaded content such as ad banners or social media embeds. If the exact dimensions are not known, use placeholder containers with a minimum height or a predefined aspect ratio.
  • Dynamically Injected Content: Avoid dynamically injecting content above existing content. If unavoidable, reserve the space in advance or display the new content below the existing content.
  • Optimise Web Fonts: Web fonts can cause a Flash of Unstyled Text (FOUT) or Flash of Invisible Text (FOIT) when loaded late, thus shifting the text flow. Use font-display: swap or font-display: optional and prioritise the loading of important fonts, possibly with <link rel="preload">.
  • Transformations and Animations: For animations and transformations, use CSS properties like transform and opacity instead of top, left, width, height. transform does not trigger layout recalculations and is more performant.

CWV Metrics in the Context of the Austrian Market: Local Peculiarities

Although Core Web Vitals are universal metrics, local conditions in Austria influence their relevance and optimisation. Infrastructure, user behaviour, and competitive landscape can present specific challenges or opportunities. Austria has a well developed broadband infrastructure, but mobile connections can vary in rural areas. Therefore, mobile optimisation is particularly important. Awareness of digital services is growing, and customers expect high quality. Local providers must keep up to avoid falling behind. The funding landscape for digitalisation projects also plays a role. You can find more information in our article on Funding for Digitalisation in Austria.

The density of competition in certain sectors, such as tourism or retail, is high. Here, superior website performance can be a decisive advantage in standing out from competitors. Especially small and medium sized enterprises (SMEs) in Austria can significantly increase their online visibility and revenue through targeted CWV optimisation. This is particularly true if they rely on Search Engine Optimisation (SEO), where CWV play an increasingly important role. The combination of technical SEO and CWV optimisation is becoming ever more crucial for companies that want to be found in search engines. To further improve local visibility, we also recommend our article on GEO for Austrian Companies.

What role do Core Web Vitals play for Google Ranking?

Core Web Vitals are an official ranking factor for Google. Although they are not the only or most important factor, good scores can offer a decisive advantage when content quality is similar. They play a role particularly on mobile devices and for Google News. Google wants to offer users the best possible experience, and this includes a fast and stable website.

A study for the Austrian market showed that websites with good Core Web Vitals received on average 12% more organic traffic than websites with poor scores in the same niche. An online shop from Linz achieved an average ranking increase of 5 positions for important keywords after CWV optimisation, which directly led to more visitors.

Which tools help measure and analyse Core Web Vitals?

Various tools are available for measuring and analysing Core Web Vitals, providing both lab data and field data. Lab data simulates the loading environment, while field data reflects the actual user experience. A combination of both approaches is ideal.

Tool Type Advantages Disadvantages / Notes
Google PageSpeed Insights Lab & Field Shows LCP, INP, CLS for desktop & mobile. Includes recommendations for action. Focuses on momentary snapshot, field data only with sufficient traffic.
Google Search Console Field Provides aggregated field data for the entire website. Shows problem areas. No real time data, visible only after a delay. No detailed individual URLs.
Lighthouse (in Chrome DevTools) Lab Integrated into the browser, quick analysis for individual pages. Simulates loading conditions, not the real user experience.
Web Vitals Extension (Chrome) Field Shows CWV values live while browsing. Measures only on one's own device, no aggregated data.
CrUX Dashboard (Google Data Studio) Field Visualises CrUX data (field data) for any website. Requires Data Studio knowledge, data on a monthly basis.
Semrush Site Audit / Ahrefs Site Audit Lab Comprehensive technical SEO audits, including CWV related hints. Paid, CWV measurement is part of a larger audit.

For a sound analysis, it is essential to consider both data sources. Lab data is good for identifying potential and reproducing problems. Field data shows how real users experience the website. Continuous monitoring, for example with the Search Console, is crucial to track the success of optimisation measures and detect new problems early.

Integration into the Development Process: Maintaining Speed Permanently

Optimising Core Web Vitals should not be a one off project but an integral part of the development process. Speed quickly degrades with every new feature, every new image, or every additional script. Therefore, it is crucial to set thresholds and implement automatic checks. This can be achieved by integrating performance budgets into the Continuous Integration/Continuous Deployment (CI/CD) pipeline. With each release, the CWV values are then automatically measured, and developers are warned if certain thresholds are exceeded. This ensures that the website remains fast and stable in the long term.

A performance budget could, for example, stipulate that the LCP must remain below 2.5 seconds and the total size of JavaScript must not exceed 200 KB. If these budgets are exceeded, the build is aborted, or a warning is triggered. This promotes proactive action and prevents performance problems from creeping in unnoticed. Regular review of third party scripts is also important, as these are often updated without the website operator's control and can negatively impact performance. Strategic planning and the integration of performance aspects from the outset are key to success, also with regard to effective Website Implementation with AI.

Checklist: Measures for continuous CWV optimisation

To consistently maintain Core Web Vitals at a high level, a structured approach is essential. This requires not only technical adjustments but also a change in development processes and in the awareness of the entire team. Here is a checklist for the most important steps:

  • Define performance budgets: Set clear thresholds for LCP, INP, CLS, and other performance metrics. For example: LCP < 2.5s, INP < 200ms, CLS < 0.1, maximum JS size < 300KB.
  • CI/CD integration: Integrate automated performance tests (e.g., Lighthouse CI) into your deployment pipeline. Any deployment that violates the performance budgets should trigger a warning or be blocked.
  • Regular monitoring: Use tools like Google Search Console or a Real User Monitoring (RUM) service to continuously monitor field data. Set up alerts to notify you of significant deteriorations.
  • Automate asset optimisation: Implement automatic image optimisation and conversion (e.g., to WebP/AVIF) in the build process. Use tools for minifying CSS and JavaScript.
  • Training and awareness: Train your development and content team on performance best practices. Everyone adding content or features to the website should understand the impact on CWV.
  • Review third party scripts: Regularly review all external scripts. Can they be loaded asynchronously or deferred? Are there lighter alternatives? Every additional script is a potential performance bottleneck.
  • Review caching strategies: Ensure your caching strategies (browser cache, server cache, CDN cache) are optimally configured and effectively utilised.
  • Regular audits: Conduct comprehensive performance audits at least quarterly to identify long term trends and deeper optimisation potential.
  • Consider accessibility: Many CWV optimisations also improve accessibility, as stable layouts and fast interactions are beneficial for all users. Pay attention to aspects such as font readability and the correct use of ARIA attributes. Find out more in our article on Accessible Web Design.

By following this checklist, you ensure that your website is not only fast once but maintains this speed over long periods. This is key to sustained success and customer satisfaction.

Why is Real User Monitoring (RUM) so important?

Real User Monitoring (RUM) collects data directly from users' devices. It measures how real visitors experience your website, including the effects of different devices, network conditions, and locations. This field data is crucial because lab data (e.g., from Lighthouse) can identify optimisation potential but cannot capture the entire reality. RUM provides the true Core Web Vitals values that Google also uses for ranking. It allows identifying performance issues that only occur under specific conditions and accurately tracking the impact of changes. Without RUM, you are flying blind.

A travel agency in Vienna used RUM and discovered that mobile users with older Android devices in rural areas had significantly worse LCP than lab measurements suggested. This insight led to targeted optimisations for this user group, resulting in an 8% reduction in bounce rate. This shows that RUM helps find the real bottlenecks and deploy resources purposefully. For a more comprehensive strategy in digital consulting, our Digital Consulting offering can be helpful.

Looking Ahead: Core Web Vitals and the AI Era

The importance of Core Web Vitals will continue to grow in the era of Artificial Intelligence (AI). AI systems that index and interpret content will increasingly evaluate the quality of the user experience. A fast, stable, and responsive website is not only pleasant for human users but also easier for AI agents to process and evaluate. Websites with poor CWV could be classified by AI systems as less trustworthy or of lower quality, which could impact visibility in AI generated search results or recommendations. Especially as AI systems begin to generate answers based on website content, an excellent technical foundation is crucial. You can find out more in our article on AEO in Practice: Writing Answers Cited by AI Systems.

Optimising CWV is therefore also an investment in the future viability of your digital presence. It optimally prepares your website for a world where AI systems will play an increasingly important role in mediating information and services. A high performance website is the basis for a positive experience, both for human users and for AI bots. Those who act now secure a competitive advantage.

Why a free GEO Check for your Core Web Vitals is important

A free GEO Check offers an initial, non binding assessment of your website's status regarding performance and visibility, including Core Web Vitals. It analyses how well your website is currently positioned and where the greatest optimisation potential lies. For Austrian companies, this is particularly relevant, as it can consider specific local aspects. Such a check can uncover weaknesses in LCP, INP, or CLS that you may not have been aware of. It provides a data driven basis for further decisions and helps you better assess the urgency and scope of potential optimisations. Start your free GEO Check today to get an initial picture of your digital performance.

During a GEO Check for a small online retailer from Styria, it was found that the mobile LCP of 5.2 seconds was significantly too high. The check identified the main problem: an unoptimised product image carousel. The insights from the check enabled the retailer to initiate targeted measures that improved the LCP to 2.8 seconds and led to an increase in mobile sales. This shows how valuable such an initial analysis can be.

Frequent Questions

Which value is most important?

Mostly Largest Contentful Paint, because it determines the first impression.

Is faster hosting enough?

Seldom alone. Images and scripts cause most of the waiting time.

How often should one measure?

Monthly and additionally after every major change.

Your Next Step

Would you like to implement this topic for your company? We will examine your initial situation, identify the three most effective measures, and tell you the effort and timeframe. Email us at office@zensations.at or start with the free GEO Check.

Read more at Zensations

Sources and Standards

Share

More on this topic

Development Image
Development

Why WordPress is the best choice for companies

Whether you are a start-up, a medium-sized company or a corporation – the website is often the first point of contact between a company and its customers. It is a shop window, business card, source of information and sales platform all in one. A good website determines trust, reach and ultimately sales. But which content […]

Read article