Google’s search algorithm values websites with strong technical performance and quick page speed. This ensures that high-ranking pages on search engine results load swiftly and offer seamless interactivity. To evaluate websites’ usability, Google relies on three measures called Core Web Vitals (CWV). By improving your website’s CWV, you can make it more accessible to users and boost its chances of achieving higher rankings on results pages.
What are Core Web Vitals?
Core Web Vitals are standards that Google uses to evaluate a website’s technical health and inform rankings on its search engine results pages (SERPs). Google’s algorithm evaluates these metrics for every page on a site, meaning certain pages might achieve higher scores than others.
There are three Core Web Vitals metrics:
1. Largest Contentful Paint (LCP)
LCP measures the time it takes to load the largest image or text block on a web page, indicating how quickly users can see meaningful content. It relies on the idea that you’re only as strong as your weakest link. Even if the rest of your page loads quickly, one slow-loading image can annoy users.
2. First Input Delay (FID)
FID measures the time it takes for a page to process a user interaction. This could be the time the page requires to respond to a user clicking a button. Users—and Google—expect websites to respond quickly to inputs so they feel interactive.
FID is a key metric in your website’s Core Web Vitals, but it will be replaced with Interaction to Next Paint (INP) in 2024. INP also measures responsiveness, but focuses on the time it takes for visual feedback to be delivered after a user interacts with a page. For example, when you add an item to your cart, you expect the cart icon to update, indicating that your item was added.
3. Cumulative Layout Shift (CLS)
CLS measures a page’s visual stability—whether your website’s layout shifts unexpectedly after it loads. For example, an ad unit takes longer to load than the rest of the page, and when it loads, it shifts the text down, frustrating or confusing the user who was reading it.
CLS is a metric Google uses to assess the impact of an element’s movement in relation to its size on the screen. The higher the score, the worse your page’s CLS. If an element like a large image causes the entire page to shift during loading, it will result in a higher CLS score compared to a minor movement caused by a single line of text.
How to measure Core Web Vitals
Google provides several different free tools for running a Core Web Vitals assessment, depending on your goals:
1. PageSpeed Insights
PageSpeed Insights (PSI) provides an in-depth audit for a single page. It evaluates more than just Core Web Vitals, covering a range of technical performance metrics and factors, giving each page an overall score between 0 (worst) and 100 (best). PSI presents findings in a prioritized, actionable format. For example, it estimates the potential time saved by making a change. Most users access PSI through the web, but it’s also available via API.
2. Google Search Console
Search Console allows you to check Core Website Vitals performance across all pages on your site at once. Search Console’s diagnostics are not as detailed as PSI’s, but it automatically checks all pages and tracks historical performance, giving you a high-level view of how your site performs and where you can improve.
3. CrUX Dashboard
The previous two tools are browser-agnostic, meaning they work on any web browser. Google provides a more specific set of diagnostics for how websites load on Chrome. Since Google owns Chrome, it can provide a higher level of specificity on how a site loads. This more specific analysis is called the Chrome User Experience (CrUX) report, and Google offers this data for free in the CrUX Dashboard.
The CrUX Dashboard is most helpful when you need more detail about how your website loads in a Chrome user’s browser—or when you need more robust visualizations for your site’s performance over time.
How to improve Core Web Vitals
To improve your CWV scores, review the diagnostics in PageSpeed Insights, Search Console, or the CrUX dashboard. The tools tell you which Core Web Vitals need the most work and can help you address them. For each Core Web Vital—LCP, FID, and CLS—you should aim for a Good score in PageSpeed Insights, which puts it in the 70th percentile of pages.
Here are some of the most effective fixes for each aspect of Core Website Vitals:
How to improve Largest Contentful Paint (LCP) scores
Follow these best practices to increase your page’s LCP loading speed:
Prioritize your LCP resource
Use PSI to identify the page’s LCP resource (the largest element) and add a fetchpriority=“high” attribute to the element you want to prioritize. This ensures the LCP loads before other less-important HTML elements.
Ensure your LCP resource is discoverable in the HTML
Some JavaScript-based pages serve images without an <img> tag. This slows down the LCP time since the JavaScript on the page must load before the image becomes visible. Instead, load the image using an <img> tag with a standard src attribute.
Implement lazy-loading
Add a native lazy-loading attribute (loading=“lazy”) to your non-LCP resources (most images, iframes, and JavaScript that are smaller or don’t load near the top of the page) so they load after your LCP resource.
Adjust your images
Create images with a lower resolution. For example, save an image at 72 dpi (dots per inch), which is the standard for web, as opposed to 300 dpi, which is standard for print. To avoid long loading times, create images adapted to the size of the screen. Use the proper image extension, prioritizing JPG to PNG.
How to improve First Input Delay (FID) scores
FID is typically caused by a large amount of continuously running JavaScript on a page. The browser takes time to run the scripts, causing a delay when users interact with an element. Here’s how you can improve your page’s FID score:
Reduce the amount of JavaScript on the page
Audit tools like PSI can help you uncover unneeded scripts, allowing you to streamline your page and make it more reactive. Consider centralizing JavaScript into one file rather than several files, if possible. Avoid using too many third-party JavaScript loads to increase speed.
Condense scripts
Tag management tools like Google Tag Manager can help you unify your scripts into a single line of code. This can reduce the work the browser has to do in response to user interaction.
How to improve Cumulative Layout Shift (CLS) scores
You can minimize your CLS by using these tips:
Set explicit sizes for loaded content
Adding width, height, and/or aspect-ratio attributes to your images tells browsers how to size the image. Without these instructions, browsers default to preloading an image as small as possible and then expanding it once it’s fully loaded, causing a shift.
Avoid animations that affect the layout
Animations (movement on the page) open up a larger CLS risk for websites. Animations that affect margin or border properties (for example, a button that expands when you hover over it) will likely lead to CLS issues.
Core Web Vitals FAQ
How do Core Web Vitals impact Google rankings?
Core Web Vitals is a ranking factor in Google Search. Strong Core Web Vitals scores can directly help your rankings, and weak scores can hurt them.
Are core web vitals the only factors that affect website performance?
No, many factors affect website performance. The Core Web Vitals are the most important aspects of a larger suite of website performance standards by Google, called Web Vitals.
Should I prioritize improving all Core Web Vitals equally?
Core Web Vital improvements should come after basic optimization like tag, content, and site structure optimizations. Aim to fine-tune all three Core Web Vitals to score in the Good range in PageSpeed Insights. Prioritize any aspect of Core Web Vitals on which your website scores Poor or Needs Improvement.
