Elementor is one of the more popular live page builder plugins for WordPress. It has a free and paid version. Some claim it will change WordPress design. We bet alternative editors change the landscape more.
The Elementor plugin free version is a 1.8M download zip file. It’s 5.8M decompressed. 1.2M of that is Font Awesome. Why did they include that?
One of the bad things about many page builders is they use short codes. Once you stop using the page builder plugin – for any reason – it messes everything up. Elementor (and Beaver Builder) don’t do that. Yes, some features of Elementor use short codes. But only a few, and those are optional features … not necessary.
Elementor Page Builder
Last updated: 2 week ago
Active installs: 400,000+
Zip archive: 1.9M
Why only the 3 star rating with two skulls? Elementor has a low retention rate. Retention’s calculation is active installs divided by downloads. Test-then-abandonment is not a good sign. Only 10 percent of people who try it keep it activated. Why? We don’t know. Ask Elementor. What’s up with that?
It’s not uncommon for a page builder to add 1M of CSS and JS code to every page on your website (site drag). With the average Internet desktop page weight being 2.3M to 3M, you can see a page builder would use up almost half of that. Most heavier mobile pages we test are around 500k to 750k. Our home page is 462k. The page you are reading now is 200k. You can see that an average page builder would be 5 times that weight – without any content!
Elementor has the capability of working well for responsiveness. But only if the site owner doesn’t mess it up. It also can be fast. The biggest potential hidden gotcha is Font Awesome activation. Font Awesome is an icon font and adds 500+ milliseconds globally (site drag). In this instance, 2 HTTP calls of about 250 milliseconds each. That’s a more horrific speed crime of laziness and apathy.
Install a fresh Elementor plugin in a testing space and you’ll find Font Awesome isn’t loaded. Use one solitary icon on one page – and the whole site gets it. If the theme has Font Awesome activated already, it will get loaded twice. That doubles the site drag to 1 second. There is a free plugin to ensure this doesn’t happen (a fix). https://wordpress.org/plugins/better-font-awesome/ (You select an option to avoid Font Awesome duplication). But we tried it and it doesn’t work. It fails with Elementor.
Want to read a good article that compares how the major page builders affect WordPress speed. We didn’t write it. We wish we did. Read it at Primary Image in a new tab.
Here’s what we’ve learned so far: If you activate Font Awesome (called enqueuing) and then say, “Whoops! That just added a big chunk of page weight.” So you remove the icon from the page. It does not dequeue the Font Awesome icon code. It’s lurking in the background – hidden page weight. The only way to get rid of it is to go into the code (or other trickery like https://wordpress.org/plugins/asset-queue-manager/ plugin) or to uninstall Elementor plugin. Then it will go away. Also, if you reinstall the recently uninstalled Elementor plugin, the invisible weight is back again. Global site drag – every page and post. So once it’s enqueued, it’s stuck on and saved in a database somewhere. Half second delay potential at least. When you have a 1-second performance budget, that’s a killer.
More about Font Awesome and why it’s bad for mobile speed (less for desktop) – extreme speed for mobile is our goal. Below:
Links to PagePipe’s articles about the deleterious use of Font Awesome:
- Read the second bullet point under: Modern WordPress Speed Traps.
- Read “How much speed difference does font baggage make?”
- An idealistic but thought provoking Unicode alternative to Font Awesome.
Page weight matters most on mobile. Weight consumes connection resources. Mobile’s a different beast than desktop connections. Desktop is all-you-can-eat connections. So, in most cases, a 20k weight difference makes little impact in load time. Except on a remote smartphone. Then it does. And it costs extra money for each page. Why does 20k even matter for extreme mobile performance optimization? Isn’t that a puny file size?
Elementor delays page load time very little on an average desktop site. Viewer expectation is a 2-second load time.
An average desktop page speed (8 seconds) is unacceptable for mobile – or anyone for that matter. Average page weight (2.3M to 3M) is especially unacceptable for mobile users. Why? Because mobile viewers expect pages to load just as fast as a desktop. Less than 2 seconds! That necessitates building a 1-second page for mobile to achieve a 2-second load time.
We’re talking about building a 1-second page speed on shared hosting that typically has a 500-millisecond Time-to-First-Byte (TTFB). That is the server overhead or server delay before the page starts to render on screen. You can’t remove or change this. You can only switch to a better (more costly) host. If our performance budget is 1 second, we now only have 500 milliseconds left to load all page assets. About half of that is usually images. The other half WordPress core, theme, plugins, and written content. Again, we say typical. There are many tricks like using no images. Or stripping webfonts. Etc.
So is adding 20k to every page bad for mobile speed? Under these conditions? Of course.
Posts created with Elementor may have 400k of page weight overhead from scripts.
How much difference Elementor makes to speed and page weight is one of those, “It depends” answers.
In general, from tests, it doesn’t add any more than 40 to 75 milliseconds to global page load time.
Now with that said, Elementor only activates on pages requiring their customization. This is elegance in the name of speed. For example, we doubt blog pages require any customization.
If Elementor isn’t used on a page, the plugin isn’t activated. And jQuery isn’t enqueued either. This is miraculous good news. It means use Elementor only where necessary, not on every page. Plugins like Contact Form 7 activate jQuery everywhere. That’s the ugly norm. Elementor is smart.
Conclusion: When Font Awesome is loaded by a WordPress theme and again by Elementor, you get a double load. You can’t shut it off with the Better Font Awesome Plugin (like we hoped). This may not affect desktop speed much – only page weight. Weight is bad for mobile because bandwidth is more costly. It would be about 150K extra weight worst case. That is bad when your home page is only 100k. Adding another 150k isn’t acceptable by our standards.
Delivering icons as a font is a hack.
Author: Tyler Sticka
We didn’t test with text or image content other than a single icon. (Note we later did some testing with video lazy loading on Elementor.) So our test is weak and half-baked. It only reveals the worst stuff we hunt. If you never select any icons, Font Awesome isn’t enqueued. You’re safe. We’re not testing Elementor more thoroughly at this time. We don’t recommend page builders in general – even good ones. Why? Because site owners easily abuse them and make heavy pages. They can’t overcome the temptation to embellish. We feel page builders encourage negative UX behavior. It’s expressive design overkill. It’s like handing an open bottle of poison to an infant. They can’t resist – the site owner drinks it.
It looks like Elementor adds 4 or more HTTP requests. Minor. The downside to using Elementor is small for desktop sites – other than the learning curve.
We see page builders as a stopgap. Only because the best version of WordPress will be built in the future.
WordPress keeps incorporating features that make whole categories of plugins obsolete in a single day. This trend will continue. Automattic watches what’s emerging in the plugin directory. They’re not stupid. We don’t agree with this competitive business strategy. But the big fish will feign innovation by continuing to eat the little fish – either by acquisition or reverse-engineering.
The only detriment using Elementor is 40-millisecond site drag added to every page of your site. And enqueuing jQuery can negate gains on fast themes built specifically for mobile use. That is low by comparison to say Yoast SEO 70 millisecond bloat – and Contact Form 7 adds up to 50 milliseconds. Those are popular plugins. Popular usually means heavy and slow. A “nice” plugin loads in 1 millisecond. Is Elementor becoming a popular plugin? Yes. For us that’s a bad sign. Yes, a plugin can be popular and still have a bad retention rate. This is typical of popular caching plugins, too. Test and toss.
For extreme mobile performance optimization, we remove everything possible to reduce site drag.
The catch-22 with Elementor is using Font Awesome icon anywhere on the site. One single icon! It adds 75k globally to the site. And if your theme is loading Font Awesome, also, you’ll get a double load making site drag 150k. Does that slow down your site? It depends.
For us, adding 150k is unthinkable.
Now for some good news:
The Font Awesome bugaboo is a hidden trap. But we’ve been working on a client speed site using free Astra theme (very fast) and free Elementor page-builder plugin. We’ve learned some good things. Elementor plugin uses selective activation. In other words, if a page isn’t built with Elementor, the plugin is not loaded. This is not typical, usually plugins will load globally on every page and post whether they’re needed or not. This we call “site drag.”
So the goal is only use Elementor on those pages where it’s absolutely needed for customization. This will reduce the number of HTTP requests (calls) significantly. For example, usually blog pages don’t require customization but a home page might use a lot of customization.
Elementor plays nice because of selective activation.
Mobile WordPress Speed – without coding!