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.
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.
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.
- Avoid elements that push content above existing content – Avoid slider plugins and use an image or a CSS background color.
- Apply correct image and div sizing – Use size attributes on images. Wp Rocket offers a feature to add missing size attributes.
- Move your CSS from theme editor to child theme style.css or main theme style.css file.
- Prefer theme/plugins that use transform animations over animations of properties that trigger layout changes.
Get your Core Web Vitals optimized