The CTO's guide to Core Web Vitals
.avif)
Contents
Executive Summary
Part 1: Defining Core Web Vitals
Part 2: The impacts of Core Web Vitals
Part 3: Improving Core Web Vitals
- Identify opportunities with RUM
- Prioritize optimizations with PageSpeed Insights
- Implement and iterate with Lighthouse
- Monitor trends over time with RUM
Core Web Vitals in Raygun
View trends over time and set up alerts
Executive Summary
Customer experience matters. Digital adoption continues to surge, and while the market is growing relentlessly, standards are sky-high, and competition is more cutthroat than ever.
Your team is required to deliver rich and complex digital experiences while keeping everything as frictionless as possible. With a mounting proliferation of data, it’s become increasingly difficult to know what to report on and how to maximize your engineering team’s limited hours. Google has stepped in to provide an answer to that question, defining and standardizing user experience with three performance metrics called Core Web Vitals.
In this definitive guide, you’ll get an overview of Core Web Vitals, their impact on your business, and how to equip your team to improve scores and boost KPIs.
Introduction
If you’ve already heard about Core Web Vitals, you’ve probably seen them as just another requirement from Google that can hurt your search engine visibility. That’s far from the full picture.
Core Web Vitals are a long-overdue opportunity to see your software through the eyes of your user, create a unified focus on customer experience throughout your organization, and future-proof your business.
Scoring highly will also protect your search ranking and organic traffic, but Core Web Vitals are really about better digital experiences, delivering a fast-feeling, performant site that attracts and delights customers. This unifies your engineering, marketing, and design teams with a shared goal, and better yet, extends user sessions, reduces bounce rates, and increases conversions.
Part 1: Defining Core Web Vitals
As site builds become heavier while attention spans shorten, performance must be viewed through the lens of user experience. But the array of available tools and metrics aren’t helping teams to answer the question that matters most: are my customers having a good digital experience?
In 2020, Google set out to provide a simple and unambiguous way to objectively understand the user experience. A rigorous research and development process produced three new metrics: Core Web Vitals.
Each Core Web Vital represents a distinct facet of the user experience: loading speed, interactivity, and visual stability.
Speed: LCP (Largest Contentful Paint)
How long does it take to load the largest element on the page? This could be text, an image, a banner, or a video. To get a “Good” score (as defined by Google), the largest visible piece of content needs to load in less than 2.5 seconds.
Responsiveness: INP (Interaction to Next Paint)
Does the page appear responsive (by painting a new frame) to user interactions like swipes or taps on a button? This measures the combined reaction time of all the interactions a user has with your page during their session. To get a “Good” score, the reaction time must be within 200ms on average. (Note that INP replaces the former interactivity metric, FID, from March 2024).
.png)
Stability: CLS (Cumulative Layout Shift)
How stable is the page - does it shuffle around as it loads? This measures the visual stability of a page as it renders on the screen, measuring the proportion of the viewport affected and the distance for every unexpected shift across the entire lifespan of the page. The score starts at zero, and the larger the number, the more shifts on the page. To get a “Good” score for CLS, the page should maintain a score of 0.1 or less.
In the interests of ranking pages that provide consistent quality, Google officially implemented Core Web Vitals as a ranking factor in their Search algorithm for mobile in May 2021 (further rolled out onto desktop in February 2022). This introduced pressure on businesses to ensure their Core Web Vitals are meeting the standard, or risk losing organic placements, and in turn, diminishing traffic and revenue.
If you rely on your site to drive revenue, and want to turn up early and often in search engine results, you need to care about Core Web Vitals. In particular, retail and e-commerce companies that depend on high traffic and return customers must focus on page responsiveness, stability, and interactivity, or risk losing customers to the competition.
Core Web Vitals matter for stakeholders in engineering, marketing, design, leadership, and beyond. You need buy-in from all these functions within the business to get the best possible scores and results.
The target
Your Core Web Vitals scores can fall into three distinct categories: “Good”, “Needs Improvement”, and “Poor”.
Your site is scored on the 75th percentile of users for the preceding 28-day period. Scores fall into these categories when 75% or more of your users experience the following:
.png)
Meeting the “Good” thresholds will give you an advantage in search ranking, while the other benefits associated with better scores, like higher conversions and reduced bounce, will continue to improve as you optimize.
Improving and maintaining Core Web Vitals starts with getting to green, but continues into improved digital experience and all the associated business benefits.
Getting your scores
Before you can take action, you need to know where you’re starting from.
Some industries have an advantage: B2B, healthcare, and directory sites tend to score well, as they’re usually text-heavy with fewer widgets and less multimedia content. The worst-performing categories are fashion and travel, which tend to feature images and videos, impacting their LCP, plus heavy dynamic content like ads which affect visual stability (CLS).
There are a few ways to quickly get your baseline scores, but monitoring Core Web Vitals on multiple tools produces some variation in your results. This is because monitoring metrics are based on different datasets — synthetic/lab, CrUX (Chrome User Experience Report), and RUM (Real User Monitoring), all of which serve a different purpose when monitoring and improving your scores.
Let’s dive into what makes each source unique, the pros and cons of each, and why using one alone isn’t enough.
Lab data
A synthetic data set that you can generate as needed. Perfect for benchmarking and testing site performance using a controlled environment and a standardized set of conditions, or for testing an app in production that has no live users yet.
For example, Lighthouse is one of Google’s Chrome DevTools, and calculates Core Web Vitals scores by simulating a mobile device running on a fast 3G network and slowed CPU.
Pros
- Invaluable for getting a quick state-of-play and understanding the impact of recent optimizations
- Ideal for testing a website before launch when real user data doesn’t exist yet
Cons
- Can’t be relied upon for a true indication of your users’ experience under real-world conditions
- Can’t be used to test INP, as this measures interactions and requires a user
Field data
Field data measures how real people interact with and experience your website in the wild, across different browsers, devices, internet speeds, and other variables, to give you accurate performance insights to move beyond your synthetic lab data. For the purposes of Core Web Vitals, there are two sources of field data:
Google’s PageSpeed Insights uses the CrUX dataset to report Core Web Vitals and performance data from Chrome users who have opted-in to syncing their browsing history and usage statistic reporting.
Pros
- Built and maintained by Google
- Provides suggestions on how to improve Core Web Vitals scores
Cons
- Reports data gathered over the past 28 days, creating a 4-week delay
- Limited to a subset of Chrome Users
- Requires a critical mass of traffic for CrUX reporting to work
Real User Monitoring tools like Raygun gather and report on field data from your entire user base with granular detail.
Pros
- Reveals how real users are experiencing your site, without sampling or skewing towards a particular subset
- Ability to segment into specific web pages, demographics, browser/OS, and users
- Can display specific timeframes and trends over time, plus real-time scores
Cons
- Requires set-up (typically just a few lines of code)
While Google’s tools provide enough data for you to have some sense of your Core Web Vitals performance, Real User Monitoring is key to understanding what’s happening in real-time across all your visitors. In fact, Google’s own team recommends adding RUM for accurate data-gathering and diagnostics.
%2520(6).png)
The ongoing opportunity
The challenge of Core Web Vitals is not only to meet but to maintain Google’s thresholds. Most sites start out lean, but as time goes on, marketers request heavyweight ads and high-resolution videos and pictures, developers start splicing in their favorite libraries, and standards slip. Core Web Vitals need to be monitored as part of ongoing work.
The goal isn’t to create more development work; it’s to motivate everyone to think about performance from the user’s point of view.
Performance mindset
Core Web Vitals aligns the “customer obsession” ethos of your marketing and sales functions with the performance aspirations of your product owners, developers, and engineers. It’s much more than just an arbitrary benchmark. These three scores show objectively how fast and seamless your site is for your customers.
Even more importantly, smoother and faster-running sites tend to have much better bounce rates and conversions over slower-running, creakier competitors.
There are some real advantages for engineers too, but the biggest opportunities are for engineering leads and executives to get their development teams tightly focused on driving business value. Using Core Web Vitals as a benchmark will keep your engineers focused on the user experience, instead of the latest shiny technical objective that doesn’t necessarily produce meaningful impacts for your customers.
Part 2: The impacts of Core Web Vitals
Google’s stance has brought front-end performance directly into the boardroom, clearly connecting CX and business outcomes. This is significant, as it indicates that Google — and the world of web performance — is moving towards an unprecedented focus on site usability and customer experience.
Google has uncovered a range of business metrics they’ve seen linked to Core Web Vitals, including:
- Session length
- Bounce rate
- Returning users per pages/session
- Number of transactions
- Cart value
- Cart abandonment rate
Optimizing for Core Web Vitals resulted in 22% less abandonment for news sites and 24% less abandonment for shopping sites, businesses whose success depends on traffic and task completion.
We all know that site speed still matters. Research from Portent shows that a site that loads in 1 second has a conversion rate 3x higher than a site that loads in 5 seconds, and 5x higher than a site that loads in 10 seconds. Shopify reports that 57% of shoppers have left a slow site to buy from a competitor.
- 1s to 3s, the probability of bounce increases by 32%
- 1s to 5s, the probability of bounce increases by 90%
But Core Web Vitals zoom in even further to measure perceived site speed, so you can optimize for experience over technicalities. It’s the old adage of the duck on the pond; to the observer, it’s an effortless glide across the water, but underneath you’re paddling hard. Core Web Vitals are the most visible performance signals, and any other metrics you track or changes you make under the surface (say, your back-end or CMS) just aren’t as critical to that perception.
Say a customer gets a 20s render time, or a panel shift means they unintentionally open an ad. 99% of these customers will never submit a user report. They’ll leave, and many won’t come back.
So, Core Web Vitals matter both to your users and your business. We can’t put it better than Google:
“....Regardless of the amount of time spent, decision-makers should treat this as a long term investment into growth of their business. Delivering a fast and seamless navigation experience delights users and helps turn them into loyal and returning customers.”
Surprisingly, your competitors likely haven’t grasped their importance yet, and their lag is your (potential) gain. A March 2022 assessment of 1.8M URLs found that only 38% were passing all 3 Core Web Vitals, so you still have time to get ahead of the curve.
This window of opportunity won’t last forever. By taking a proactive approach to improving your Core Web Vitals scores, you not only gain an edge on your Google search ranking, but more importantly, lead the standard for great digital experience.
Impacts: Search Ranking
Lab data is perfect for benchmarking and testing site performance using a controlled environment and a standardized set of conditions. Popular Google Chrome tool, Lighthouse, calculates your Core Web Vital scores by simulating a mobile device running on a fast 3G network and slowed CPU, while also identifying opportunities to improve the user experience.
Lab data can be invaluable for getting a quick state-of-play and understanding the impact of recent optimizations, and it’s also ideal for testing a website before launch when real user data just doesn’t exist yet. However, it can’t be relied upon for a true indication of your users’ experience under real-world conditions.
Impacts: KPIs
Core Web Vitals have a significant bearing on both bounce rates and conversions, with faster, smoother sites resulting in a healthier bottom line. When shopping sites meet the “Good” mark on all three metrics, users are 24% less likely to abandon the page mid-load. Here are some of the most compelling case studies:
%2520(7).png)
Core Web Vitals make your site feel fast, smooth, and trustworthy to an increasingly impatient and savvy market, and translate into real gains in revenue.
Part 3: Improving Core Web Vitals
Google judges each of your Core Web Vitals independently, so it’s important to spread your optimizations across all three. Simply focusing on one or two metrics will backfire in the long run, so aim to get all three hitting “Good” for the best results.
When it comes to organic search, Google will monitor the performance of individual pages, not your entire site. Choose your approach tactically, focusing your team’s attention on the pages that get the most traffic or are of the greatest importance to your business.
Your approach to optimization may even depend on the nature of your product. Deloitte reports that “retail consumers are most sensitive to speed in the pre-checkout stages of their conversion journey”, while luxury shoppers responded dramatically to a 100ms speed increase at the product detail to “add to basket” stage. To focus time and effort on the highest-impact pages, leverage all the data you have about your specific user journeys, test and optimize.
Generally speaking, however, speed gains have the biggest impact on high-intent, high-traffic pages like checkout, login, product category and home pages.
Achieving alignment
Businesses that have enjoyed the economic effects of improved Core Web Vitals scores report that the first and most important part of the optimization effort is getting buy-in from cross-functional teams. As a technology leader, this initial push for alignment falls to you.
According to Pfizer, the first step was to get their senior leaders, developers and marketing team in a room together, to review their numbers and reach a consensus. Pfizer unified to elevate their mobile experience sites, creating pages that loaded 38% faster, and bounce rate was reduced by 20%.
TUI, who achieved a 31% decrease in bounce rates, a 78% reduction in load times, and an 11% increase in mobile conversion rate, attribute their success not just to improved code, but “the right organizational setup and mindset.” Here’s how their process played out:
- Getting buy-in from management up-front, starting with TUI’s CEO
- Establishing cross-functional teams
- Welcoming a test-and-learn mindset and using agile processes
"[With] dialogue between management, stakeholders and developers…UI designers started to include speed in the design process and innovate with the developers. At the same time, we kept on talking about the benefits of speed at every level of the organization. By making it relevant to individual people’s focus areas - discussing bounce rate with SEO people or monetary upsides with the finance team - the vision became shared.”
Mail.ru boosted average session time by 2.7% and conversion rates by 10% by making Core Web Vitals an organization-wide objective:
“We stressed the importance of Core Web Vitals to all members of our product team, from managers and designers to testers and QA. Each team member should be aware of performance metrics and be empowered to improve them. We also incorporate performance optimization objectives into our business processes on a regular cadence.”
The team
Your cross-functional Core Web Vitals team could include experts in marketing, SEO, UX, and Design. The essential functions/roles that should be represented are:
- Leadership
- Technical
- Product/Design
- Customer behavior
- A project manager (one of the above could also serve as project manager)
This group will define and oversee the first Core Web Vitals push for existing pages, and ensure that these scores are considered at each stage of development for new projects, from planning and discovery, considering the performance cost of elements during content mapping and wireframing, and weighed against any and all integrations, forms and plugins.
While leadership and engineering are the key players, it pays to add customer and market-facing team members to speak to key growth targets, keep an eye on competition and measure campaign-based optimizations, plus technical experts, planners, and any additional implementation experts.
An example team might look like this:
Executive: Brings the team together, sets expectations and deadlines and establishes channels of communication and methods of collaboration.
Engineer: Include both front-end and back-end specialists. Involve your technical participants early, as they’ll help with realistic scoping as well as doing the actual optimization work.
Design/UX: Guardians of the customer, balancing form and function. Will make sure that clarity and intuitiveness isn’t lost in the push for better scores.
Marketer: Understands the user’s objectives and behaviors. Should be involved in discussions about the role of content in CX and consulted on site performance to better understand and challenge the impact of design and technology choices.
Product Owner: Helps manage the process of turning ideas into technical implementation, defines requirements, and sets timelines.
External partners: Platform experts, contractors, or hosting partners can help flag limitations or expand possibilities.
The tactics
Some teams have seen successful results even in lightweight short pushes, where companies just focused strategically on the “low-hanging fruit” or even drilled in just on page load times on one particular page. Others have invested time into improving scores as a holistic, long-running program.
Let's run through some Core Web Vitals success stories to understand how these were implemented as a practical goal, and what impact they had.
Vodafone ran an experiment where they built two versions of the same advertising channel, with one version refactored and optimized for Core Web Vitals (LCP in particular). Their changes were relatively simple: moving the rendering logic for a widget from client-side to server-side, reducing render-blocking JavaScript, server-side rendering critical HTML, and optimizing images.
The results trickled down to the entire conversion channel: users stayed longer, and converted at a significantly higher rate.
%2520(8).png)
img source: web.dev/vodafone
Tokopedia: To make Core Web Vitals the north star of performance and unite the entire organization, Tokopedia published a company-wide dashboard to track each Core Web Vital metric in real-time with Real User Monitoring.
Again, they focused on LCP as the score with the most room for improvement, experimenting with rendering techniques, server-side rendering their header dynamic banner image and optimizing images. This delivered 55% better LCP, and ultimately saw a 23% uplift in average session duration. To achieve this, Tokopedia focused closely on the most essential pages within their conversion funnel, a concept borrowed from the growth side of the business.
Flipkart employed server-side A/B testing to prove out Core Web Vitals, improving their LCP score by a factor of four and seeing a 2.6% lower bounce rate.
The tools
Core Web Vitals provide powerful justification to finally secure the monitoring tools that your development team has been asking for, and your entire organization will benefit from.
The secret to improving Core Web Vitals scores and customer experience is Real User Monitoring (RUM). Part of the challenge for our designers and engineers can be met with Google’s developer tools, but to really improve and maintain scores, we have to follow Google’s recommendation and invest in RUM.
Here’s how a Real User Monitoring tool works hand-in-hand with Google’s PageSpeed Insights and Lighthouse to accelerate optimization work and improve CX.
(If you’re wondering how your current CMS, library or framework stacks up as a contributing factor to your scores, check out the Core Web Vitals technology report, which shows the performance of different technology choices across time. Or for a detailed breakdown of optimizations and a workflow that your development team can use to increase scores, see our Developer’s Guide to Core Web Vitals).
Step 1: Identify opportunities with RUM
First off, establish how your website is performing in your users’ eyes across all three metrics with Real User Monitoring. In Raygun, you can use the P75 toggle to see how your site stacks up against Google’s thresholds (remember, scores are based on the 75th percentile) and detect any recent spikes or trends.
Since Core Web Vitals are calculated on a per-page basis, your team needs to begin by identifying the pages that represent “easy wins”, based on their traffic, importance, and room for improvement.
Modern RUM tools automatically group the slowest and most requested pages. This provides a great starting point to drill into individual pages and see how they score. Cross-reference these against the pages that are pivotal to your business goals, and shortlist pages to optimize.
At this point, you might choose to implement A/B testing on high-intent pages like pricing, cart or promo pages to prove the impact of Core Web Vitals on business-critical KPIs.
Step 2: Prioritize optimizations with PageSpeed Insights
PageSpeed Insights is the fastest way to find possible optimizations. Just enter a page URL to see a list of suggestions and their estimated impact.
%2520(10).png)
At this point, your team can identify the specifics that are holding back your Core Web Vitals and apply best practices specific to your tech stack and objective.
Step 3: Implement and iterate with Lighthouse
As your team adds optimizations, use Lighthouse to test their effectiveness immediately without having to wait for users to interact with your page.
%2520(9).png)
While this lab data is a good initial indication, the real results will only be available via Real User Monitoring. RUM requires real website traffic, so the amount of time you’ll need to wait for meaningful insights will depend on volume.
To see the impact of changes in RUM, adjust the timeframe to only show new traffic since the last deployment. Then use this data to make informed decisions about what worked and what didn’t.
Step 4: Monitor over time
Track how your scores are trending by comparing specific timeframes in RUM, or observe the trends for each individual metric. To prevent regressions, set up alerts to notify your developers if any Core Web Vital drops below your performance benchmarks.
After 28 days, you can also see how your Core Web Vitals have improved in Google’s eyes, through your CrUX data. While RUM is your best tool for tying Core Web Vitals to business outcomes, CrUX is more closely connected to search ranking.
Core Web Vitals in Raygun
Let’s get even more specific to understand what makes Raygun’s first-class support for Core Web Vitals so powerful.
%2520(1).png)
Raygun displays the critical data for all three Core Web Vitals. This is real user data - showing the actual speeds seen by customers. This shows, at a glance, the total number of users affected in each score category. Click into any score segment to see the full cohort of affected users in each.
A full breakdown and diagnostic of load times and Core Web Vitals can really help drive down repro times for your developers and support teams. Dive into individual sessions to see what pages a user visited along with performance diagnostics of every page request showing a full waterfall breakdown of load times across DNS, latency, SSL, server, and transfer times.
%2520(12).png)
Finding a starting point is the first challenge when you’re dealing with 3 different scores across every page on your site. A chart like this will give your engineering teams a specific page that is performing poorly, and even better, one specific Core Web Vital they can target to start getting those easy wins.
%2520(13).png)
Filter by what matters to you most
Filtering helps you zero in on your goals. It’s likely that your most important customers fall into one or two regions, or skew towards a particular browser or device type. Being able to filter this data by different segments over time allows you to focus on the pages that are impacting the most important customers.
If your business goals are focused on the United States market, for example, you can filter traffic to see exactly how users in the U.S are experiencing each of your Core Web Vitals and optimize accordingly.
View trends over time and set up custom alerts
Monitor how your Core Web Vitals are trending over time to track the success of optimizations for your customer.
Trends help show any outliers in your scores over time, especially with filters applied. Monitor trends at an individual page level to analyze which optimizations have the biggest impact on your page’s performance.
Get your team to set up custom alerts to ensure accountability, promote awareness and prevent regressions. Control what triggers an alert across filters such as location, browser, URL, and more.
Conclusion
Google’s introduction of Core Web Vitals gives you a chance to improve customer experience and prove the value of development work. Core Web Vitals have been painstakingly selected as the definitive indicators of user experience, but leaders must also consider their wider impact on performance, behavior, and profit. The broader Web Vitals program will continue to evolve and expand as Google builds and iterates on these emerging scores as a measure of experience. But while some details may change, search rankings and business success will only be increasingly tied to the perceptions of the user.
Creating an overall culture of customer-centric development and uniting teams around CX will keep you ahead of the curve going forward. Real User Monitoring forms a critical connection between your code and your customer, to set your organization up for lasting innovation and success.
