We’ve worked with Elementor on hundreds of sites. A well-configured Elementor site can score 90+ on Google PageSpeed Insights. A poorly configured one can be among the slowest sites on the internet. The difference is configuration, not the builder itself.
Elementor has introduced significant performance improvements in versions 3.x, but many of them are opt-in rather than enabled by default. This guide covers the specific settings that matter and the optimization techniques that work on top of them.
Elementor’s built-in performance settings (most are off by default)
Go to Elementor > Settings > Performance in your WordPress admin. These are the settings that matter:
Improved CSS Loading
Enable this. Instead of loading all Elementor CSS globally, this setting generates CSS files per-element and loads only the CSS relevant to each specific page. On a site with 20 different widget types spread across pages, this can reduce CSS payload by 60-80% per page.
After enabling, click “Regenerate Files” to rebuild the CSS. Check your site visually to ensure nothing broke, in rare cases, widgets with unusual configurations need manual review.
Inline Font Icons
Enable this. Elementor uses Font Awesome icons by default, which loads a CSS file and a web font file for every page that contains any icon. Inline Font Icons switches to SVG icons inline in the HTML, eliminating two external file requests. This alone removes 30-80KB per page.
Loading Optimization
Enable “Lazy Load Background Images” – images used as CSS backgrounds don’t get the standard lazy loading attribute that img tags do. Elementor’s lazy load for background images defers them until they’re about to enter the viewport, same as standard image lazy loading.
Theme choice matters more than most people realize
Elementor’s recommended companion theme is Hello Elementor. It’s intentionally minimal, loads almost no CSS or JS of its own, and gives Elementor complete control over the design. Using Hello Elementor means Elementor’s CSS is the only CSS loading.
Many Elementor sites use feature-rich themes like Astra, OceanWP, or Generatepress. These are good themes, but they load their own CSS, some of which duplicates Elementor’s output. If you’re using a third-party theme with Elementor, configure the theme to its most minimal state: disable its built-in header/footer (let Elementor handle those via Theme Builder), and turn off any theme features you’re not using.
Recommendation: New Elementor builds should use Hello Elementor as the base theme. If you’re inheriting a site on a heavier theme, switch to Hello Elementor and use Elementor Theme Builder to recreate any header/footer elements the theme was providing.
Elementor third-party add-on plugins
Essential Addons, JetElements, The Plus Addons, and other Elementor extension plugins add dozens of additional widgets. The problem is that many of them load their CSS and JS globally, on every page, for every widget type in their collection, regardless of whether any of those widgets appear on the current page.
Essential Addons has added per-widget asset loading, which helps significantly. But even with that enabled, each add-on plugin has overhead. Ask yourself: do I actually use the widgets these plugins provide, and often enough to justify the load?
Audit approach: Use Query Monitor to see which scripts each add-on loads per page. If an add-on loads 200KB of scripts on a page where none of its widgets appear, consider replacing those specific widget uses with Elementor’s native alternatives or custom HTML/CSS solutions.
Caching configuration for Elementor
WP Rocket is the caching plugin we recommend most consistently for Elementor sites. Specific WP Rocket settings for Elementor:
- File optimization: Enable CSS and JS minification, enable CSS and JS concatenation to reduce requests
- Lazy load: Enable for images, Elementor’s built-in lazy load and WP Rocket’s can conflict, so use one or the other, not both
- Delay JavaScript: WP Rocket’s “Delay JS Execution” defers all JavaScript until user interaction. Effective for Time to Interactive scores but can cause issues with scripts that need to run on page load, requires testing per site
- Remove unused CSS: WP Rocket’s “Remove Unused CSS” feature analyzes each page and strips CSS rules not used on that page. Very effective for reducing Elementor’s CSS payload, but requires careful testing, CSS for interactive states (hover, active) can be incorrectly identified as unused
Image optimization inside Elementor
Elementor doesn’t automatically optimize images you add via its widgets. The image you upload is served at whatever size and format you upload it in. For best results:
- Use Imagify or ShortPixel to automatically convert uploaded images to WebP format
- Use Elementor’s image size controls to set the correct WordPress image size for each use case, don’t set full-resolution as the image size for a thumbnail
- For hero images, manually compress and size before upload, target under 200KB for above-the-fold images
- Set width and height attributes on images through Elementor’s advanced settings to prevent layout shift (CLS)
Elementor animations and motion effects
Elementor’s entrance animations (fade in, slide in, etc.) add JavaScript and can affect both Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS). The headline section of your page should not have an entrance animation. It delays LCP, which is one of the three Core Web Vitals metrics. Use animations only on below-the-fold content where they provide genuine UX value.
Realistic expectations
With all of these optimizations in place, a well-built Elementor site should achieve:
- PageSpeed Insights: 85-95 on mobile, 95+ on desktop
- LCP under 2.5 seconds on a good connection
- CLS under 0.1
- Total page size under 1MB for most pages
Getting to these numbers requires solid hosting, proper caching, image optimization, and the Elementor-specific settings above. A site missing any one of these layers will underperform, and the results compound when multiple layers are missing.
Need Elementor performance work?
We optimize Elementor sites for Core Web Vitals and PageSpeed scores. Audit, implementation, and before/after documentation. See our speed optimization service.
