WordPress Core Web Vitals: Test and how to fix CLS and LCP

Last updated on January 26, 2022 | By

The guide covers Core Web Vitals of popular WordPress plugins such as Woocommerce and Elementor, with fresh tips for fixing LCP and CLS issues.

Understanding Google 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 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

Understanding Core Web Vitals rank

The Core Web Vitals are ranked as “Good”, “Needs Improvement” or “Poor” labels, together with green, yellow and red colors.

  • To get a LCP “Good” label, it should loads 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 your 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: How To Get Core Web Vitals Field Data

For testing Core Web Vitals lab data and field data(when your website has enough data) use Pagespeed. Go to Pagespeed Insights, do a page test. There are two results, mobile, and desktop.

How to check your LCP

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

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, text elements.

Get your WordPress a Core Web Vitals optimization!

Send us your request.

How to fix “LCP more than” issue in WordPress (Largest Contentful Paint)

As mentioned, LCP(Largest Contentful Paint) measures the loading experience of your website, to improve them, consider the following:

Optimize DOM (avoid page builders)

Consider a theme that has a mobile-first CSS approach, a stylesheet for mobile and desktop. Update your theme builder to the latest release, it may have improvements on its CSS, and thus the DOM.

Elementor has a feature to optimize the DOM, go to Elementor > Settings > Advanced. Using this feature can potentially break your website features, use it wisely.

domsetting
Elementor Optimize DOM feature

Critical CSS

Consider a critical css plugin to load the essential css before any assets. Jetpack recently launched Jetpack Boost plugin for free and it generates Critical CSS for your homepage, posts, and pages. You can also use WP Rocket and its Optimize CSS delivery feature.

Use a image CDN(and SVG’s) plus lazyload

Upgrade the load time from your images, with an image CDN(Content Delivery Network). If you have many background images, you need to choose an Image CDN service that supports background images, or use Jetpack Image CDN and add the images manually:

if (function_exists('jetpack_photon_url')) {
$image = jetpack_photon_url($image);
}

Replace $image with whatever variable or function is being used to store the image URL or an id, class from the image.

Image CDN plugins:

Jetpack(Free unlimited image CDN)

ImageKit (Free 20GB monthly tier, SVG support, WEBp support)

Switch the slider/background image of the main header to a CSS background color or an animated CSS background(with animated SVG)

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 +2 seconds in some cases from the LCP loading time. As we’ve told, this tip can also reduce the CLS.

In any case, consider a CSS-based solution to reduce the amount of loading time for the LCP, and fix the “lcp issue: longer than” issue.

Preload the Largest Contentful Paint image and disable lazyloading

Lazyloading the LCP image may delay its appearance. You can disable the lazyload and preload the logo and the first image of the slider, for example. To preload the LCP image, follow the steps:

  • Install the Head & Footer Code
  • Go to the page where you want to preload the images
  • Add the following preload <link> tags to Header & Footer Code > Head Code
<link rel="preload" as="image" href="your_image_here.png">

To preload a responsive image you can add imgsrcset and imagesizes to the <link> element. For preload the following image:

<img src="bear.jpg" srcset="bear_400px.jpg 400w, bear_800px.jpg 800w, bear_1600px.jpg 1600w" sizes="50vw" alt="bear test image">

You can do as follows:

<link rel="preload" as="image" href="bear.jpg" imagesrcset="bear_400px.jpg 400w, bear_800px.jpg 800w, bear_1600px.jpg 1600w" imagesizes="50vw">

How to fix “CLS more than” issue in WordPress (Cumulative Layout Shift)

As mentioned, Cumulative Layout Shifts measures the visual stability experience of your website, to improve them, consider the following:

Move your CSS from theme editor to child theme style.css or main theme style.css file

If you are using large CSS styling on the theme built-in CSS editor or in the WordPress Customize “Additional CSS” section, you may move the CSS from those to the main theme CSS file (style.css) or the child theme.

Critical CSS

Consider a critical css plugin to load the essential css before any assets. Jetpack recently launched Jetpack Boost plugin for free and it generates Critical CSS for your homepage, posts, and pages. You can also use WP Rocket and its Optimize CSS delivery feature.

If you haven’t bought Wp Rocket yet, consider using my reflink.

Apply correct image sizing

Use size attributes on images. WpRocket offers a feature to add missing size attributes. Test wisely:

improve core web vitals

Don’t push content above existing content

It can happen on plugins that use a combination of Javascript code to make an element work. An example is slider plugins. Consider switching the slider to a simple background image or even a CSS-only approach for the slider if you’re using a custom theme. If you choose on keeping the slider, consider: lazyloading only the following images of the slider, preload the initial image, preload the Javascript from the slider.

The incorrect styling of your header, placing CSS code after the style was fully loaded, can also cause CLS.

Use min-height and min-width to reserve space for an element, especially ads(Adsense) blocks.

Prefer theme/plugins that use transform animations over animations of properties that trigger layout changes

Prefer plugins that use transform CSS for your animations. Examples of transform CSS styling:

-webkit-transform
-moz-transform
-ms-transform
transform

Ask the theme/plugin developer to update and implement those css properties as part of the animations if possible.

Leave a Comment