Elementor is a free page builder plugin for WordPress with more than 5 million active installations. In addition, the plugin also has a premium version and hundreds of add-ons to add beautiful elements in your site. As with any other page builder plugins, Elementor adds custom styles and scripts that adds the wow factor to frontend look of your pages. However, it comes with high cost of impacting page loading speed of your site both in the frontend as well as in the backend. If you stuck with slow website due to Elementor page builder, here are some options you can try to fix the speed issue.
Fixing Slow Elementor Page Builder Plugin
Page speed and user experience are ranking factors in Google search algorithm. Hence, you have to give importance for speeding up the site compared to adding beautifying elements with Elementor that drag the page speed. Fortunately, Elementor offers handful of optimization features within the plugin settings. In addition, you can optimize external factors that could potentially affect the loading speed of Elementor pages.
Optimize Page Speed Using Elementor Settings
Let’s first explore these settings and if those settings do not resolve your problem, then you should check for other solutions.
1. Enable Elementor Only for Pages
The default WordPress setup allows you to create two post types – posts and pages. In addition, plugins like WooCommerce will create products and you can also create custom post types for your need. We strongly recommend enabling Elementor only for pages and not for posts and other custom post types. This helps to disable loading of Elementor resources both in frontend and backend except for pages. When you activate Elementor plugin, it will be enabled for posts and pages by default. You can go to “Elementor > Settings” menu and disable the plugin for posts under “General” tab.
2. Use Elementor Experiments
The plugin offers many experimental features under “Experiments” tab. Here you can see both ongoing experiments as well as those completed and accepted as stable features. To improve the loading speed, you can enable all speed related items under stable and ongoing sections.
Activate the following ongoing experiments:
- Improved Asset Loading – this option will reduce the default code loaded and load remaining code dynamically only if needed.
- Improved CSS Loading – this is the same feature as above load CSS only when needed.
- Inline Font Icons – disable loading of Font Awesome and eicons and load inline SVG icons.
Activate the following stable experiments:
- Optimized DOM Output – this will reduce the number of HTML wrappers to improve speed.
Make sure to test your site thoroughly after enabling ongoing experiments as they may break your site’s layout. For example, dynamically loading resources will affect features like removing unused CSS with WP Rocket and other plugins.
3. Optimize Font Usage
Using Google Fonts and other custom fonts can create lot of problems in Google PageSpeed Insights. For example, you will see warnings to make the text visible when web fonts loading and preload fonts when using Google Fonts with Elementor plugin. Fortunately, Elementor has in-built font optimization options which you can make use to improve the page loading speed.
- As mentioned above, use “Inline Font Icons” to use SVG icons under “Ongoing Experiments” section.
- Go to “Elementor > Settings > General” section and enable “Disable Default Fonts” option. This will help to disable fonts loaded by Elementor and the plugin will inherit your theme’s font for all its elements.
- If you do not want to disable Elementor fonts, go to “Advanced” tab and select “Swap” option for “Google Fonts Load”. This will help to add “swap” parameter with each Google Fonts file request and fix text visibility warning in PageSpeed Insights.
4. Use External CSS File
As you can see in the above screenshot, Elementor allows two “CSS Print Method” options. One is to use “External File” and other is to “Internal Embedding”. Select “External File” option so that all your CSS styles will be loaded as an external file. After that go to “Elementor > Tools > General” section and click on “Regenerate Files & Data”. This will regenerate the data and load as external CSS file. It will help to properly cache the pages and improve the speed instead of dynamically injecting CSS which can’t be cached.
5. Try Safe Mode
If you stuck with slow loading Elementor editor when creating or editing pages, then you can use safe mode available under “Elements > Tools > General” section. Safe mode will show suggestions in the editor when it loads slowly.
Similarly, you can enable the “Debug Bar” option to find the templates loaded on a page. This information can be useful for troubleshooting purposes when you try to fix the issue.
6. Rollback Plugin
Finally, if you face any problem after upgrading Elementor there is an option to revert back to previous version. As with any rollback, make sure to take a backup of your database to use in case if needed. Go to “Elementor > Tools > Version Control” section. You can either reinstall the current version or select any previous version that you want to rollback.
Other Factors for Improving Elementor Speed
All the above factors are within Elementor settings and below are the external factors that could affect the speed of your website.
7. Use a Lightweight Theme
Though Elementor is an independent plugin many commercial themes offer Elementor bundled with other features. Since these themes are custom coded to create page layouts, it can easily create conflict and impact the loading speed. We recommend using lightweight themes like Astra or GeneratePress which come with free Elementor starter templates.
The other option is to use Hello Elementor theme which is from the same plugin developer. This theme has more than 1 million active installations and obliviously work smoothly with Elementor. It has minimal design and primarily work with Elementor templates. So, if you really like Elementor plugin then Hello Elementor is the best theme for you to have an optimized website.
8. Reduce Number of Add-ons
There are hundreds of third-party plugins available as add-ons for Elementor page builder plugin. These plugins will add additional elements to the base plugin to create beautiful layouts. However, these plugins may not work nicely with the parent Elementor plugin especially when the parent plugin got updated to newer version. In addition, add-ons will add additional CSS/JS and increase the HTTP requests. If you like Elementor, go to the Pro version which offers sufficient elements and template libraries. Avoid using third-party add-ons for adding few elements which could potentially slow down your site.
If you want to use add-ons, then go with plugins like Ultimate Add-ons for Elementor. You can enable only required widgets and disable others to reduce the file size.
9. Check Caching Setup
First thing is to make sure you have proper caching or optimization plugin when using Elementor. This will help to serve all your pages as static pages and improve the loading speed. WP Rocket and Perfmatters are two best plugins you can use for optimizing Elementor website. However, you need to be careful when using optimizing CSS delivery feature with WP Rocket or any other caching plugin. Removing unused CSS or generating critical path CSS will not work properly when you have dynamic CSS added inline with Elementor.
- If you optimize CSS delivery on your site, then disable “Improve CSS Loading” experiment and use external file option.
- Alternatively, you can exclude the dynamic files from CSS optimization. Since dynamic resources will change on each page you need to exclude them with wildcard format as allowed by your caching/optimization plugin.
If you are using Elementor for posts or any other custom post types, then we strongly recommend using Perfmatters or Asset Cleanup plugin. Using these plugins, you can disable unused CSS and JS files on specific post and on site level.
9. Cloudflare Rocket Loader
If Rocket Loader is the problem, then you can use page rules in Cloudflare to ignore Elementor pages and templates to fix the problem.
10. Optimized Hosting Setup
Elementor and other heavy plugins like WooCommerce needs an optimized hosting to load your pages faster. Earlier, you need to look for SiteGround Cloud, Cloudways or any other VPS hosting platforms for using Elementor page builder. Now that Elementor guys themselves offer an optimized hosting with Google Cloud Platform and Cloudflare CDN. Though this has limitations of 100K visits, 100GB bandwidth and 20GB space, you can easily kick start a website and get Elementor Pro for $99 per year. You can get a completely optimized setup for Elementor and your site will load blazing fast with themes like Hello Elementor.
11. Image Optimization
Finally, large size images used in above the fold area will create problems for loading largest contentful paint. In addition, other images can also create problem if they are not optimized properly.
- Reduce the size and dimensions of your images, especially for those images used in above the fold area.
- Lazy load your images to load them only when user scroll to that position.
- Use WebP format to reduce the size and load them faster.
Plugins like Elementor became popular with drag and drop elements and attractive reusable templates. However, things are completely changed now and speed is the most important factor compared to beautiful page layouts. You can make use of the default Elementor experiments and other settings to fix slow site and improve the page loading speed. In addition, you can also try their optimized Hello Elementor theme and premium cloud hosting to take your site to next level.
Leave a Reply
Your email is safe with us.