Your site is built with Elementor and looks good, but PageSpeed Insights shows red for mobile and pages open slowly on a phone. Elementor slows down your site in a few well-known ways, and you can rein in most of them without starting over.
This guide explains where the weight comes from, which of Elementor's built-in settings help today and what you can remove on your own. By the end you will know how to measure the difference and when it makes more sense to rebuild the site on a light theme than to keep tuning it.
Can an Elementor site be fast?
Yes. Elementor is a well-established tool with more than 10 million active installations, according to wordpress.org. It has also been working on speed for years. It has slimmed down its HTML, introduced containers, and loads widget styles and scripts only on the pages that use them. A carefully built site with few add-ons and sensibly sized images can score decently.
The catch is that the builder makes it very easy to add one more container, one more animation and one more widget pack. Each of them costs something on the visitor's phone, and the bill only arrives once the site is finished. That is why two Elementor sites can differ a lot in speed. It depends mostly on how the site was put together.
How Elementor slows down your site with nested sections and containers
Every element you arrange in Elementor adds its own wrappers to the HTML. A section has columns, a column can hold an inner section, and that holds more columns and widgets. The browser has to build all of these elements, work out their styles and lay them out on the screen. The more there are and the deeper they are nested, the more work the phone's processor has to do.
The Chrome documentation explains that a large DOM, the tree of elements on the page, makes style calculations and layout take longer, slows down how quickly the page responds, and uses more memory. In Lighthouse 13 this shows up in the Optimize DOM size insight. It is triggered when a large style recalculation or layout takes more than 40 milliseconds, and it shows how many elements the page has and how deeply they are nested.
Elementor has removed unnecessary wrappers in several stages since version 3.0, and since 3.19 the leaner markup can no longer be switched off. Containers, which are on by default for new sites, lay out content with fewer wrappers than sections and columns. Elementor's documentation advises using as few containers as possible on a page. If a nested container holds just one element, you probably do not need it.
Older sites built with sections and columns are not converted automatically. Elementor can convert a section into a container, but it warns that the conversion cannot be undone. So do it on a copy of the site and check every page afterwards.
Widget styles and scripts, and add-on packs
Every widget has its own styles and scripts. The Elementor Help Center says they load only on pages where the widget is used, apart from a small amount of basic CSS and JavaScript. For scripts, the feature is called Improved Asset Loading, and it covers the widgets of Elementor and Elementor Pro. So Elementor's own unused widgets do not slow your pages down.
A page with many different widgets, though, loads the code for each of them. A slider, tabs, counters, scroll animations and a lightbox gallery on one home page all mean separate code that the phone has to download and run.
Add-on packs with extra widgets from other developers are a bigger problem. In the same article, Elementor warns that the widgets of some third-party plugins have to be disabled explicitly, or the plugin loads their files even when they are not in use. So a pack you use for a single button can add styles and scripts to every page. With two or three such packs, the effect adds up.
Fonts and icons
By default, Elementor loads fonts from Google Fonts, on Google's servers. Every connection to an outside server takes time, and web.dev explains that browsers usually hold back text until the font has loaded, which can sometimes delay LCP. Every extra font family and every extra weight means more files to download.
Icons are a similar story. Font Awesome and Elementor's own icons (eicons) are icon fonts that come with their own CSS. Elementor loads only the icon family you use and only on the pages that need it, but the Inline Font Icons setting goes further. It renders icons as inline SVG in the page, without loading the Font Awesome and eicons libraries, their CSS or their font files. It does not convert icons from the paid Font Awesome Pro.
Keep fonts to one or two families and only the weights you actually use. Then turn on Load Google Fonts Locally so the fonts come from your own server. Since version 3.32.1 this setting is off by default, and if you had switched it on earlier, you need to switch it on again after updating. Elementor downloads the fonts in use into wp-content/uploads/elementor/fonts/ and points the CSS at them. The browser no longer has to connect to another server, and according to Elementor this also makes GDPR compliance easier, since no visitor data is sent to Google.
The Advanced tab also has the Google Fonts Load setting. With Swap, text appears straight away in a fallback font and switches once the web font has loaded. According to web.dev, swap suits text that needs to appear quickly, but the font has to arrive early enough not to shift the layout. If your theme loads its own fonts, you can switch Google Fonts off in Elementor altogether in the same tab.
Which Elementor settings help
Elementor groups its speed settings into two tabs. In the WordPress admin, go to Elementor, then Editor and Settings (in older versions, Elementor and Settings). The Performance tab holds stable features, and the Features tab also holds ones that are still being tested.
| Setting | Tab | What it does |
|---|---|---|
| Optimized Image Loading | Performance | Gives priority to the main image in the first screen (fetchpriority="high") and lazy loads images further down |
| Lazy Load Background Images | Performance | Lazy loads background images, except the first one |
| Optimized Gutenberg Loading | Performance | Stops loading the Gutenberg block editor styles and scripts that are not used |
| Load Google Fonts Locally | Performance | Serves Google fonts from your own server |
| Inline Font Icons | Features, stable | Renders icons as SVG without the Font Awesome and eicons libraries |
| Element Caching | Features, experimental | Stores the finished HTML of elements instead of rebuilding it on every load |
Turn them on one at a time and check the site on a phone and in PageSpeed Insights after each. If your cache plugin also lazy loads images, leave that job to one place only, so the two do not overlap.
Keep CSS in a separate file, as Elementor recommends, which means not switching CSS Print Method to Internal Embedding. According to Elementor, embedding can conflict with caching and hurt performance, especially on complex sites.
Element Caching is experimental. It stores the finished HTML of widgets in the database, and according to Elementor it reduces server memory use and time to first byte. It must not be used on elements with dynamic content, such as ones that show the visitor's name or use a shortcode. Turn it on only for static elements, and only if you know what each of them contains.
What to remove
You often gain the most by removing things you do not use. Start with the add-on packs. In Elementor, open Editor, then Home, and choose Element Manager from the System menu. The Scan Element Usage button shows which elements are used on the site and how many times, including those from other plugins. If you use two widgets from a whole pack, consider replacing them with Elementor's built-in widgets and removing the pack entirely.
Element Manager can also switch off every unused element at once with the Deactivate Unused Elements button, but be careful. If you switch off an element that is in use, it stops working and can break a page. For Elementor's own widgets the gain for visitors is small, because they do not load when they are not used anyway. The point is the packs that load their files everywhere.
Then go through all your plugins. Deactivate and delete the ones you do not use, after taking a backup. Elementor gives the same advice in its speed documentation.
Finally, look at the home page the way a visitor on a phone would. A slider with five large images, a background video, animations on every scroll and an embedded Google map in the first screen look good on a large monitor, but the phone pays for each of them. Elementor itself names embedded Google Maps, Facebook share counts and avatar images as external scripts that slow a page down considerably.
Caching and images
Elementor does not replace a cache plugin, and it recommends a cache plugin and a CDN itself. How to choose a cache plugin, make images lighter and check your PHP version is covered in the guide Speed up WordPress with a cache, lighter images and new PHP. Here we add just two notes specific to Elementor.
If your cache plugin combines and defers CSS, Elementor advises excluding its own stylesheets from deferral, meaning the /wp-content/plugins/elementor/assets/css/ folder. Otherwise the page can briefly appear without styles.
Images in Elementor come mainly from section and container backgrounds and from the Image widget. Elementor advises WebP and a file size under 1 MB. On a phone, that is the upper limit rather than the goal, so upload images at the size they are displayed.
How to measure the difference
Measure before and after every change, as described in the guide How to measure website speed with PageSpeed Insights. In short, look at the mobile result, run the test five times on the same pages and record the median of the score, LCP, TBT and CLS.
Make changes on a copy of the site first, not on the live site. If you do not have a copy, the backup guide explains how to set one up in a subdomain.
If you want to find out whether the slowdown comes from Elementor, the theme or another plugin, Elementor suggests a simple test. On the copy, deactivate every plugin except Elementor and Elementor Pro and measure again. Then switch the theme to Hello, Elementor's lightweight theme, and measure once more. Finally, create a page with the Canvas template and measure that too. The step after which the difference is largest tells you where to look.
Keep an eye on the real-visitor data as well. If the site has enough traffic, it shows whether the changes help actual people, but it covers 28 days and changes gradually.
When it is time to rebuild on a light theme
Tuning has its limits. It makes fonts, icons and images lighter, but it does not remove the nested containers and the add-on packs the design depends on. If, after everything above, the mobile score stays in the orange or red range and your pages do not pass Core Web Vitals for real visitors, each further tweak gives you less and less.
Consider a rebuild if any of these sounds familiar.
- The pages are built from many nested sections, and moving to containers would mean rebuilding each of them.
- The design depends on two or three add-on packs.
- Every new page or campaign adds weight, and the site slows down again.
- You are planning a new design or a new structure anyway.
In that case it makes more sense to rebuild the site on a light theme made for it. That is exactly what we do with a WordPress website. The site runs on classic WordPress with a light theme built for you, with no Elementor or Divi, and you edit the texts, images and pages yourself. We hand it over scoring above 90 in Google PageSpeed Insights, measured on mobile on the day of the handover, given fast hosting and plugins we have tested. The difference between the two approaches is explained in our guide on a ready-made theme versus a custom design.
If your site already passes Core Web Vitals, though, you do not need a rebuild, even if the lab score is not 100.
Checklist
- The mobile score, LCP, TBT and CLS are recorded before the first change.
- Changes are made on a copy of the site, and there is a backup.
- Optimized Image Loading and Lazy Load Background Images are on, and image lazy loading happens in one place only.
- Inline Font Icons is on.
- Fonts are limited to one or two families and served from your own server.
- CSS Print Method is not set to Internal Embedding.
- Element Manager has shown which add-on packs are in use, and the unneeded ones are gone.
- Unneeded plugins are deleted.
- The first mobile screen has no slider, background video or map it can do without.
- The score is measured again and compared with the old numbers.
Do you have to do this yourself?
If you have a copy of the site and a few free hours, you can do most of these steps yourself. If you would rather not risk the live site, or you do not know which add-ons the design relies on, with speed optimisation we measure before and after and show you the difference in numbers. And if you conclude that it is time for a new site, the options are on the website and online store development page.
Frequently asked questions
Can an Elementor site be fast?
Yes. Elementor has more than 10 million active installations according to wordpress.org and has worked on speed for years, slimming down its HTML, introducing containers and loading widget styles and scripts only on the pages that use them. A carefully built site with few add-ons and sensibly sized images can score decently. Speed depends mostly on how the site was put together.
Why does Elementor make a site slow?
The weight comes mainly from nested sections and containers, from fonts and icons, and from add-on packs with extra widgets. Every element adds its own wrappers to the HTML, and according to the Chrome documentation a large DOM makes style calculation and layout take longer and slows down how the page responds. A slider, tabs, counters, animations and a gallery on one page also mean separate code the phone has to download and run.
Do unused Elementor widgets slow down my site?
Elementor's and Elementor Pro's own widgets do not slow pages down when unused, because according to Elementor their styles and scripts load only where they appear. Add-on packs from other developers are the bigger problem. Elementor warns that some of them load their files even when the widgets are not in use, so a pack you use for one button can add code to every page.
Which Elementor settings help with speed?
On the Performance tab they are Optimized Image Loading, Lazy Load Background Images, Optimized Gutenberg Loading and Load Google Fonts Locally, and on the Features tab the stable Inline Font Icons. Turn them on one at a time and check the site on a phone and in PageSpeed Insights after each. Keep CSS in a separate file, as Elementor recommends, rather than switching CSS Print Method to Internal Embedding.
How do I load Google Fonts from my own server in Elementor?
Turn on Load Google Fonts Locally on the Performance tab. Since version 3.32.1 the setting is off by default, so if you had switched it on before, you need to switch it on again after updating. Elementor downloads the fonts into wp-content/uploads/elementor/fonts/, the browser no longer connects to another server, and according to Elementor this also makes GDPR compliance easier.
How do I find out which Elementor widgets are unused?
Open Element Manager from the System menu in Elementor and click Scan Element Usage to see which elements are used and how many times, including those from other plugins. If you use two widgets from a whole pack, consider replacing them with Elementor's built-in widgets and removing the pack. Be careful with Deactivate Unused Elements, because switching off an element that is in use breaks it and can break a page.
Can I convert old Elementor sections into containers?
Yes. Elementor can convert a section into a container, but it warns that the conversion cannot be undone. Older sites with sections and columns are not converted automatically, so do it on a copy of the site and check every page afterwards.
When is it better to rebuild an Elementor site?
When, after all the settings, the mobile score stays in the orange or red range and the pages do not pass Core Web Vitals for real visitors. The nested sections and add-on packs the design depends on stay, and each further tweak gives less and less. If the site already passes Core Web Vitals, you do not need a rebuild, even if the lab score is not 100.
Sources
- Elementor Help Center, Improve performance features, Optimize speed for Elementor websites, Do unused widgets, fonts, or icons slow down my page?, Improved Asset Loading, Optimized DOM Output and custom code
- Elementor Help Center, How many containers should my page contain?, Compare grid containers and sections/columns, Inline Font Icons, Elementor and Google fonts, Choose a loading method for Google fonts
- Elementor Help Center, Optimized Image Loading, Speed up page loading with Element Caching, Element Manager, Dealing with flickers/FOUC, Settings, Activate Elementor experimental features
- WordPress.org plugins, Elementor
- Chrome for Developers, Optimize DOM size
- web.dev, Best practices for fonts