How to improve Woocoomerce Core Web Vitals

Last updated on November 1, 2021 | By

Top tips taken from our CLS and LCP posts, organized for Woocoommerce websites.

How to Improve your Woocommerce LCP

After getting field data on Search Console, you’re gonna receive Core Web Vitals results of your Woocommerce website. If you’re presented with the LCP issues – “lcp issue longer than 2,5s” or “lcp issue longer than 4s” on your store, consider the following solutions for solving them.

Change the slider, background-image to a CSS background-color or an animated CSS background with SVG’s

Impact on load time: ⭐⭐⭐⭐⭐

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. This can also reduce the CLS.

Take for example Shopify example theme, Dawn, which now does pass almost all Core Web Vitals metrics field data on its demo preview page.

image 10
Consider a CSS-only element to reduce the amount of loading time for the LCP.

Setup critical CSS

Impact on load time: ⭐⭐⭐

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(paid) and its Optimize CSS delivery feature. Choose a plugin that is compatible with your current plugins.

If you haven’t bought Wp Rocket yet, consider using my ref link for a 10% discount.

Consider a blurry placeholder technique

Impact on load time: ⭐⭐

If you still will be using a slider, javascript elements(dynamic), or large images, consider a blurry placeholder technique, properly reserving space for them.

Cut and use a different image for the mobile

Impact on load time: ⭐⭐

Cut the size of your Woocomemerce LCP image and use a smaller image for the mobile viewport. Modern themes have built-in UI to change responsive images.

Use a CDN for images and SVG’s plus lazyload your images

Impact on load time: ⭐⭐

Upgrade the load time from your images, with an image CDN. You can use our list with the 8 best and free CDN plugins for WordPress.

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:

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

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

Popular Image CDN plugins:

Jetpack(Free unlimited image CDN)

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

Optimize DOM by avoiding page builders

Impact on load time: ⭐⭐⭐⭐⭐

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.

image 6
Elementor Optimize DOM feature

Serve HTML pages cache-first (Paid)

Impact on load time: ⭐⭐

Cloudflare currently offers Automatic Platform Optimizations (APO) for 5$ USD/mo, and it caches the HTML of your Woocommerce website. This is possible due to Cloudflare Workers that cache dynamic content. Cloudflare APO can also improve First Contentful Paint(FCP) and Speed Index.

Cloudflare APO is compatible with 100% compatible with Woocommerce and many other plugins, check the compatibility here.

Setup WP Cloudflare Super Page Cache plugin to use Cloudflare with Woocommerce

Impact on load time: ⭐⭐

WP Cloudflare Super Page takes the hard part of setting up Cloudflare rules for Woocommerce and lets you benefit from Cloudflare free features.

Note that you cannot use another plugin cache functionality with WP Cloudflare Super Cache, but it offers options to disable cache on popular plugins such as WP Rocket(Disable WP Rocket Page Cache option).

How to set up WP Cloudflare Super Page for Woocommerce:

  • Install WP Cloudflare Super Page.
  • Go to plugin settings – Third Party tab, enable Woocommerce Integration.

How to Improve your Woocommerce CLS

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

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.

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

Consider plugins that have transform CSS animations. Examples of transform CSS styling:

transform: rotate(0.5turn)

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

Get a Core Web Vitals Boost

Send us your request!

Leave a Comment