How to speed up Elementor & Divi: 5 Top Optimization Tweaks

Updated on February 4, 2023 | By

WordPress page builders are a tool very popular amongst marketers or anyone who wants to build their website without writing code. But it may come with a price. WordPress page builders, especially Divi and Elementor, may have a bad performance in page speed loading.

Another metric that they fail is Core Web Vitals, with LCP becoming the perceived load speed metric. The CLS metric is also not good in both, being lower in Divi.

One of the major factors to Elementor or Divi being slow is not the fact they load a lot of assets, but it mainly has to do with 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.

To solve these issues and keep using your page builder, but with a good speed performance and Core Web Vitals metrics, follow the top tips below to improve your Divi or Elementor website.

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

image 2
Wp Rocket offers both, Remove Unused CSS and Inline Critical CSS, test and choose the better or whose gives no errors

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 offers filters for the “Remove unused CSS” feature.

Improve TTFB (time to first byte)

It may come to a be a surprise for many, but improve 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 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 just 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 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 others themes that load the same amount of Javascript.

Use their newest 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.

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.

Switch to Block Themes

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. 

Origins having good CWV versus Theme 3
Hello theme, often used as Elementor child theme, have the worst Core Web Vitals metrics among other themes.

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 aspects becomes essential to rank on Google.

Take a look look at the top faster Elementor and Divi alternatives below:

Get your WordPress Core Web Vitals Optimized!

Leave a Comment