RevealTheme logo
Back to Blog

How to Speed Up an Elementor Website

How to Speed Up an Elementor Website
The RevealTheme Team

By

·

Elementor is the most popular WordPress page builder for a reason — it gives you a visual canvas without touching code. But that flexibility has a cost, and the cost is performance. A default Elementor page ships more CSS, more JavaScript, and a far deeper DOM than a hand-built or block-themed equivalent. The good news is that almost every slowdown is Elementor-specific and fixable, often without rebuilding your site. Here is how to actually make an Elementor site fast in 2026, in roughly the order of impact.

First, know what "fast" means

Google's Core Web Vitals are the targets that matter. Aim for LCP under 2.5 seconds, INP under 200ms (Interaction to Next Paint replaced FID in March 2024 — if a tutorial still talks about FID, it's stale), and CLS under 0.1. Elementor sites typically fail on two of these: LCP, because hero background images load late and unoptimized, and INP, because of heavy JavaScript from the builder plus addon packs. Measure on PageSpeed Insights and watch the field data (real users), not just the lab score, because the lab simulates a slow device that may not match your audience.

Rebuild key sections with Containers, not Sections

This is the single biggest Elementor-native win, and almost nobody does it. The legacy Section → Column → Widget structure wraps every element in layers of nested <div> tags — the infamous "div-itis." A simple three-column row could generate a dozen nested divs. That bloated DOM is slow to parse, slow to paint, and directly drags down INP because the browser has more nodes to recalculate on every interaction.

Flexbox Containers (the default for new installs since Elementor 3.6) and Grid Containers collapse that structure dramatically — a layout that took five nested wrappers under Sections often needs one Container. If your site was built before 2022, your templates are almost certainly still using Sections. You don't have to rebuild everything overnight, but rebuilding your header, footer, and your most-trafficked landing pages with Containers will measurably lighten the DOM. Test page node counts in your browser's DevTools (Elements panel, then count the depth) before and after — the difference is usually obvious.

Turn on Elementor's performance experiments

Go to Elementor → Settings → Features. This panel is where Elementor hides its real performance wins behind opt-in toggles. Enable these:

  • Improved Asset Loading — loads widget CSS/JS conditionally per page instead of shipping one monolithic stylesheet on every page.
  • Improved CSS Loading — only enqueues the CSS for widgets actually present on the page.
  • Optimized DOM Output — strips redundant wrapper markup from rendered output.
  • Inline Font Icons — renders Font Awesome and Elementor's eicons as inline SVG instead of loading entire icon-font files. This alone can eliminate two or three render-blocking font requests.
  • Element Caching — caches the rendered HTML of static widgets server-side so they don't re-render on every request.

Enable them one at a time and re-check your layout after each, because Optimized DOM Output occasionally shifts spacing on older custom CSS. These settings move between "experiment" and "stable" status across Elementor versions, so revisit this panel after major updates.

Fix the CSS Print Method

Under Elementor → Settings → Advanced, the CSS Print Method controls whether Elementor writes styles to an external file or embeds them inline. External File is the right default — the browser caches it across pages, and it keeps your HTML lean. Internal Embedding can help a single landing page paint faster by avoiding a request, but it bloats every HTML document and kills cross-page caching. Use External File unless you have a specific single-page reason not to.

Kill the font and icon bloat

Elementor loves to phone home for fonts. By default it pulls Google Fonts directly from Google's servers, which adds DNS lookups and render-blocking requests — and creates a GDPR headache in the EU. Host your fonts locally. WP Rocket, FlyingPress, and the free OMGF plugin can download and self-host Google Fonts automatically. Then trim to two font families maximum, and only the weights you actually use.

Separately, if you've enabled Inline Font Icons (above), you can often dequeue the full Font Awesome library entirely if no widget needs it. Every icon library you load is a font file plus its CSS.

Be ruthless about addon packs

Essential Addons, Happy Addons, ElementsKit, and Premium Addons are tempting — they add hundreds of widgets. The problem is that most of them load their CSS and JavaScript globally, on every page, whether or not you use a single one of their widgets. Stacking two or three of these packs can add 200–400KB of assets to every page load and is one of the most common reasons an otherwise-clean Elementor site scores badly.

Pick one addon pack, check whether it has an "assets loading" or "elements manager" setting to disable unused widgets and load assets only where used, and uninstall the rest. If you use just one or two widgets from a pack, consider whether a lightweight standalone plugin or a Container layout can replace them.

Pair Elementor with a lean theme

Elementor controls your content layout, so you do not need a heavy multipurpose theme doing the same job underneath it. Use Hello Elementor (Elementor's own near-zero-weight theme) or another minimal theme like GeneratePress or Blocksy. Running Elementor on top of Astra Pro or a bundled ThemeForest multipurpose theme means two systems generating overlapping CSS — pure waste.

Add caching — but configure it for Elementor

A caching plugin is non-negotiable. WP Rocket, FlyingPress, and LiteSpeed Cache (free, if your host runs LiteSpeed) are the strong choices. Page caching and GZIP/Brotli compression are safe and give the biggest TTFB win. Aim for a server TTFB under 200ms.

The Elementor-specific trap is the aggressive optimizations. "Delay JavaScript Execution" and "Remove Unused CSS" will break Elementor — sliders stop sliding, toggles won't open, entrance animations never fire — unless you exclude Elementor's scripts and safelist its CSS. In WP Rocket, exclude elementor-frontend and jquery from JS delay, and safelist Elementor selectors when stripping unused CSS. Always test interactive widgets after enabling these; a fast page where the menu doesn't open is not a win.

Protect your LCP hero image

On most Elementor sites the hero section's background image is the LCP element — the largest thing the visitor sees first. Two rules: first, do not lazy-load it. Elementor's "Lazy Load Background Images" experiment is great for below-the-fold sections but will hurt LCP if it catches your hero. Second, preload it and serve it as WebP or AVIF at the right dimensions. Use an image plugin like ShortPixel or Imagify to convert and compress, and never let a 3000px-wide JPEG sit behind a 1200px container.

Re-audit after every change

Elementor performance is a moving target — the Features panel shifts between versions, addon packs update their asset behavior, and a new plugin can quietly re-enqueue Font Awesome. After your container migration and experiment tweaks, re-run PageSpeed Insights and re-count your DOM depth so you have a baseline. The biggest gains come from the structural work (Containers, killing addon bloat, a lean theme); caching and image optimization polish the rest. Do the structural work first and the numbers will follow.