Estimated Time to Accomplish: 30-60 minutes
Here is an Elementor Core Web Vitals fix for CLS and LCP issues. These fixes target fixing images, dividers, text, and fonts to improve your CLS and LCP issues for your Elementor site.
A Quick Summary:
Cumulative Layout Shift (CLS) is a Google metric that measures a user’s experience on a webpage. CLS is the unexpected shifting of webpage elements while the page is still downloading, and can be caused by fonts, images, videos, buttons, and other content. A good CLS value is 0.1 or less, while a poor value is greater than 0.25.
Largest Contentful Paint (LCP) is a Google metric that measures perceived load speed by marking the point on a timeline when a page’s main content loads. For a good user experience, sites should have a LCP of 2.5 seconds or less.
To learn more about these, read this article about CLS, LCP, INP, and FID here.
If your values are low, here are some Elementor fixes that might help optimize your site!
What you need to know:
There are MANY factors that Google looks at to determine your CLS and LCP scores. But analyzing your site the correct way and fixing a few easy Elementor issues can help improve your site’s metrics.
My recommendation:
First read this Core Web Vitals Guide to get started. Then, identify your main issues, and make these easy Elementor fixes to improve your score.
Your next steps:
If you have a WordPress site using Elementor, read this!
Your Score for Elementor Core Web Vitals
If you have been keeping up with Google’s Core Web Vital changes, than you know that CLS and LCP are very important to keep an eye on and improve.
Your CLS score measures the shift that happens when a page loads in view of a reader. If the page load includes the shift of images, ads, large blocks and even fonts to detract from the user experience, Google will increase your score – which is bad.
LCP (Largest Contentful Paint) measures how quickly the main content of your site loads. Large images and text blocks can affect load time, which can increase your LCP score – which is also bad.
To find your site’s CLS and LCP scores, run 4 easy tests using this Core Web Vitals guide for newbies here.
Elementor Fixes for CLS – Dividers, Fonts & Text Blocks
1. Fixing Dividers
I have found that Elementor Dividers (especially the custom dividers, seen below), can cause layout shift. And removing these dividers improved my score.

I discovered which dividers were causing issues by using the CLS Debugger here. The Debugger showed me two HTML scripts that used element numbers with the word “divider”.
Then, I went opened my website page in Chrome, and used Inspect Element to identify the right element. To do this, right click on your site page in a Chrome browser and click Command+F (Mac) or CTRL+F (Windows) and search for that divider or HTML number. When the inspector highlights the correct item, click on it with your mouse and the divider (or HTML element) will appear on your web page.
To fix these, remove the custom dividers and replace with simple solid line dividers, and see if your CLS scores improve!

2. Fixing Custom Fonts
If you have a high CLS score, and if the Filmstrip Test shows a shift when your fonts load, then it’s time to fix your custom fonts!
Web Fonts vs Built-In Fonts
First, check to see if you have a custom fonts plugin that is loading custom fonts that load after the default fonts in your theme. These are custom web fonts that are probably slowing down your page load.
If possible, I would recommend removing the Custom Fonts plugin, and instead choose local free built-in Google fonts that are available with Elementor. These aren’t as pretty, but they load your fonts locally and load them fast.
If you want to keep your current font setup, I would recommend seeing if your plugin can load the fonts locally. This will host your fonts on your site and load them faster.
Read even more for how to use Fallback Fonts here.
3. Fixing Text Blocks
If you have a high CLS score, and if the Filmstrip Test shows a shift when your text blocks load, then it’s time to fix your text blocks. This is easiest for text blocks on a Page or in widgets in a sidebar. Any text element that is in an HTML block can be fixed this way.
We are going to make two changes that will create a set block for your text to load. This will block off a section of your site (ie. like 100 pixels tall) that will allow your text to load later in that block and not move other elements around.
First, create a div around your text. Add the following div scripts before and after your text:
<div class="textblock1"> TEXT HERE </div>
Next, add the following CSS to your CSS editor under Appearance > Customize in the WordPress dashboard. In the Customize dashboard, click “Additional CSS”, and add the following:
.textblock1 {
min-height: 100px;
}
Change that number (100px) to any height that works for that block for both desktop and mobile. Choose the smallest minimum pixel number that will contain the height of the text.
Elementor Fixes for LCP – Preloading LCP Images
LCP issues mostly happen when image and text blocks are really slow to load. Most often the issues arise with images and text blocks above the fold. These are images and text blocks that show on the first page on desktop or mobile before you scroll.
One cause of these issues is Lazy Load. Lazy Load is great to load images later, but it can cause images to slow down your page load which affects LCP. Here are some ways to fix this in your Elementor theme.
1. Turn on “Optimized Image Loading” in Elementor
Elementor already has a setting that optimizes your images. This setting preloads critical images and removes Lazy Load above the fold. To turn this on, go to Elementor in your sidebar, and click the “Performance” tag. Toggle on “Optimized Image Loading”.

This setting is great, but does NOT help images in your sidebar above your fold. Chances are that you have a bio photo at the top of your sidebar and this is loading slowly (or being lazy loaded). This will not be helped by the Elementor Image setting. Instead, you need a new approach for that image.
2. Fix or Remove Top Sidebar Images
Compressing all images for better SEO rankings
First, I’d recommend image optimization for any images on your site. I personally love and use the Elementor Image Optimizer plugin for this. This is a plugin built by Elementor and does a fantastic job optimizing images. I love that it works in the background while I work on my site somewhere else. This is free up until 200 images, which I have found good enough for me.
To find my top 200 images that need compressing, I use the plugin Media Library File Size to sort my images by the largest files. I compress and optimize those.
If you are interested in purchasing the Image Optimizer Plugin from Elementor for unlimited images, you can get 5000 images optimized for only $4.17/month.
(Remember that you can deactivate these plugins on your site when not in use to improve performance.)

Setting Div containers for sidebar images
Secondly, I would recommend setting div height containers for all sidebar images and not use the image widget blocks that come default with Elementor.
Instead, upload your image to your site’s Media and copy the media link for that item.
Then, use an HTML widget in your sidebar and use this script:
<div class="sidebarimage1">
<img src="yourimage.jpg">
</div>
Next, add the following CSS to your CSS editor under Appearance > Customize in the WordPress dashboard. In the Customize dashboard, click “Additional CSS”, and add the following:
.sidebarimage1 {
min-height: 100px;
}
Change that number (100px) to any height that works for that image for both desktop and mobile. Choose the smallest minimum pixel number that will contain the height of the image.
Validate Your Changes
To verify your CLS changes, first run the Web Vitals Chrome Extension and the WebPageTest.org test to see if your metric is lowered and appears green. If so, you can register your changes with Google be complete!
- If you are ready to verify with Google, go to Google Search Console and click “Core Web Vitals” on the left sidebar.
- Open the report for the correct browser.
- Click the CLS line item below “Why URLs aren’t considered good” and then click the “Validate” button.
Google can take up to 28 days to validate your changes. But I’ve also seen validations happen in 2-3 days!
