Your designer delivered a good-looking site built in Elementor. Then you ran a speed test and it listed “Avoid an excessive DOM size”, “Reduce unused CSS” and a long string of font and script files. On a phone, the page appears in pieces. Behind almost every slow Elementor website sits the same question: is it the builder itself, or how it was used?
Usually it is both, in proportions you can change. Elementor adds weight of its own, but most slow Elementor sites are slow because of what was layered on top: add-on packs, layouts nested five levels deep, several font families, sliders and animations. The good news is that you can speed up an Elementor site a long way without rebuilding it, if you work through the layers in order.
Where an Elementor page gets its weight
It helps to know what Elementor sends to the browser compared with a page written in the block editor:
- More HTML. Every section, column, container and widget is wrapped in its own elements so the builder can style and position it. A layout that looks simple can produce a deep tree of nested elements.
- Its own CSS and JavaScript. A shared front-end stylesheet and script, plus CSS generated for each page’s design settings, plus files for particular widgets.
- Fonts and icons. Google Fonts chosen in the site’s typography settings, and icon libraries such as Font Awesome for icon widgets.
- Extra libraries for some widgets. Carousels, lightboxes, animations and motion effects each bring their own code.
- Whatever the add-on packs load. Often the biggest item of all, and the one most people do not know is there.
If you are wondering whether a builder is the right tool at all for your site, that question has its own comparison of builder output and block editor output. This post assumes you are keeping Elementor and want it lighter.
A slow Elementor website: start with its own settings
Recent versions of Elementor include several options aimed directly at speed. Some are on by default for new sites; older sites often still run with the earlier behaviour because switching it would change how existing pages are built. Names and locations have moved between versions, so look in Elementor’s Settings, particularly the tabs labelled Features and Performance. The ones worth reviewing, in general terms:
- Lighter HTML output. An option that removes some of the wrapper elements Elementor used to add around every widget.
- Loading assets only where they are used. Instead of one large stylesheet and script for every widget type on every page, Elementor loads the files for widgets that page actually contains.
- Inline icons. Renders icons as small inline SVG images instead of loading a whole icon font file to show three icons.
- Lazy loading background images. Background images set on sections or containers further down the page wait until they are near the screen.
- Element caching. Stores the rendered output of widgets so the server does less work on each uncached page.
- How CSS is printed. Elementor can write each page’s design CSS to a file or embed it in the page. External files can be cached by the browser across visits; embedded CSS saves a request on first load. Either can be right; test both.
Switch these on one at a time, on a staging copy if you have one, and check a few key pages after each change on desktop and mobile. Some options alter the HTML structure, which can upset custom CSS that targeted the old structure. If a layout breaks, switch that option back and note which page broke. After changing CSS-related settings, use Elementor’s tool for regenerating its CSS files, then clear your page cache.
Audit the add-on packs
Elementor’s add-on ecosystem is huge. Packs such as Essential Addons, Happy Addons, ElementsKit, Premium Addons and Ultimate Addons each offer dozens of widgets. Many sites have two or three packs active, installed by different people over time, to use four widgets in total.
Each pack can add its own stylesheet and scripts, and some load them site-wide whether or not a page uses their widgets. Most packs include a widget manager in their settings where you can switch off widgets you do not use. Do that first: it is reversible and usually safe.
Then ask whether you need the pack at all. To find which widgets are in use, open your main pages in the editor and look at the widget names in the Navigator panel. If one pack provides a single countdown timer on one page, replacing that widget with a native Elementor equivalent, or something simpler, lets you remove the whole pack. Take a backup first, because removing a pack also removes the widgets that came from it from your pages.
Flatten the layout
Older Elementor sites are built from sections and columns. To get a design to look exactly right, designers often put sections inside columns inside sections, sometimes several levels deep. Each level adds wrapper elements, and a page with hundreds of nested wrappers is slower for the browser to lay out and style, especially on mid-range phones.
Recent versions use containers instead, based on flexbox, which can do the same layouts with far fewer layers. Elementor includes a converter for turning sections into containers, but the result is rarely as clean as a rebuild. A practical approach:
- Pick the home page and your most visited landing page.
- Open the Navigator and see how deep the nesting goes. If you scroll through layer after layer to reach one heading, that page is a good candidate.
- Rebuild those pages with containers, keeping the design identical. Leave less important pages as they are.
- Compare DOM size and speed results before and after.
Hidden elements count too. Many sites hide a desktop version of a block on mobile and a mobile version on desktop. Both are still in the HTML for every visitor, with all their images and widgets. Where you can, design one responsive block instead of two hidden ones.
Fonts and icons
Elementor makes it easy to pick a different font for every heading level, and some sites end up loading four families, each in several weights. Check the site’s global typography settings and the individual widgets that override them. Two families, with only the weights you actually use, is plenty for most business sites. Recent versions include an option to load Google Fonts from your own server rather than Google’s, which avoids the extra connection. For the wider picture on fonts, see how web fonts add to load time.
Icons deserve a look too. If Font Awesome is loaded in full for a handful of social icons and a phone symbol, the inline icons option above helps, and so does turning off older icon library support if nothing on the site still needs it. Our post on SVG icons compared with icon fonts explains why this matters.
Widgets that cost more than they look
- Carousels and sliders. They load a carousel library and usually every slide’s image. One strong static image is lighter and often clearer.
- Entrance animations. Fading in every heading as you scroll adds CSS and script work, and can delay content appearing. Keep them for one or two moments, or drop them.
- Motion and parallax effects. These run while the visitor scrolls, which is exactly when a phone has least time to spare.
- Video backgrounds. A large file for decoration. A poster image is often enough.
- Embedded maps and social feeds. Each brings an outside script. A static image linking to the map, or a simple link to your profile, does the job for many sites.
- Popups built in Elementor Pro. A popup adds its own markup, styles and scripts to every page it is set to appear on. Keep popup content short and limit the pages it targets.
What Elementor tuning will not fix
Elementor’s settings change what the page sends to the browser. They do not fix a slow server, missing page caching, huge image files or a heavy theme underneath. Check the basics alongside:
- A page cache is active and working, and Elementor’s editor still loads properly with it.
- Images are compressed and sized for where they appear, including background images, which are easy to forget.
- The theme is light. Many Elementor sites use a minimal base theme such as Hello Elementor, because the builder does the design work anyway.
- No caching or optimisation plugin is combining or delaying Elementor’s scripts in a way that breaks the editor or front-end widgets. If something stops working, our Elementor troubleshooting guide covers the usual causes.
For the broader question of how many plugins and builders a site can carry, the section guide on why plugin and builder weight matters more than plugin count gives the context, and our guide to website performance sets out how page weight, scripts and server time fit together.
Measuring the result
Before you change anything, test the home page and one inner page three times each on mobile and write down the results, along with the page size and the number of requests. Repeat after each group of changes. Pay attention to how the page feels on a real phone, not only the score. A page that shows its main heading and image sooner is an improvement even if the number barely moves.
Frequently asked questions
Will switching on Elementor’s performance options break my existing pages?
It can, mainly where custom CSS relied on the old HTML structure, or where an add-on widget expects files that now load only on some pages. Turn options on one at a time on a staging copy, check your key pages on desktop and mobile, and keep a note of what you changed so you can reverse a single option.
Is Elementor Pro slower than the free version?
Pro adds features such as the theme builder, popups, forms and motion effects. Having Pro installed does not make a page heavy by itself; using many of its heavier features on one page does. A page built with a few Pro widgets and sensible settings can be as light as a page built with the free version.
Should I convert all my sections to containers?
Not necessarily all at once. Converting is most worthwhile on pages with deep nesting and plenty of traffic, such as the home page and main landing pages. Automatic conversion may leave extra layers, so check the result in the Navigator. Pages that are simple already gain little from the effort.
Does a lightweight theme make Elementor faster?
It helps, because the theme’s own scripts and styles load alongside Elementor’s on every page. If Elementor’s theme builder handles your header, footer and templates, a minimal base theme avoids loading design features you never see. It will not fix heavy layouts or add-on packs, so treat it as one part of the clean-up.
Speed work on an Elementor site does not have to mean a rebuild, and it does not change how the site looks. Our website speed optimisation service audits the builder setup along with images, caching and scripts, shares a prioritised fix list for your approval, then re-tests so you can compare before and after.
Next in this series: Page Builder vs Gutenberg Speed: Honest Trade-offs
