Elementor LCP Fix

One of our customers recently reported a low LCP score on their PageSpeed Insights test, and requested Elementor LCP Fix.

It’s a simple business WordPress site, built with Elementor, having a minimalist design with a few images and mostly text.

Overall, site’s performance and page speed is decent and there are not too many css and javascript files to worry about.

So, what could be causing the Largest Contentful Paint (LCP) issue?

In this article, you’ll discover:

• What is Largest Contentful Paint (LCP) and what is a good LCP score
• How to measure LCP
• Why Elementor’s default behavior may cause LCP issues for hero images
• How to fix it using the Lazy Load Control for Elementor plugin
• When and how to disable lazy load for one image
• Additional techniques to improve your Elementor LCP score
• Why fixing LCP score is important for Search Engine Optimization (SEO)

What is Largest Contentful Paint (LCP)

LCP (Largest Contentful Paint) measures the time it takes for the largest visible element, usually an image or text block, to fully render in the viewport.

It’s a key Core Web Vitals metric because it reflects perceived load speed, directly impacting user experience and SEO.

What is a Good LCP Score?

A good LCP score means that the LCP should be less than or equal to 2.5 seconds.

It’s determined by these three main phases:

• The server’s response time (TTFB),
• The download time of the largest element (typically an image or block-level text),
• Any render-blocking CSS or JavaScript that delays painting.

To achieve a good score, it’s important to reduce render-blocking resources and serve optimized images.

Additionally, establishing third-party connections early, such as for fonts, analytics, or CDN-hosted assets, can reduce wait times and help the largest element load faster.

How to Measure LCP

LCP can be measured using tools like Google PageSpeed Insights, which provides both Lab Data and Field Data.

Lab Data is based on simulated loading conditions, while Field Data reflects actual user experience and includes Core Web Vitals like LCP, if enough real-world traffic is available. Not all websites have Field Data, especially newer or low-traffic ones.

Search Console helps assess sitewide LCP performance using real user data from the Chrome User Experience Report (CrUX). It can highlight specific URLs or patterns where LCP issues occur, making it valuable for diagnosing broader performance problems.

Lighthouse, the engine behind PageSpeed Insights and built into Chrome DevTools, simulates performance differently on mobile and desktop. On mobile, it emulates slower networks and hardware, often resulting in lower LCP scores.

Since Google uses mobile-first indexing, mobile LCP scores are more influential for SEO. That’s why optimizing mobile performance is critical for better search visibility.

Other tools that help measure LCP scores and offer actionable suggestions for improvement:

What Is the Lazy Load Issue in Elementor?

Elementor may automatically apply loading="lazy" to images, regardless of where they appear on the page. While this improves overall load performance, it backfires when applied to the LCP image (LCP element), such as a hero image or banner.

Google’s algorithms flag this because the browser defers downloading the most important visual content. Instead of starting immediately, it waits until the user scrolls. This results in a delayed Largest Contentful Paint and possibly core web vitals metrics to fail with real user data.

This topic has become a regular thread on Reddit where users post about “lazy load issue Elementor LCP not working” and look for practical fixes. It’s even discussed on GitHub by developers trying to patch workarounds.

Why It Happens?

Elementor sometimes applies both fetchpriority="high" and loading="lazy" to the same hero (LCP) image due to how it automatically optimizes images without fully understanding their position on the page.

The goal of its Optimized Image Loading feature is to improve page load performance and website speed by prioritizing important images using fetchpriority="high" and deferring the rest or below the fold images using loading="lazy".

However, Elementor doesn’t actually analyze the layout, web performance, or rendering context to determine which image is truly above the fold, especially during page build time.

This usually causes bugs and it’s very hard to notice especially by non-technical designers who are very proficient using Elementor but don’t test the pages for initial page load times using industry standard Lighthouse or other performance monitoring tools after building them.

Elementor’s Built-in Limitations

Elementor doesn’t let you easily control lazy load behavior. Only certain widgets, such as Image Carousel, has controls to enable or disable Lazy Loading.

You can’t simply turn it off for one image unless you dig into code, use custom filters, or override core behaviors, which isn’t sustainable for non-developers or agencies managing dozens of sites.

After all, Elementor is a great page builder for WordPress that aims to provide a visual, easy-to-use tool for building pages that look great and are responsive.

How To Fix Elementor Lazy Load Issue and Improve LCP

Searching for a quick fix, I came across a WordPress plugin: Lazy Load Control For Elementor – Remove the Lazy Load attribute from specific images in Elementor.

It does the job perfectly by adding a control to the image widget, and allows you to manually set the Lazy Loading feature. You can now set to Lazy load or Do not lazy load using a simple dropdown.

This free and lightweight plugin is purpose-built to fix this exact problem.

Key Features

• Disable lazy loading images on a per-image basis
• Seamlessly integrates with Elementor’s interface
• No coding or theme edits needed

Use Cases

• Turn off lazy load for your hero image
• Improve LCP by prioritizing above-the-fold images and increase loading speed
• Control performance-critical content without touching global settings

This plugin has become my go-to solution when a client asks for an Elementor LCP fix without breaking their workflow or needing developer hours.

How to Use It

Install the Plugin
Go to your WordPress admin, search for “Lazy Load Control for Elementor,” install and activate it.

Edit Your Page with Elementor
Open the page that has the LCP element / hero image (check it using PageSpeed Insights).

Disable Lazy Load for the LCP Image
Click on the image widget > Scroll to the bottom > Check the new option: “Do not lazy load.”

Save and Retest
After saving, run another performance test. You should see your LCP score improve significantly.

Why to Add fetchpriority=”high” to Above the Fold Images

To further improve the LCP score in PageSpeed Insights and Core Web Vitals scores, fetchpriority="high" attribute can be added to your hero image. It tells the browser to load that image right away, so your page feels faster for both search engines and humans.

Elementor doesn’t give this option through its interface, but we can implement this by adding the following code to your WordPress website and targeting the above the fold (hero section) images manually by setting a class name.

If you have a child theme, you can directly add the snippet to your functions.php or you can add it using one of the code snippets plugins available at the WordPress.org plugins directory.

I prefer to do it via Code Snippets plugin, which is a clean and simple way to add snippets to your WordPress website.

add_action('template_redirect', function () {
    if (is_admin() || wp_doing_ajax()) return;
    ob_start('elementor_add_fetchpriority_to_target_images');
});

function elementor_add_fetchpriority_to_target_images($html) {
    libxml_use_internal_errors(true);

    $dom = new DOMDocument();
    $dom->loadHTML(mb_convert_encoding($html, 'HTML-ENTITIES', 'UTF-8'));
    $xpath = new DOMXPath($dom);

    $target_class = 'heroimage';

    $images = $xpath->query('//div[contains(concat(" ", normalize-space(@class), " "), " ' . $target_class . ' ")]//img');

    foreach ($images as $img) {
        $img->setAttribute('fetchpriority', 'high');

        if ($img->hasAttribute('loading') && strtolower($img->getAttribute('loading')) === 'lazy') {
            $img->removeAttribute('loading');
        }
    }

    return $dom->saveHTML();
}

Next step is to add a class to your hero image which acts as the LCP image.

This specific class is defined on line 13, $target_class = 'heroimage'; , which you can change to any class name you want to use. Make sure that it’s a unique name that’s not used in your theme or plugins’ css styles.

To add a custom class to your Elementor image, select it in the Structure, click Advanced tab, and type in the class as heroimage. Make sure you type the same class name as you entered in the snippet.

Save and refresh the page.

Right click, and click Inspect to open up the Dev Tools of Chrome.

You can see that fetchpriority="high" is now added to your target image and it will be loaded before other assets that have no priority set.

Test your page again with PageSpeed Insights or GTMetrix again. Your image should now load quickly and you will see a better LCP score.

Make sure your image is served in a next-gen format like WebP or AVIF, and that it uses the exact width and height it appears at on the page.

Bonus Tip: Disable Lazy Load for Background Images

If your LCP image is a background (common with hero sections), Elementor doesn’t give you native control. But here’s a workaround:

• Use the Image widget instead of background CSS when possible.
• Or, preload the background image using rel="preload" tag in your site’s head tag with fetchpriority="high".

Additional Ways to Improve Elementor LCP Score

Here are more ways to complement your efforts:

• Use image optimization plugins (such as EWWW) to convert images to next-gen formats like AVIF or WebP to reduce file size
• Properly size images without losing quality
• Minify static assets to load scripts faster. Minifying CSS and JavaScript files helps reduce file sizes, thereby improving LCP
• Preload fonts to load faster and avoid delays in text rendering
• Defer third-party scripts like chat widgets or analytics
• Enable server-level caching (e.g., LiteSpeed or WP Rocket)
• Use a CDN like Cloudflare for asset delivery
• Enable GZIP compression on your server to compress text-based resources (HTML, CSS, and JavaScript), before sending them to the browser
• Host your WordPress site on a premium hosting provider that offers managed WordPress hosting for optimal performance

Why This Matters for SEO?

A slow loading web page, and a poor LCP score directly impacts your Core Web Vitals, which are part of Google’s ranking signals. Slower sites lose traffic, engagement, and conversions. Even a 0.5s delay in LCP can increase bounce rate significantly.

Solving the Elementor lazy load issue for LCP image gives your users a faster experience and improves your search engine rankings.

Conclusion

Elementor LCP fix is very easy if you are using the regular image widget.

You can significantly improve the loading performance of your hero images and boost your LCP score by removing the loading="lazy" attribute and adding fetchpriority="high".

If you need help optimizing your Elementor site to load quickly and pass Core Web Vitals, our Performance Plan, which is one of our ongoing WordPress support plans, includes speed optimization services such as:

• Optimize largest contentful paint (LCP element)
• Optimize first contentful paint (FCP)
• Load critical css inline and delay unused css
• Improve cumulative layout shift (CLS)
• Optimize loading custom fonts and other web fonts
• Defer render-blocking JavaScript to improve the LCP score by allowing quicker rendering of content
• Delay Javascript until user interaction
• Serve static assets using Cloudflare CDN (content delivery network)
• Enable full page caching through Cloudflare
• Preload Cloudflare cache across global edge locations
• Improve site’s user experience due to slow server response time
• Improve connection speed
• Preload critical images and exclude leading images from lazy loading