Wordpress page-builders, especially Divi and Elementor, may not be good when it comes to Pagespeed performance.
Those page builders are adding features to improve speed, but as the Core Web Vitals update takes place, will websites using page-builder be able to comply with the update and have green metrics or have good Pagespeed?
Optimizing Elementor and others for mobile isn’t as hard as it seems. Even with just one plugin, you may achieve green metrics. Follow the tips below to achieve a better performance with your page builder.
Improve TTFB (time to first byte)
One of the most 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 Pagespeed.
Improving your server response is one of the most powerful tweaks to have Elementor loading fast. Due to its technical aspect, optimizing the backend may be hard for non-developers.
To get your theme loading faster and have a better backend performance, change to a server with a better TTFB (time to first byte) metric.
If changing to a better server or optimizing the backend isn’t doable, use Cloudflare Automatic Platform Optimization (APO) for $5/montn. It caches the HTML of your website, improving TTFB in many cases.
Critical CSS or Remove unused CSS
Elementor loads a large number of CSS, which is render-blocking, causing the site to slow down in loading.
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.
WP Rocket and Perfmatters also offer Critical CSS features alongside many other Core Web Vitals optimizations. See comparison.
Perfmatters 20% OFF Coupon: WPALPHA
Divi has 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” feature.
If you are having CLS issues, use Critical CSS or Remove Unused CSS to improve CLS. When using the 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.
Perfmatters 20% OFF Coupon: WPALPHA
Optimize or Remove Unused Javascript
Elementor loads a median of at least 600 kB of Javascript files. There are currently three ways to address the “remove unused JS” Pagespeed suggestion. Removing, deferring(defer attribute), or delaying till user interaction.
Delaying and deferring are mostly used for non-essential plugins, such as marketing plugins. Exclude a JS file from loading when it isn’t necessary for any element is the page.
Delaying offers better Pagespeed results, but you should 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. You can use the JS Differencer tool to test if your website is compatible with delaying or removing JS from loading.
Use WP Meteor or Wp Rocket to delay. Wp Rocket 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 may not be how much Javascript they load, but how, which makes the loading slow. This is evident when comparing the Core Web Vitals LCP of other 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.
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.
Get your WordPress Core Web Vitals optimized and your pages faster!
