How to Fix Core Web Vitals (LCP & CLS) on Elementor Websites

Elementor gives you enormous design flexibility, but that flexibility has a cost. Unless you actively manage it, Elementor sites tend to underperform on Google’s Core Web Vitals, especially Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS). Both are part of Google’s page experience signals, and as we explain in why website speed affects Google rankings, slow pages cost you visibility and conversions at the same time. This guide shows you how to diagnose and fix Core Web Vitals on Elementor sites, step by step.

Why Elementor Sites Struggle With Core Web Vitals

Elementor builds pages from global CSS, per-widget CSS, JavaScript for interactive widgets and, on many setups, render-blocking Google Fonts. Stack a few third-party add-on packs on top (see our take on the best Elementor addons for professional websites and why fewer is usually better), add unoptimized hero images and skip the caching layer, and you get the pattern we see in almost every audit: LCP above 2.5 seconds and CLS above 0.1.

The good news is that the causes are predictable, and most of them can be fixed without rebuilding the site.

Step 1: Fix LCP (Largest Contentful Paint)

LCP measures how long the largest visible element, usually a hero image or main heading, takes to render. Target: under 2.5 seconds.

Common LCP causes on Elementor sites

• Oversized hero images. Export hero and banner images as WebP or AVIF at the size they actually display. A 4000px image scaled down by CSS still downloads at full weight.
• Lazy-loading the LCP image. The hero image should load immediately, not lazily. In Elementor, enable Optimized Image Loading (Elementor → Settings → Performance), which adds fetchpriority="high" to the likely LCP image and stops it being lazy-loaded.
• Hero set as a CSS background. Browsers discover background images late. For the hero, prefer an Image widget over a section background, or preload the file with <link rel="preload" as="image"> in wp_head.
• Render-blocking CSS and JS. Turn on Elementor’s performance features (Improved CSS Loading, Improved Asset Loading, Element Caching) so each page only loads the assets it uses. On older Elementor versions these sit under Elementor → Settings → Features.
• No page cache. A full-page cache is close to mandatory. On LiteSpeed hosting (Hostinger, some Cloudways plans) use LiteSpeed Cache; elsewhere WP Rocket or your host’s server cache.
• Unused CSS. Elementor Pro and add-on packs ship more CSS than any single page needs. LiteSpeed Cache’s Remove Unused CSS or WP Rocket’s equivalent trims this. Use the External File CSS print method so stylesheets can be cached between pages.

If your server response time (TTFB) is slow, none of the above will fully rescue LCP. That is a hosting and caching problem, and it is exactly what we tackle in our WordPress speed optimization service.

Step 2: Fix CLS (Cumulative Layout Shift)

CLS measures how much visible content moves around while the page loads. Target: under 0.1.

Common CLS causes on Elementor sites

• Images without width and height. Without dimensions, the browser can’t reserve space and the layout jumps when the image arrives. Elementor’s Image widget usually handles this, but images inside HTML widgets, text editors and some add-on widgets often don’t.
• Web font swaps. When a custom font loads late, text reflows and pushes elements around. Self-host your fonts (Elementor → Settings → Advanced → Google Fonts Load: Locally), preload the main font file, and use font-display: swap with a fallback font of similar metrics.
• Injected content. Cookie banners, chat widgets, review sliders and ad slots that appear after load push content down. Give them a fixed-height container or display them as overlays.
• Sticky headers and entrance animations. A header that changes height when it becomes sticky, or animations that change margins or positions, count as layout shift. Animate only transform and opacity.
• Sliders and carousels. Sliders that initialise with JavaScript often render at zero height first. Set a minimum height on the container, or better, replace the slider with a static hero, which helps LCP as well.

Step 3: Measure, Don’t Guess

Before and after every change, run PageSpeed Insights on the page you actually changed, not just the homepage. The slowest pages are usually service or landing pages, and those are the ones that drive enquiries. If you run paid traffic, your landing pages deserve the most attention.

• Lab scores swing 5–15 points between runs. Act on the listed opportunities and diagnostics, not small score changes.
• Field data (CrUX) is what Google uses for ranking. If your site doesn’t have enough traffic for field data, treat lab data as an estimate.
• Change one thing, re-test, then move on. Bundling five changes together hides which one worked, or which one broke something.

Performance also drifts over time as plugins update and content gets added. Checking Core Web Vitals monthly is part of any sensible WordPress maintenance plan.

Core Web Vitals Checklist for Elementor

• Hero image in WebP/AVIF, sized to its display dimensions
• LCP image not lazy-loaded; Optimized Image Loading enabled
• Elementor performance features enabled (Improved CSS/Asset Loading, Element Caching)
• Full-page cache active
• Unused CSS removed; CSS print method set to External File
• Explicit width and height on all images
• Fonts loaded locally, preloaded, with font-display: swap
• Sticky header and animations use only transform/opacity
• Reserved space for banners, chat widgets and embeds

Frequently Asked Questions

Is Elementor bad for Core Web Vitals?

No, but it is easy to build a slow Elementor site. With current performance features, a lean add-on stack, a proper cache and optimized images, Elementor sites routinely pass Core Web Vitals.

Do Core Web Vitals affect SEO rankings?

Yes, as part of Google’s page experience signals. They rarely outweigh relevance and content quality, but between two similar pages the faster, more stable one has the edge. Our Elementor SEO guide covers the other on-page factors that matter.

What about INP?

Interaction to Next Paint (INP) is the third Core Web Vital and measures responsiveness to clicks and taps. Elementor sites usually fail it because of heavy JavaScript from sliders, popups and add-ons, so removing unused add-ons improves INP as well.

Need Help Passing Core Web Vitals?

If you’d rather not work through this yourself, our team fixes Elementor performance issues every week, from caching and image pipelines to rebuilding heavy sections. Get a free quote and we’ll review your site’s Core Web Vitals and tell you exactly what’s holding it back.