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.
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 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:
The mobile LCP in the result above is a <h2> tag, a text element.
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:
The mobile largest layout shift with 0.004 seconds CLS in the result above is a <h2> tag, a text element.
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