What’s Core Web Vitals in WordPress and How to fix LCP & CLS

Last updated on September 15, 2022 | By

Core Web Vitals is the new Google ranking factor. Find out how to make your WordPress ready to pass the metrics.

This post covers 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.

What are Core Web Vitals and how to check LCP and CLS

The Core Web Vitals is an effort to improve the page experience of websites. CLS(Cumulative Layout Shift) measures the visual stability experience of your website. LCP(Largest Contentful Paint) measures the loading experience of your website. FID(First Input Delay) measures the interactivity experience.

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 search ranking algorithm. Google said it intends to update the Page Experience Signals on an annual basis.

core web vitals google

How do Core Web Vitals metrics work

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

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

How to check Core Web Vitals

As a tip of ours, always check for Core Web Vitals field data or strive for results from live users. Since Search Console Core Web Vitals data may take a while or be delayed for small website owners, we recommend testing simulating most of your user base or setting up a tool to capture Core Web Vitals field data.

To get field data you can use Web Analytics by Cloudflare, which we have a guide for.

To take a look at google’s CRUX database you can use an online tool. Treo.sh offers a UI visualization of your field data, for both the last 28-day average and past year data. It also offers granulation of your data per country and filtering metrics per country.

treo report
Core Web Vitals results – Treo

If you want to create a report of your Core and Web Vitals field data, you can go to g.co/chromeuxdash and type in your website, and on the next page, click Create Report to continue.

core web vitals report
Core Web Vitals report – Google Data Studio

For testing Core Web Vitals lab data and field data(when your website has enough data) use Pagespeed. Go to Pagespeed Insights, and do a page test. There are two results, mobile, and desktop.

How to check LCP (Largest Contentful Paint)

Go to Pagespeed Insights, do a page test, and go to “Largest Contentful Element” under the results. There are two results, mobile, and desktop, the first we go to is mobile:

image 3
Pagespeed mobile LCP test results

The mobile LCP in the result above is a <h2> tag, a text element.

image 4
Pagespeed desktop LCP test results

The desktop LCP in the result above is also a <h2> tag, a text element.

How to check your CLS (Cumulative Layout Shift)

Go to Pagespeed Insights, do a page test, and go to “CLS” under the results. There are two results, mobile, and desktop, the first we go to is mobile:

Pagespeed mobile CLS test results

The mobile largest layout shift with 0.004 seconds CLS in the result above is a <h2> tag, a text element.

image 1
Pagespeed desktop CLS test results

The desktop’s largest layout shift with 0.001 seconds CLS in the result above is two <h2> tags and text elements.

How to fix LCP and CLS in WordPress

LCP(Largest Contentful Paint) and CLS(Cumulative Layout Shift) are part of the Core Web Vitals ranking algorithm. You will need a plugin with a full-suite solution to fix these, consider using either Wp Rocket or Nitropack. Check their comparison here.

How to fix LCP(Largest Contentful Paint) in WordPress

If you couldn’t solve the “lcp issue: longer than 2.5s” issue, you can switch your header background from an image to a simple CSS background color(gradient-color) or an animated CSS background. This can remove more than 2 seconds in some cases from LCP loading time. It can also reduce the CLS.

Additional ways to fix or optimize LCP may include:

  1. Setup Critical CSS
  2. Change the slider or the background image to a CSS background-color property or an animated CSS background with SVG
  3. Cut and use a different image for the mobile
  4. Use a CDN for images and SVGs
  5. Preload the Largest Contentful Paint (LCP) Image
  6. Serve HTML pages cache-first (Paid)
  7. Improve your TTFB, by choosing a better hosting
  8. Optimize DOM by avoiding page builders
  9. Improve icon font loading, remove unused icon fonts, or switch icons to SVG’s
  10. Limit access from a region with failing Core Web Vitals

How to fix CLS(Cumulative Layout Shift) in WordPress

After getting field data on Search Console, you’re gonna get Core Web Vitals results. If you’re presented with CLS issues, here are solutions for solving or improving CLS.

  1. Avoid elements that push content above existing content
  2. Use Critical CSS correctly
  3. Apply correct image and div sizing
  4. Move your CSS from theme editor to child theme style.css or main theme style.css file
  5. Prefer theme/plugins that use transform animations over animations of properties that trigger layout changes

Get your Core Web Vitals optimized

Leave a Comment