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 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.
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.
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
- Change the slider or the background image to a CSS background-color property or an animated CSS background with SVG
- Cut and use a different image for the mobile
- Use a CDN for images and SVGs
- Preload the Largest Contentful Paint (LCP) Image
- Serve HTML pages cache-first (Paid)
- Improve your TTFB, by choosing a better hosting
- Optimize DOM by avoiding page builders
- Improve icon font loading, remove unused icon fonts, or switch icons to SVG’s
- 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.
- Avoid elements that push content above existing content
- Use Critical CSS correctly
- Apply correct image and div sizing
- 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