Dealing with Elementor bloat

Elementor is a very popular page builder for WordPress and WooCommerce websites. While it’s not the best fit for all sites, it really is the best technology available today for larger sites in need of visual editing AKA page building.

Elementor Pro

In the case of Elementor Pro you get additional widgets, design templates, and full-site editing – headers, footers, sidebars, and templates. This is a very useful toolkit, but I should add it is notorious for dev site licensing. It will fail to update normally on staging and development environments. It will go so far as to deactivate features within itself. That’s pretty much the worse offender of “wonky licensing” I’ve seen in the WordPress ecosystem. That’s a hassle and clearly a pet peeve of mine, but can be overlooked for larger sites that really do need Elementor Pro features.

Visual builders like Elementor are especially useful for empowering web teams to create and update content. They also bundle commonly used features and load them on demand, including search, menus, forms, sliders, newsletter signups, product blocks, interactive maps, and so much more. There is a performance cost to operating a page builder, Elementor being no exception.

This performance cost can be mitigated by paying careful attention to the following:

• Use the latest software! It contains numerous bug fixes and performance improvements.
• Use the Hello Elementor theme. This removes all theme bloat and is a perfect base of Elementor builder and beyond.
• Use the real Elementor Pro plugin on bigger sites that need its modules and templates. Don’t use any free or paid add-on plugins that just end up loading more libraries, and lead to vendor finger-pointing.
• Don’t use any third party plugin for a feature that exists in Elementor Pro, for example form builders and navigation menus. Stay away from any JavaScript feature not already built into Elementor, such as mega menus. You can write things like this in pure CSS or VanillaJS if you really must extend what’s already available.
• Optimize your pages by trimming down their lengths. Elementor supports nested elements such as widgets within an inner section within a column within a section. Complex designs are often required, but the least we can do is keep the length to a minimum and avoid an oversized DOM problem.
• Use as few fonts as possible and set the fallback to sans-serif instead of default Roboto, which would otherwise be loaded.
• Set Elementor > Settings > Advanced > Google Fonts Load setting to Swap (font-display: swap).
• Enable Elementor > Settings > Experiments > Optimized DOM Output.
• Set Elementor > Settings > Advanced > CSS Print Method setting to Internal Embedding.
• Using Elementor Pro set your videos with Lazy Load enabled.
• Image optimization is important, especially when full-width backgrounds are in use. Consider an image compression plugin or using a CDN with this feature baked in. Consider a more lossy compression mode.
• Use Cloudflare (CDN & Proxy) or comparable service as a layer between your traffic and web server where certain optimizations can take place most efficiently, for example: browser expiration headers, multi-regional image caching.
• Disable the Gutenberg / WordPress & WooCommerce Blocks CSS files, since you’re using Elementor in place of the Block Editor. WordPress loads the block editor regardless. WooCommerce loads quite a few assets and many of these are not needed with Elementor.
• Evaluate a plugin such as WP Optimize, WP Rocket, Autoptimize, Async JavaScript, etc. These can forcibly consolidate assets by means of dequeue, minify, combine, and defer. This is risky business so be super careful here! I’ve had great success with WP Optimize I’ll say, especially with their database cleaning tools.

Testing

As you make these changes be sure to test results one by one. Use WebPageTest or the Chrome browser’s built-in Lighthouse performance testing tool. Google’s PageSpeed Insights tool utilizes cached mertics and is not useful for testing real-time changes.

Page caching reminder

Page caching will not speed-up your site. It can be a useful tool to expand your traffic handling capabilities on your server for traffic that does not require dynamic content. That’s it!