white opt

Save the Internet from WordPress speed abuse.

Updated: November 2017

9 minute read

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.6M download zip file. It’s 5.1M decompressed. 1.2M of that is Font Awesome. Why did they include that?

There’s speed overhead associated with Elementor page builder. It adds extra CSS and JS. But this speed difference is negligible for desktop audiences. For remote wireless mobile, it’s another matter. Read on.

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: 1 week ago
Active installs: 100,000+
Zip archive 1.6M
Retention: 9.2%

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, you can see a page builder would use up half of that. Most heavier mobile pages we test are around 500k to 750k. Our home page is 117k. The page you are reading now is 174k. You can see that an average page builder would be 5 to 10 times that weight – without any content!

Elementor has lots of features and is easy to use – especially for novices. We aren’t fans of page builders. From our past experiences – when themes include page builders – there’s always bloat. Page builders also have a learning curve. Much like learning a new computer operating system. Sometimes, page builders add as much as an extra 500k of CSS files – and 500k of Javascript files. That’s 1M of page-weight overhead. When questions came about how fast or slow Elementor was, we decided to test and satisfy our curiosity.
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.

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.

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.

Here’s what we’ve learned so far: If you activate Font Awesome (called enqueueing) 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:

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?

Our typical page weight for mobile speeds are in the 100k to 200k range. 20k addition is 10 to 20 percent increase. That doesn’t necessarily translate into a 20 percent increase in speed reduction. But, it’s revolting for a speed freak to consider an addition to every single page of a site (site drag). Of course, there are worse plugins. The 20k comes from HTTP requests for CSS and Javascript files. It may be worse with more features added – but we only tested for a best-case scenario. More about Elementor speed below.

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) 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.

Elementor plugin natively adds 41 milliseconds to every page load. A typical plugin only adds 1 or 2 milliseconds. A bad plugin adds 70 milliseconds or more. It’s hidden in the HMTL (PHP), not Javascript. Is that bad? It depends on how much you need to squeeze your site. Obviously, zero milliseconds would be best. It’s worse Elementor added Font Awesome. Font Awesome – and icon webfonts – are faddish and bad for mobile. Someday they will be replaced with faster solutions. A better solution is leaving Font Awesome out of the Elementor package, but that’s not an option presently. Let this “non-feature” be added with a separate plugin – if the site owner wants or needs it.

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.

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. 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. That is low by comparison to say Yoast SEO 70 milliseconds – 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? If so, 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.

Godspeed—

Steve Teare
performance engineer

Mobile WordPress Speed – without coding!

What others think of us:


"I'm so thankful to you, Steve for helping me throughout. That page loads very fast." quvor.com Mumbai, Maharashtra, India

by - Faizan Shaikh