Everything of Core Web Vitals for WordPress: How to Test and Fix

Updated on May 30, 2023, by

The Core Web Vitals metrics are a part of the Page Experience Google ranking factor. It’s an effort from Google to improve the page experience of websites.

The current Core Web Vitals metrics CLS and LCP also make up 50% (25% each) of the Pagespeed score.

Even after 3 years of its announcement, the Core Web Vitals are still complex for many people, but you can grasp the concepts pretty easily and understand the impact on SEO, by reading our guide below.

This guide covers how to improve the Core Web Vitals of popular WordPress plugins such as Woocommerce and Elementor, with tips for fixing LCP(Largest Contentful Paint) and CLS(Cumulative Layout Shift) issues. Find out how to pass the metrics.

What are Core Web Vitals Metrics

The Core Web Vitals is an effort from Google to improve the page experience of websites. It’s part of the Page Experience Google ranking factor.

The three current valid metrics are CLS(Cumulative Layout Shift), which measures the visual stability experience of the website. LCP(Largest Contentful Paint) measures the loading experience of the website. FID(First Input Delay) measures the interactivity experience.

INP (Interaction to Next Paint) measures responsiveness and is currently in experimental mode and may join replacing FID.

Alongside Mobile-friendly, HTTPS, and No intrusive interstitials, they form what Google calls Search Signals for Page Experience, which is to be used as a ranking algorithm factor in Google’s Search.

Google said it intends to update the Page Experience Signals on an annual basis, with INP (Interaction to Next Paint) currently in experimental mode.

core web vitals google

Google states that in cases where many pages may be similar in relevance, the Page Experience algorithm can be much more important for visibility in Search. Core Web Vitals has been also found to have a direct positive impact on conversion rates.

Currently, Core Web Vitals are only supported by Chrome browsers.

How do Core Web Vitals metrics work

The Core Web Vitals metrics are ranked as “Good”, “Needs Improvement”, or “Poor” labels, followed by green, yellow, and red colors.

  • To get LCP “Good” label, the metric should have a load within 2.5 seconds of when the page first starts loading.
  • To get FID “Good” label, pages should have an FID of 100 milliseconds or less.
  • To get CLS “Good” label, pages should maintain a CLS of 0.1 seconds or less.

How to check LCP and CLS

Always check for Core Web Vitals field data as they are the only valid data for the algorithm. Field data is data collected anonymously from Chrome of live users. Find the full explanation and the difference between field and lab data here.

The Search Console Core Web Vitals data report may take a while or be delayed. To get fresh field data use Web Analytics by Cloudflare, which we have a guide for. You may also test simulating closely the device and speed connection of your userbase to get accurate data.

For historical field data used by Google, you can use Treo.sh. It offers a visualization of your field data for the last 28-day average aggregate by month. It also offers filtering metrics per country.

treo report
Core Web Vitals results – Treo

For testing Core Web Vitals lab data use Pagespeed or Web Vitals for CLS.

How to fix LCP in WordPress

Currently, the Wp Rocket plugin does have multiple features to assist in improving LCP, CLS, and even beta Core Web Vitals metric INTP. Nitropack is also a plugin to improve Core Web Vitals that offers better results for higher pricing. FlyingPress has been adding many features to fix Core Web Vitals.

The other plugins are:

Consider the following solutions for solving or improving LCP issues:

  1. Preload the LCP
  2. Setup Critical CSS
  3. Switch to lighter HTML elements
  4. Use CDN for images and SVGs
  5. Use Cloudflare APO
  6. Improve icon font loading or switch icons to SVG
  7. Limit access from users with bad Core Web Vitals
  8. Cut and use a different image for the mobile
  9. Avoid page builders or update yours

How to fix CLS in WordPress

Consider the following solutions for solving or improving CLS issues:

  1. Edit the element layout
  2. Use Critical CSS or Remove Unused CSS
  3. Avoid Sliders plugins
  4. Apply correct image and div sizing
  5. Move CSS from theme editor to child theme style.css
  6. Prefer themes and plugins that use transform animations

Do you want your Core Web Vitals optimized and get an SEO boost?

Subscribe to our Newsletter for WordPress tips and recommendations!

*We don't send spams

Notify of

Inline Feedbacks
View all comments