Elementor is a powerful page builder, but without the right configuration, it can load more assets than your pages actually need – extra scripts, unused icon fonts, and deeply nested markup that add weight to every page load. On the other hand, the ElementsKit adds its own layer on top of that.
The good news is that both Elementor and ElementKit have built-in performance settings that, when configured correctly, significantly reduce the amount sent to the browser. In this doc, we will explain in detail each relevant setting, its function, importance, and what to set them to optimize your website.
Warunki wstępne #
- Install & activate Elementor
- Install & activate ElementsKit
How to Optimize Elementor & ElementsKit Performance Settings #
Part 1: Elementor Performance Settings #
Let’s start with Elementor and explore what possible performance optimization you can do here.
Step 1: Configure the Performance Tab #
From your WordPress dashboard, go to Elementor → Settings → Performance.
CSS Print Method
Set this to External File. Elementor outputs its CSS as a separate .css file that browsers can cache between page loads. However, if you choose the alternative Internal Embedding, then it will put all CSS inline in the <head> tag, which means the browser re-downloads it on every page, and caching plugins cannot minify or combine it.
Optimized Image Loading
Set this to Disabled. Elementor’s built-in lazy loading may conflict with caching plugins that handle lazy loading themselves. Running both at the same time may damage your hero or banner image. And, if this happens to the most important above-the-fold element and results in a loading delay, it directly increases your LCP time.
Optimized Gutenberg Loading
You can set this to Disabled. If your site is built with Elementor, this setting has no benefit and can break Elementor dependencies on some configurations.
Lazy Load Background Images
Also, set this to Enabled. This defers CSS background images that are off-screen until the user scrolls toward them. It does not conflict with caching plugin lazy loaders, since most of them only target <img> tags and not CSS background properties.
Now, after making your preferred changes, hit the Zapisz zmiany przycisk.
Step 2: Configure the Features Tab #
In the Elementor Ustawienia, there is a “Features” option beside the “Performance” option. Click on it and scroll down until you see the Stable Features section. Here, you’ll find several toggles that directly affect performance. Here’s what to set and why:
Inline Font Icons
Set this to Active. By default, Elementor loads Font Awesome as an external CSS file plus web font files. These render-blocking requests cause a delay before your page is displayed. But when you activate the Inline Font Icons, it renders icons as inline SVG instead, eliminating those external requests. This is one of the highest-impact single settings in Elementor.
Optimized Markup
Set this to Active. Elementor wraps widgets in extra <div> elements that don’t serve a visual purpose. Optimized Markup removes those unnecessary wrappers, reducing your DOM size and fixing the “Avoid excessive DOM size” audit in PageSpeed Insights.
Best Practice: After enabling Optimized Markup, browse your key pages visually and check any custom CSS that targets Elementor’s wrapper elements. If you’ve written selectors like .elementor-widget-wrap or .elementor-element, those may need updating since the markup structure has changed.
Additional Custom Breakpoints
Leave this at Domyślny unless you’re actively using custom screen sizes. Each additional breakpoint generates extra CSS, adding to your page weight without a performance benefit if those breakpoints aren’t in use.
Step 3: Choose Your Layout Path #
This step depends on whether your site uses Flexbox Container (the modern layout system) or the legacy Section/Column structure. Check your pages in the Elementor editor. If you see “Pojemnik” in the structure panel, you’re on Flexbox. If you see “Sekcja" I "Kolumna,” you’re on the legacy system.
If you are using Flexbox Container:
The Container feature should already be active if your pages are built with it.
You can verify this by going to Elementor → Settings → Features and confirming that Pojemnik is set to Active.
Flexbox Container produces lighter CSS output than the legacy Section/Column structure. It uses a single container element instead of nested Section → Column → Widget layers, which means fewer DOM nodes, smaller HTML output, and less CSS per page. No additional configuration is needed; simply having it active and building with it is the performance benefit.
Best Practice: If you’re starting a new site or building new pages, use Flexbox Container from the start. The markup it produces is meaningfully cleaner than the legacy structure.
If you are using Legacy Section/Column:
The legacy layout system is still fully supported, and you don’t need to migrate existing pages. However, it produces more deeply nested markup than Flexbox Container. To offset this, make sure Optimized Markup (covered in Step 2) is active. Doing this helps you to remove the unnecessary wrapper elements that the legacy structure generates, reducing DOM depth even without switching to Container.
If you want to gradually move toward Flexbox Container without rebuilding existing pages, you can enable the Container experiment from Elementor → Settings → Features and start using it on new pages only. Existing Section/Column pages remain untouched.
Best Practice: Don’t convert existing Section/Column pages to Flexbox Container in bulk on a live site. Do it page by page on a staging environment, verify the layout visually, then push changes live.
Part 2: ElementsKit Performance Settings #
Now, in this part, we will look at some of the settings in ElementsKit, where you can quickly make some changes and enjoy better performance of your website.
Step 4: Disable ElementsKit Inline SVG #
Iść do ElementsKit → User Settings → Inline SVG.
ElementsKit has its own SVG icon rendering setting called Enable SVG Icon. This converts ElementsKit icons to inline SVG, which sounds useful, but it creates a conflict with Elementor’s Inline Font Icons setting, which you enabled in Step 2.
When both are active, the same icon can go through two separate SVG conversion processes. This causes incorrect icon rendering, duplicated icons, or inconsistent behavior across pages.
Ustawić Enable SVG Icon Do OFF.
Best Practice: After turning this off, check your pages, especially any that use ElementsKit widgets with custom icons. If icons disappear on a specific widget, that widget relies on ElementsKit’s SVG system specifically. In that case, turn Enable SVG Icon back ON and instead leave Elementor’s Inline Font Icons active, both systems will coexist for those icons.
Step 5: Manage Unused Widgets #
Every ElementsKit widget registers its own JavaScript and CSS files. These assets load on every page by default, even pages that don’t use those widgets. On a typical ElementsKit installation with 80+ widgets available, most pages are loading assets for widgets they never use.
ElementsKit’s Element Manager lets you scan your actual widget usage across your site and disable the ones you don’t need. Disabled widgets stop loading their assets entirely, a direct reduction in page weight on every load.
What’s Next #
Once these Elementor and ElementsKit settings are configured, the next layer is caching and asset optimization: handling full-page caching, CSS/JS minification, image optimization, and database maintenance at the server level. These settings work best when the source output from Elementor and ElementsKit is already clean, which is exactly what this doc has shown.
