Core Web Vitals WordPress: How to test & fix LCP and CLS

Updated on January 30, 2023 | By

Core Web Vitals are new metrics that are a part of the “Page Experience” Google ranking factor. Find out how to optimize WordPress and pass the metrics.

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

What are Core Web Vitals

The Core Web Vitals is an effort to improve the page experience of websites. CLS(Cumulative Layout Shift) 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 the other 3 metrics.

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, with INP (Interaction to Next Paint) currently in experimental mode.

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 LCP “Good” label, it should load within 2.5 seconds of when the page first starts loading.
  • To get FID “Good” label, pages should have a FID of 100 milliseconds or less.
  • To get CLS “Good” label, pages should maintain a CLS of 0.1 seconds or less.
image

How to check LCP and CLS

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, do a test simulating most of your userbase or set up a tool to capture Core Web Vitals field data.

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

To take a look at the historical data used by Google(CRUX )you can use Treo.sh. It offers a visualization of your field data for the last 28-day average and past year. It also offers granulation and 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

Consider the following solutions for solving or improving LCP issues:

  1. Setup Critical CSS
  2. Switch to lighter HTML elements
  3. Use CDN for images and SVGs
  4. Preload the LCP
  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. Use Critical CSS correctly
  2. Avoid elements that push content above existing content
  3. Apply correct image and div sizing
  4. Move CSS from theme editor to child theme style.css
  5. Prefer themes and plugins that use transform animations

Get your WordPress Core Web Vitals Optimized!

Leave a Comment