As we all know, Elementor is an astounding page builder plugin and also it empowers you to harmonize a full Website with ease. But some websites, however, might have issues that cause slow loading. Most importantly, many users actually don’t know ‘How to speed up Elementor Website’.
So it’s very important to know why this problem occurs and how to resolve it. That’s why, in this article, we’ll show the most effective and proven tips to speed up the Elementor Website.
And in the last part of this article, we’ll discuss the common mistakes that we should avoid.
Without further ado, let’s dive in
Elementor Slows Down Website: Is It True
We are all fairly aware of one thing about Elementor, It is very easy to use, fast to implement, and helpful for creating any designs. However, sometimes websites with Elementor might have a configuration that causes slow loading.
Most of my sites are loaded in taking more than 2 seconds according to Google stats, of course, this time might vary slightly depending on your content and several other factors – WP Info Blog
Elementor alone is not responsible for the site loading issue. Multiple reasons lie behind this. For example, hosting problems, server errors, large media files, external scripts, additional plugins, files of themes, etc.
Articles to Kinsta, a website gets slow for numerous reasons. And they explained perfectly why a website slows down in terms of different aspects.
So considering the facts, we’ll show how you can speed up your Elementor website and what you should follow in the next part.
7 Proven Tips for Speeding Up Elementor Website
We already know about Elementor Page Builder’s effectiveness and possible outcomes while implementing it in design. So there is no doubt about that. But, the concerning fact is the issues that slow down the Elementor Website.
Elementor offers many options and editing capabilities. Although designing web pages with Elementor is really easy and fast, if you want to speed up your website, then check out the following criteria.
1. Not Using Free Hosting Server
If you’re running your business on an online platform, then it’s wise to use premium hosting. So you have to use the best hosting plans to speed up your website. You know, hosting matters. Because of using a free hosting service, your website may have major impacts like slow loading, unavailability of a server, and more.
Check out the following article on the ‘best hosting plan for the elementor website’. In this article, we showed which hosting plan you should grab and the other hosting service providers.
2. Resizing Media (Images, Videos, or GIF files)
Using any media file without resizing is a very bad practice. It slows down the website, reduces website performance, increases bounce rate, impacts site visibility, decreases web traffic, and more.
You can use TinyPng to resize your media file and get rid of this problem. This is an amazing tool. Because it optimizes images so perfectly but keeps its original resolution.
3. Aware of Using External Scripts
Sometimes we need to add external scripts, such as HTML codes, JavaScripts, and other codes. But, Do you know? Using these codes may cause your website to slow down. Yes, you’re hearing it right.
External scripts like Google Maps, Facebook share count, and Avatar images slow down a website. But these are very important for any website. Then what will you do?
Okay, you can deactivate Google Fonts, Font Awesome, and EIcons by adding the following codes to function.php file in your WordPress site.
Google Fonts
If you really want to speed up Elemenetor and also use the other scripts, then use the following codes to deactivate Google Fonts.
add_filter( 'elementor/frontend/print_google_fonts', '__return_false' );
Font Awesome
To deactivate Font Awesome, use the following codes:
add_action( 'elementor/frontend/after_register_styles',function() {
foreach( [ 'solid', 'regular', 'brands' ] as $style ) {
wp_deregister_style( 'elementor-icons-fa-' . $style );
}
}, 20 );
The thing to be considered: By default, Font Awesome icons will only load on the page where you’ll use them, for this reason, FA will not load on pages having any Font Awesome icons. Therefore, it brings faster performance and page speed to your website and facilitates your SEO and your user experience.
EIcons
To dequeue Font Awesome if you truly think not to use any Font Awesome icons. So if you deactivate Font Awesome, the icons will no longer show on any of your web pages.
add_action( ‘wp_enqueue_scripts’, ‘remove_default_stylesheet’ , 20 );
function remove_default_stylesheet() {
wp_deregister_style( ‘elementor-icons’ );
}
4. Beware of Using Multiple Plugins
This is the modern time of technology. And the WordPress ecosystem is ruling 34% of the web. Many plugins are available in the WordPress industry to manage this huge platform. But all of them are not useful to you.
Sometimes using too many plugins on the website causes slow web page loading. So you should think twice before using any plugin. On the other hand, you deactivate the particular plugin if you’re done.
5. Choosing The Right Theme
Using the right theme for the website is also an important fact. You should use a suitable theme for your website.
A good theme shouldn’t slow down a site, but unfortunately a lot of themes do – Elementor
What you can do is.”
- Deactivate the themes that are creating problems
- You can use theme twenty. (Read the article on WordPress Default theme)
- Use Elementor default templates, or you can choose Happy Elementor Addons to create designs.
6. Use a CDN (Content Delivery Network)
CDN stands for Content Delivery Network. It’s a geographically distributed group of servers aiming to deliver content to users within the fastest possible time. Suppose the data of your website is hosted on a server in New York. If an American user visits your site, it will load fast on his end.
But if someone visits your site from Europe, what will happen to them? It will take time to load your web pages on their ends. This is why giant businesses that have large audiences worldwide maintain multiple CDNs. For example, Amazon, Alibaba, and eBay.
However, if your website is just at the starting level, you don’t need to worry about CDN. But if it has a huge audience base and financial value, you must host its database on some other CDNs. Cloudflare, CacheFly, and Amazon CloudFront are some best CDN providers.
7. Use a Cache plugin
You may not know what page cache is if you are a beginner. Let’s know first how it works. Every website has two parts: front-end and back-end database (blog posts, videos, images, and GIFs). Users commonly land on the front end and request what type of content they want to see.
The backend database generates HTML files/codes of that content and presents them to visitors’ browsers in a perfect visual way. But the back end server doesn’t preserve the HTML codes. So, when users make a new requisition, the server has to build the code from scratch again.
It kills time. A cache plugin is a solution in this case. It preserves the code once created and instantly delivers it to users if the same request is made again.
8. Use a High Performing DNS
DNS stands for Domain Name System. It’s a server that translates human-readable domain addresses (like www.happyaddons.com) into machine-readable IP addresses (like 1900.100.101).
How does the DNS work? Each website is hosted on a hosting server and receives an IP address. When users type a URL on their browsers and hit the enter button, the DNS server starts to find the IP address of the domain.
High-performing DNS can help quickly locate the IP address and connect it to your browser. This is why you must use a high-performing DNS server. Some top DNS servers you can consider using are Cisco OpenDNS, Cloudflare, Google Public DNS, and Quad.
9. Remove Unnecessary Files from the Database
Database refers to the space where web files (photos, videos, GIFs, voice clips, etc.) are stored. Unnecessary files can make a website heavy to load. Yet often, it happens users upload the same image repeatedly, which is a wrong practice.
Upload the same image once. Then whenever you need it, use it from the media file option. Alongside, keep removing the spam comment. Because they can even take up your valuable web space.
10. Increase the Memory Limit
By default, WordPress has a 32MB PHP memory limit. And some hosting providers increase it up to 64Mb. This PHP memory matters because WordPress requires enough memory limit to run and execute themes, plugins, and codes.
To seamlessly run Elementor, WordPress requires a memory limit of 256MB. You can easily increase the PHP memory limit. Watch the video on how to increase the PHP memory limit from cPanel.
11. Use the Latest PHP Version
Most WordPress themes and plugins try to update them with the latest PHP version to keep them compatible. So, if you forget to upgrade your website to the latest PHP version, some plugins or themes may lose compatibility with your website.
It will result in reducing your web speed. Besides, upgrading to the latest PHP version is a must to ensure better security and some extra muscle against hackers.
12. Enable Hotlinks Protection
Hotlinking is the process of displaying videos, images, and other media files of other websites using their bandwidth. If you forget to disable hotlinks on your site, it will allow others to display your web files on their website using your website’s bandwidth.
It can significantly reduce your web speed. There is a hotlink protection feature in the cPanel. By enabling it, you can prevent others from your using your web assets and bandwidth. Watch the video below on how to enable the hotlink protection.
Bonus Tips
After implementing the above tips to your website, you should apply these on your website. To speed up your website performance, you can use WP Rocket and Autoptimize.
WP Rocket
This plugin facilitates you in the following ways:
- Create all inline and external JS into one file
- Keep all localized scripts together before the primary script
- Automatically optimize 3rd parties like ( Tawk.to, WP Rockets lazyload, Google Analytics, Double Click Google Analytics)
- Boost up the lazy uploads, etc
Autoptimize
Autoptimize keeps optimizing your website in a very easy way. It can facilitate you in the following ways:
- It can minify cache scripts and styles
- Injects CSS in the page head by default
- Inlines critical CSS
- Easy to optimize lazy-load images
- And also optimize Google Fonts, etc.
Common Mistakes You Should Avoid
Do you utilize Elementor properly? If the answer is yes, then you may be out of danger. But if not, then this part is for you. Because we’ll discuss the common mistakes that every Elementor user makes and how to overcome those problems, in this part.
However, we have already discussed earlier in our previous section what you should follow to speed up your Elemetor website.
Okay let’s begin:
Not Using The Correct Theme
The theme gives a website the perfect structure. But if you don’t choose the right one, then all the effort won’t bring out success. People will not come to your website thus it’ll create a bad impression.
A perfect customizing theme will speak your voice, and also people will get an amazing experience with your business. So it’s wise to use a suitable theme for your website or customize a theme from scratch. And Google will not only rank up but also speed up your website.
Customizing Without Clearing Cache
Another common mistake is customizing your website without clearing your website cache. Websites are constantly experiencing adjustments and updates. So it’s very crucial to clear the cache regularly before editing or designing.
If you’re a regular MAC user, then you can clear your cache file using Command + R and Control + Shift + R for windows. You can read this documentation to get rid of this problem.
Not Optimizing The Images
Optimized images are not only fruitful to SEO but also good for a fast-loading page. Many Elementor users do not resize images before implementing. As a result, the website gets weight and loads slowly.
You should plan for resizing each photo utilizing TinyPNG as we already said in our previous section.
Not Using the Default Color
Though it’s a minor issue. But sometimes, you may face trouble for not using the right or default color for your website. You can get many options to choose colors from the default color gallery of Elementor.
These colors are designed precisely to make it easier for users. It will help to save you a great deal of time and also keep you consistent throughout your website.
FAQ on How to Speed Up Elementor Website
Hope you are enjoying this discussion. We’ll now answer some common questions related to the topic of how to speed up Elementor websites. Keep reading!
Does Elementor slow down a website?
The answer is ‘No’. Elementor doesn’t actually slow down a website. But if your website isn’t perfectly optimized, hosted on a quick good server, using heaving themes and plugins, and not good inefficient content management, it may experience a slow speed.
How much memory limit is a must for Elementor?
A memory limit of 256MB is a must for Elementor. But for better performance, you may increase it to 512MB.
Does Elementor harm SEO?
Elementor doesn’t harm the Search Engine Optimization process. Rather it can help you take care of many technical SEO parts.
Do I really need Elementor?
If you use WordPress, its Gutenberg block editor is enough to create landing pages. But Elementor has many exciting features and widgets by which you can create interactive landing pages. Elementor has both the Lite and Pro versions.
Using the Lite version, you can create a basic-level website. But if you want to give it a gorgeous appearance, you must use its pro version.
How to clear the Elementor cache?
The process is very simple. Log into WordPress Dashboard. Then, navigate to Dashboard > Elementor > Tools > General.
Click the button Regenerate Files & Data. Hit the Save Changes button afterwards. Thus, you can clear the Elementor cache.
Final Verdict
It’s not quite possible to cover all the issues in a quick time. But we tried to focus on the vital issues that every Elementor users face. Make sure to be very careful of the process for customizing a website using Elementor if you are building on your own or you’re planning to hire a developer.
We hope that you found it very useful. If you follow the steps carefully, you can surely speed up your Elementor Website.
However, if you feel we didn’t mention any common mistakes that should be on the list, please feel free to share them with us in the comments below.
22 Responses
Thanks for the article but who puts code in a screenshot!…
Hello Oli,
thanks for your co-ordination. Please check now, it’s been updated.
Hope that you’ll find more interest in our other articles.
there is a mistake on add_filter( ‘elementor/frontend/print_google_fonts’, ‘__return_false’ ); missing ‘ before _return_false
Hey George
Thanks for your concern. By the way, we’re really sorry for the inconvenience ?. However, we’ve updated the mistake. Now you can check and please let us know if again it doesn’t work ? Cheers
Yeah except running side by side speed test of JUST elementor and elementor Pro installed with zero other plugins on bluehost and ALL images pulled from a CDN drops my google page speed score from a 92 on mobile using twenty twenty theme to a 16. Elementor is nothing more than a resource hog and a waste of 100 dollars. I’ve been a developer for over a decade and this is absolutely preposterous that any plugin is developed that badly.
Hi Liz, it’s really horrible the experience you shared. But we are doing really well with all our sites built with Elementor. Take a deep look and try again, your site speed should get improved.
Thanks a lot for sharing your experience with us.
I’m a developer and have to agree with Liz here. There are competitors that are doing better performance wise. We can only do our best to help improve performance of the sites we manage that use this builder, but it’s like fighting a lost battle.
Hi Karen,
Gobinda here from team HappyAddons,
I agree with all of your points of view. In terms of speeding up the site where we are using page builders, we need to consider many things. I hope you will also agree at this point; the page builders are coming for basically the non tech guys. That’s why so many stuff are included in the builders that might not be needed if we build the site from scratch without page builders. We get plenty of features without having any coding knowledge.
For example, we can have a look at parallax features. If I want to add them with raw coding structure, I have to be an expert level frontend developer. Otherwise, I can’t add that feature on my site. But the parallax itself a heavy thing in terms of page speed score. An expert can minimize it by his/her expertise level. But the noob in the coding area like me doesn’t have to bother with coding stuff if I use Elementor’s parallax or HappyAddons Parallax features.
Like to share, From the version 3.0 Elementor, the dev-ops are trying to focus on minimalistic coding. They also upgrade the DOM of the elementor. Experts are now sharing that it’s a good move to the page speed score. And from the very beginning, we are using on demand asset loading feature within HappyAddons for Elementor. Also, we are following a decent coding structure. We are aware of the page speed issue of page builders. ?
I hope in near future, page builders will come with bloated free codes.
Thanks again for managing time to share your valuable thoughts regarding our works,
Gobinda,
Product Co-Ordinator of HappyAddons.
Hi Nahid, thanks for the helpful articles. However there’s one thing I would like to ask, If I made different layout for mobile and hide it on desktop view, does it affected in my mobile pagespeed?
Heyy Atmodjo
Thanks for your crucial time to comment here. And also your question has a real value. Basically Elementor works individually for both desktop and mobile views. To clear this confusion please have a read https://wordpress.org/support/topic/mobile-layout-changes-effect-desktop-layout-and-vice-versa/. And surely, it will help you know your answer very clearly.
Thanks a lot!
Fontawesome does slow websites down. You can do a speed test using any tool on the internet such as GtMetrix and it will highlight issues causing your website to slowdown. Fontawesome is usually a culprit and a lot of people are complaining about it.
Hello Deewinc
Thanks for your feedback and kind consideration.
By the way, you can find our other blogs which are more informative and helpful one also.
Cheers?
Weird, I tried adding the code in my functions.php and kept doing pagespeed insights tests and the items it wanted to preload won’t go away.
Hello Clints
Sorry about your inconvenience. One thing I want to know did you check other methods along with applying the codes? Or just copy the code and paste that?
Hey Nahid, great post!
Hello Eduardo
Glad to hear that. And of course,we’ll check soon.
Masya Allah. Nice article.
Thanks for your feedback.
Regards
Gobinda
Team HappyAddons
just to correct something , you have error in code ‘removing elementor icon”
add_action( ‘wp_enqueue_scripts’, ‘remove_default_stylesheet’ , 20 );
function remove_default_stylesheet() {
wp_deregister_style( ‘elementor-icons’ );
}
Oops, sorry; thanks Alaa, we have updated the typo now. Thanks for pointing out the issue.
Regards,
Gobinda
Team HappyAddons.