Elementor Performance: How to Keep Your Page Builder Site Fast

Page builders like Elementor add visual design capabilities to WordPress, but they also introduce additional CSS, JavaScript, and DOM elements that can slow down page load times. For sites built with Elementor Pro, performance optimization is not optional—it directly impacts user experience, Core Web Vitals scores, and search engine rankings. For more information, visit the Elementor Help Center.

In this guide, we cover practical techniques to keep your Elementor site fast, based on real testing and measurement. Each recommendation includes the expected performance impact so you can prioritize the optimizations that matter most for your site.

Understanding Elementor's Performance Footprint

Before optimizing, it helps to understand what Elementor adds to your pages:

A typical Elementor page generates 200-400 KB of additional frontend assets. Compared to a page built with the default block editor (Gutenberg), this represents a 3-5x increase in CSS/JS payload. The goal of optimization is to reduce this overhead without sacrificing the design quality that Elementor provides. For a deeper understanding of performance metrics, you can refer to Google Lighthouse.

Step 1: Enable Built-in Performance Features

Elementor includes several performance settings that many users overlook. Navigate to Elementor → Settings → Performance (or Elementor → Settings → Features in newer versions):

Enabling all of these settings is the single most impactful optimization for any Elementor site. If you have not activated these features, start here before exploring other techniques. For related information, see our guide on Elementor vs Gutenberg: Which WordPress Editor Sho.

Step 2: Use Flexbox Containers Instead of Sections

Elementor's legacy layout system uses Section → Column → Widget nesting, which generates many wrapper elements. The newer Flexbox Container system produces significantly leaner HTML:

For new pages, always use Flexbox Containers. For existing pages, consider migrating layouts when you next edit them. The visual result is identical—the difference is entirely in the generated HTML output.

Step 3: Optimize Images

Images are typically the largest assets on any web page, and Elementor pages with image-heavy designs are particularly affected. Key image optimization practices:

• Resize before uploading: Upload images at the size they will be displayed. A hero image displayed at 1400px wide should not be uploaded at 4000px
• Use WebP format: WebP images are 25-35% smaller than JPEG at comparable quality. WordPress 6.x supports WebP natively
• Enable lazy loading: Elementor includes lazy loading for images. Verify it is enabled in WordPress Settings → Media → Lazy Loading
• Use responsive images: Elementor generates srcset attributes automatically. Ensure your uploaded images include multiple sizes (WordPress generates these by default)
• Compress images: Use an image optimization plugin like WP Smush Pro to compress images without visible quality loss

For a comprehensive guide to image optimization, see our WordPress image optimization guide.

Step 4: Minimize Font Loading

Custom fonts add HTTP requests and file weight. Each Google Font family adds 20-100 KB depending on the number of weights loaded. To optimize:

• Limit to 2-3 font families: One for headings, one for body text is sufficient for most designs
• Limit font weights: Load only the weights you actually use (e.g., 400 and 700 instead of 100-900)
• Self-host Google Fonts: Download fonts and serve them from your own server to eliminate the DNS lookup to fonts.googleapis.com. Plugins like OMGF or Perfmatters can automate this
• Use font-display: swap: Prevents invisible text during font loading. Elementor applies this by default
• Consider system fonts: System font stacks (like -apple-system, BlinkMacSystemFont, Segoe UI) load instantly with zero network requests

Step 5: Reduce Widget Count

Every Elementor widget generates HTML, CSS, and potentially JavaScript. Reducing widget count directly reduces page weight:

• Combine text content: Use one Text Editor widget with HTML headings instead of separate Heading + Text Editor widgets
• Use CSS instead of widgets: Spacer widgets add DOM elements. Use padding/margins on adjacent widgets instead
• Avoid duplicate widgets: Instead of hiding/showing different widgets for mobile/desktop, use responsive CSS to adapt a single widget
• Limit animations: Entrance animations add JavaScript event listeners and CSS. Use them selectively on key elements, not on every widget

Step 6: Use a Caching Plugin

Caching converts dynamic WordPress pages into static HTML files, eliminating PHP processing and database queries on repeat visits. Recommended caching plugins for Elementor sites:

WP Rocket's "Remove Unused CSS" and "Delay JavaScript Execution" features are particularly effective for Elementor sites because they target the excess CSS/JS that Elementor generates. In our testing, WP Rocket reduced the effective CSS payload of an Elementor page by 40-60%.

Step 7: Remove Unused CSS and JavaScript

Elementor loads CSS for all registered widgets by default. With Improved Asset Loading enabled (Step 1), it limits CSS to widgets on the current page. However, further optimization is possible:

• WP Rocket's Remove Unused CSS: Analyzes each page and generates a page-specific CSS file with only the rules that apply
• Delay JavaScript: Defer non-critical JavaScript (animations, carousels) until user interaction (click, scroll, keypress)
• Asset Clean Up plugin: Manually disable specific plugin CSS/JS on pages where they are not needed

These techniques can reduce CSS payload by 50-70% and eliminate render-blocking JavaScript entirely, resulting in significant improvements to Largest Contentful Paint (LCP) and First Input Delay (FID).

Step 8: Optimize Server and Hosting

Frontend optimization can only go so far if your server response time is slow. For Elementor sites:

• Use PHP 8.2+: PHP 8.x is 15-25% faster than PHP 7.4 for WordPress workloads
• Enable OPcache: PHP opcode caching eliminates recompilation of PHP files on each request
• Use a CDN: Serve static assets (CSS, JS, images) from edge servers geographically closer to your visitors
• Consider managed WordPress hosting: Providers like Cloudways, SiteGround, and Kinsta optimize their infrastructure specifically for WordPress

For hosting recommendations and setup guidance, see our WordPress hosting guide.

Measuring Your Optimization Results

Use these tools to measure the impact of each optimization:

Test before and after each optimization to confirm improvements. Focus on these Core Web Vitals metrics:

• LCP (Largest Contentful Paint): Target under 2.5 seconds
• FID (First Input Delay): Target under 100 milliseconds
• CLS (Cumulative Layout Shift): Target under 0.1

Frequently Asked Questions

Does Elementor significantly slow down WordPress?

Elementor adds 200-400 KB of frontend assets compared to the default editor. This is noticeable but manageable with proper optimization. The techniques in this guide can reduce Elementor's performance impact by 50-70%, bringing page speeds close to those achievable with the block editor while retaining Elementor's design flexibility.

Should I switch from Sections to Flexbox Containers on existing pages?

For pages that you are actively editing, migrating to Flexbox Containers is worthwhile—the DOM reduction is significant. However, it is not necessary to rebuild every page at once. Prioritize high-traffic pages (homepage, landing pages, product pages) and convert others gradually.

Is WP Rocket compatible with Elementor?

Yes. WP Rocket is fully compatible with Elementor and is one of the most recommended caching plugins for Elementor sites. Its Remove Unused CSS and Delay JavaScript features are particularly effective at reducing Elementor's frontend overhead.

How many Elementor widgets is too many on a single page?

There is no fixed number, but aim to keep DOM size under 1,500 elements for good performance. As a guideline, 30-50 widgets on a page is typical; 100+ widgets often indicates opportunities to consolidate (combining text widgets, removing spacers, simplifying layouts).

Do Elementor animations affect performance?

Yes. Entrance animations add JavaScript event listeners and CSS transitions. On mobile devices, excessive animations can cause jank (visible stuttering during scroll). Use animations selectively—limit them to key elements that benefit from motion (CTAs, feature highlights) and avoid animating every widget on the page.

Can I use Elementor and still score 90+ on PageSpeed?

Yes, with proper optimization. By enabling Elementor's performance features, using Flexbox Containers, optimizing images, self-hosting fonts, and using a caching plugin like WP Rocket, it is realistic to achieve 90+ PageSpeed scores on most Elementor pages. Image-heavy pages may require additional optimization effort.