What is Core Web Vitals for WordPress and How to fix CLS and LCP

Last updated on May 13, 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.
image

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 userbase or setting up a tool to capture Core Web Vitals field data.

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

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:

image
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:

  • Setup critical CSS – Creates critical CSS to load early and improve LCP(may degrade your CLS).
  • Cut and use a different image for the mobile.
  • Use a CDN for images and SVGs plus lazyload your images – CDN speed ut the image load time.
  • Avoid page builders, and choose a fast theme.
  • Preload the largest contentful paint image and disable unnecessary lazyloading.

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.

  • Don’t push content above existing content – Avoid sliders plugins and use an image or a CSS background color.
  • Apply correct image sizing.
  • Setup critical CSS – Creates critical CSS to load early.
  • Prefer theme/plugins that use transform animations over animations of properties that trigger layout changes.

Stuck on Core Web Vitals?
Get your site optimized today

Leave a Comment