Site Performance: About Core Web Vitals
8 min
In this article
- What are the Core Web Vitals?
- Improving the Largest Contentful Paint (LCP) metric
- Improving the Interaction to Next Paint (INP) metric
- Improving the Cumulative Layout Shift (CLS) metric
- Performance measuring tools
- The difference between mobile and desktop scores
- Core Web Vitals and SEO
- FAQs
Core Web Vitals are a set of three metrics that assess the experience visitors have when browsing your site. These metrics measure the loading time, interactivity, and visual stability of your site.
Search engines like Google consider Core Web Vitals when determining the ranking of your site. Enhancing these metrics boosts your site's visibility in search results and also improves your visitors' browsing experience.
What are the Core Web Vitals?
Core Web Vitals are important as they measure your site's performance with data from real world usage and visitor experience, as well as lab data from simulated sessions. They display how your site is currently performing, and can provide insights on areas that may need improvement.
The three Core Web Vitals currently in use by Google are as follows:
- Largest Contentful Paint (LCP): An indication of a site's loading time - more specifically, how long it takes for the largest content element in the site's viewport to load.
- Interaction to Next Paint (INP): An assessment of your site's responsiveness to all click, tap, and keyboard interactions that occur throughout each visit on every page. The final INP value is the longest interaction observed.
- Cumulative Layout Shift (CLS): A measurement of unexpected movements of elements that change the layout of the page.
These vitals, along with other measurements, accumulate to provide an overall score for your site's pages.
Improving the Largest Contentful Paint (LCP) metric
The Largest Contentful Paint (LCP) measures the time it takes for the browser to load and display the largest element, excluding background images.
Consider the following information when working to improve your LCP metric:
- Text-based LCP elements: For text-based LCP elements, prioritizing quick loading is key. Opting for system fonts can significantly improve performance. However, if a custom font is necessary, we recommend utilizing the WOFF2 format for optimal results.
Tip: In the Studio Editor, enable Default Fonts if your LCP relies on text and includes a custom font. - Image-based LCP elements: For image-based LCP elements, it's best to upload images in either JPG or WebP formats. JPGs, in particular, can offer substantial file size reductions, up to 10 times lighter than PNGs.
- Other tips: To streamline the loading process and enhance the experience of your visitors, keep your webpage design simple and minimize unnecessary content. Consider placing heavy elements such as galleries, videos, and store widgets below the fold to prioritize faster loading for critical content. Avoid animating your LCP elements, as animations like fade-in effects only initiate once your site has fully loaded.
Improving the Interaction to Next Paint (INP) metric
Enhancing the Interaction to Next Paint (INP) metric involves simple steps to streamline your site's performance.
To improve your site's INP metric:
- Review any third-party code snippets added to your site. You can easily review and manage these snippets within the Custom Code Settings, Marketing Integrations, and scripts associated with third-party apps. Consider removing any code that doesn't provide clear value to your site's functionality.
- Limit the number of apps and widgets on each page. Pages overloaded with applications and widgets tend to be more complex and prone to issues. Simplify your pages whenever possible, and refrain from excessive use of applications and widgets that aren't essential to your site's purpose.
Improving the Cumulative Layout Shift (CLS) metric
Improving the Cumulative Layout Shift (CLS) metric involves making simple changes to keep your site's layout stable.
To improve your site's CLS metric:
- Consider reorganizing your site's DOM order:
- Wix Editor: The DOM order is automatically structured for left-to-right scripts. However, if your site uses a right-to-left script such as Arabic or Hebrew, you'll need to manually adjust the DOM order in the Layers panel.
- Studio Editor: Wix Studio sites have an automatic DOM order, with the option to review and adjust the order of the components via the Layers panel.
- Update ad placements to minimize their impact on CLS. Placing banner ads at the top of the page can disrupt layout stability. Instead, consider positioning ad components below the fold, such as with Google AdSense ads, to reduce CLS issues.
Performance measuring tools
You can use various tools to gain insights into your site's performance. These tools typically include real visitor data and estimated lab data.
Important:
We highly recommend focusing on real visitor data. You can view this data in two places: the Wix Site Speed dashboard's "Real Visitor Experience" section and Google PageSpeed Insights' "Core Web Vitals Assessment" section. Use these metrics to best understand what your site visitors experience when they load and navigate your site.
Click below for more info about performance measurement tools:
Wix Site Speed dashboard
Google PageSpeed Insights
Core Web Vitals Report
Other third-party testing tools
The difference between mobile and desktop scores
When reviewing your site's Core Web Vitals, you'll receive two distinct reports: one for mobile and another for desktop. It is likely that the two overall scores will be different.
A few factors contribute to this normal difference in scores between mobile and desktop, including:
- Mobile devices usually have slower processors than desktops.
- Mobile networks (like 3G, 4G, LTE, and 5G) can be slower than WiFi or ethernet connections used by desktop devices.
Core Web Vitals and SEO
Core Web Vitals are crucial indicators of your site's performance and are among the various factors considered for your site's SEO ranking.
The performance SEO boost is applied to mobile and desktop pages separately. Each page, whether mobile or desktop, can receive up to three boosts, one for each Core Web Vital:
- Good: Indicates the metric scores earn a Full SEO boost (green).
- Needs Improvement: Indicates the metric scores earn a Partial SEO boost (yellow).
- Poor: Indicates the metric scores receive No SEO boost (red).
For instance, a mobile page might get a partial SEO boost for LCP and INP, but a full boost for CLS.
Meanwhile, the desktop version of the same page might receive a full SEO boost for each metric.
Your Core Web Vitals Assessment will show as ‘Failed’ unless you receive a ‘Good’ score for all three Core Web Vital metrics. This does not mean the page hasn't received a boost, as each metric contributes a boost independently.
Google Search always aims to display the most relevant content, even if the page experience isn't perfect. For most queries, there is a lot of helpful content available. So having a great page experience can contribute to success in search ranking.
Content remains the most important factor in maintaining your SEO score. We recommend optimizing your site's content, as well as updating your page's meta tags. Learn more SEO best practices.
FAQs
Click below for answers to the most common questions about Core Web Vitals.
Why haven't my site's metrics improved after I made changes?
How could my site's performance have gotten worse since INP replaced FID?
