Optimizing Elementor and others for speed, especially mobile, isn’t as hard as it seems. Even with just one plugin, you may achieve green metrics.
After Elementor recently added many features to improve speed, can a website have green metrics while still using it?
A short answer is yes and will depend on your website traffic.
Is Elementor slow?
Elementor works on a fundamental level by loading a lot of Javascript to make its functions work. Javascript is the biggest offender for page loading.
Elementor loads a median of at least 600 kB of Javascript files as of May 2023. Elementor also loads a large number of CSS, many of which are render-blocking, causing the site to slow down in loading.
Caching and other optimizations can alleviate some of these issues, but as INP becomes a Core Web Vitals metric in 2024, any extra unnecessary Javascript can make the website fail the assessment, and lose in SEO and user experience.
Elementor isn’t a product focused on performance. Highly–requested performance features are released after 5 years, and yet aren’t fully compatible.
Elementor has been releasing performance features such as “Improve DOM” and “fecthpriority for LCP”, but it is still far away from having the same performance as some competitors, such as GenerateBlocks, Breakdance, Bricks, and Kadence Blocks.
Wpalpha can optimize your Elementor website, as I already finished many Elementor Core Web Vitals optimization projects. If you’re keen to do it yourself, consider the following solutions for solving or improving Elementor loading
Improve TTFB (time to first byte)
One of the most significant factors to Elementor 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), Elementor has 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
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 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.
To remove /exclude an unused Javascript from loading, check in the frontend admin page of the plugins to detect all pages using it, and then remove it from loading on all pages not using it with Perfmatters.
The delay javascript until user interaction feature doesn’t address one of the purposes of the “Reduce Unused JS” Pagepseed recommendation, which is to not serve unused code to users, especially 3G who may have limited plan data. Unused Javascript larger than 20kb can also run after the initial loading, failing the recommendation.
Perfmatters offers many features alongside removing unused JS. To use it, Install Perfmatters, go to “Assets”, enable the Script Manager, and click on the “Perfmatters” button at the top of each page to remove unused JS or CSS.
Perfmatters 20% OFF Coupon: WPALPHA
Elementor 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 Elementor 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 its “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.
