WordPress Page Builders, especially Divi, and Elementor, may have a bad performance in page speed loading.
Elementor and other page builders are adding features to improve speed, but as the Core Web Vitals update takes place, a new challenge for website owners takes place. Will they be able to comply with the update using page builders?
To solve these issues and keep using your page builder, but with a good speed performance and Core Web Vitals metrics, follow the tips below to improve your Divi or Elementor website.
The cost of using Elementor & Page Builders
Elementor loads a median of at least 600 kB of Javascript files. Elementor also does load a large number of CSS, which is render-blocking, causing the site to slow down in loading.
When enabling the new feature Improve DOM, it reduces the number of files. But still, using Elementor has a performance price.
One of the significant factors to Elementor or Divi being slow is the fact that they load a lot of assets and how the servers handle and serve the assets.
In one of the metrics that define server speed, TTFB (time to first byte), Divi, and Elementor have the worst results. TTFB affects all other Core Web Vitals metrics and also page speed.
Optimizing Elementor & WordPress Page Builders
Wpalpha can help you and will optimize your Elementor website and even calculate the profitability of keeping optimizing or building the site using a lighter theme, with the same easy-to-build functionality as Elementor.
If you’re keen to do it yourself, consider the following solutions for solving or improving Elementor loading:
- Critical CSS or Remove unused CSS
- Improve TTFB (time to first byte)
- Delay, Defer, or Remove Unused Javascript
- Use their newest features
- Switch to Block Themes
Critical CSS or Remove unused CSS
Consider a Critical CSS plugin to load the essential CSS before any assets. Jetpack recently launched Jetpack Boost plugin for free and it generates Critical CSS for your homepage, posts, and pages.
Critical CSS is one of the simple actions that can make the frontend faster, although most issues from Elementor and Divi having slow loading time derives from the backend.
WP Rocket also offers a Critical CSS feature alongside many other Core Web Vitals optimizations.
With Divi surprisingly having a bad overall CLS(Cumulative Layout Shift) score, with only 72% of URLs passing, consider using a plugin that also offers filters on their Critical CSS feature to avoid CLS issues. Wp Rocket provides filters for the “Remove unused CSS” and “Critical CSS” features.
If you have a page builder website and are having CLS issues, use Critical CSS or Remove Unused CSS to improve CLS. When using Critical CSS or Remove Unused CSS feature you have the option to exclude files or elements within the interface, with HTML CLS issues you can only edit the element to fix it, either with CSS or HTML. It’s a hacky way to fix CLS issues.
To remove unused CSS in Divi or Elementor use the free plugin Asset Cleanup or Perfmatters which also offers other features such as defer javascript.
Improve TTFB (time to first byte)
It may be a surprise for many, but improving your server response is one of the most powerful tweaks to have Elementor loading fast. But due to its technical aspect, optimizing the backend may be hard for non-developers.
Get your theme loading faster and a better backend performance by changing to a server with a better TTFB (time to first byte) metric.
If changing to a better server isn’t doable, use Cloudflare APO. Cloudflare currently offers Automatic Platform Optimizations (APO) for $5/month, and it caches the HTML of your WordPress website. This is possible due to Cloudflare Workers that cache dynamic content.
Cloudflare APO won’t only offer improvements on the TTFB metric, but also in the First Paint (FCP) and LCP metrics, areas where WordPress page builders currently struggle in Core Web Vitals terms. These improvements extend across both desktop and phone metrics.
Delay, Defer or Remove Unused Javascript
There are currently three ways to remove unused JS to pass on the Pagespeed “Remove unused javascript” suggestion. Removing, deferring(defer attribute), or delaying till user interaction. Delaying and deferring are mostly used for non-essential plugins, such as marketing plugins.
Delaying offers better page speed results, but you can defer as a way to avoid bad reports from analytics plugins, as the javascript file will only load after your user interacts with the page.
Use WP Meteor to delay, or Wp Rocket which offers filters to delay Javascript only on certain pages, avoiding getting errors. Wp Rocket also offers defer Javascript option.
Elementor loads all their Javascript libraries even on pages not using the widgets, you can use Asset Cleanup or Perfmatters to remove these unused Javascript from loading on pages where it isn’t necessary. Loading non-essential Javascript deferred or delayed is a good practice.
Elementor, Divi, and other page builders load a lot of Javascript to make their features work. But the issue isn’t how much Javascript they load, but how, which makes the loading slow.
That’s even clear when comparing their Core Web Vitals LCP to other themes that load the same amount of Javascript.
Use their newest features
Elementor new features
Elementor recently added support for Flexbox Containers, which makes pages leaner than using columns for elements. Head over to Elementor Flexbox playground to learn and test more about this feature.
Elementor also has many other features under their “Experiments” pages, but they may conflict and cause errors.
Elementor added support to custom fonts font-display support. Past the following code in functions.php or use the code snippets plugin, to improve your font loading:
add_filter( 'elementor_pro/custom_fonts/font_display', function( $current_value, $font_family, $data ) {
return 'swap';
}, 10, 3 );After adding the code above, you will need to regenerate the CSS via Elementor > Tools > Regenerate CSS on your WordPress Dashboard.
Divi new features
Divi’s New Anti-Bloat feature can also be helpful if you’re not using another caching plugin, as it could potentially conflict. It offers 4 new features:
- Dynamic Module Framework: only run functions needed to render the modules and features added on a page. No extra functions.
- Dynamic CSS: builds a custom stylesheet(CSS) dynamically that includes only the CSS needed for a page.
- Dynamic Icons: loads only the necessary specific subset of icon fonts that a page uses.
- JavaScript Optimization with Dynamic JavaScript Libraries: loads only external necessary JavaScript libraries dynamically that a page needs to use.
Elementor vs Alternatives: Speed Comparison
WordPress block plugins or FSE(Full site editing) themes offer the same easiness to build with the drag-and-drop feature as Elementor but are leaner, as they don’t load the many libraries needed to work as Elementor.
Elementor & Divi may be the most popular tool to build websites on WordPress, but with Speed and Page Experience being SEO algorithms, picking a plugin or theme with good performance becomes essential to rank on Google.
Take a look look at the top faster Elementor and Divi alternatives below:
Get your WordPress Unused CSS Core Web Vitals Optimized!