What is Core Web Vitals for WordPress and how to improve them

Last updated on November 1, 2021 | By

Learn what is Core Web Vitals and how to improve your CLS and LCP. The best optimization tips to improve the Core Web Vitals of your WordPress, with a detailed guiding to each optimization tip.

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

Core Web Vitals Introduction

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

What is Web Vitals

Web Vitals are Core Web Vitals plus First Contentful Paint (FCP) and Time to First Byte (TTFB).

According to Google, the difference between Web Vitals and Core Web Vitals is that Web Vitals aren’t a part of the Core Web Vitals set because they are not field-measurable, nor do they reflect a user-centric outcome.

Do you want a boost on your Woocommerce or Elementor Core Web Vitals?

Send us your request!

Take a look at one of our highlighted case studies:

image

How to get good Core Web Vitals: Vital Points

To get a green pass on the Core Web Vitals requirements, you can find low-hanging fruit optimization on your website, having a focus on the following areas:

Improve or reduce Javascript loading time

Same as Pagespeed, Core Web Vital’s main point is JS loading. To improve On FID(First Input Delay) and LCP(Largest Contentful Paint), you should strive to optimize how JavaScript loads, parses, compiles, and executes on your website.

Large Cumulative Layout Shift (CLS) can also be caused by Javascript, especially if you have dynamic content, or a slider badly optimized, not adequately reserving space for the element of the page on either occasion.

Choose a good server

Having a reliable server will guarantee you don’t have slow response times, which greatly affects LCP.

Improve image loading with a CDN or optimize images, and apply lazyloading(on background images too)

Image loading affects LCP and can affect CLS too. Improving the way images or SVG’s load on your website is essential for good(green) Core Web Vitals. Images can affect your CLS if you don’t include size attributes on your images and video elements or otherwise do not reserve the required space for the element.

How to improve “CLS more than” issue WordPress

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.

How to improve “LCP more than” issue WordPress

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.

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

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 can I improve the Core Web Vitals in the Divi theme?

To improve Divi LCP, you may take a look at our free image CDN optimization tip. To improve Divi CLS, look at our correct CSS styling, moving your CSS from theme editor to child theme style.css or main theme CSS file. Make the main CSS load primarily.

Whats are the best WordPress themes for Core Web Vitals?

Consider using GeneratePress, Kadence Theme, and building using WordPress’s blocks, to improve or have good Core Web Vitals results on your WordPress website.

Get a Core Web Vitals Boost

Send us your request!

Leave a Comment