How to Improve Elementor / WordPress Based Websites Performance

One of the most important things while creating a WordPress website using Elementor Page Builder is increasing website loading speed so the visitors don’t suffer from slow-loading pages. This helps to improve user experience and decrease website bounce rate. Not just that, search engines consider website loading speed as an important factor to rank your website and move it up or down in the search results based on the time it takes to load your website pages loading speed.

In this guide, we will show some important tips to boost your Elementor website loading speed which will help to increase your site ranking on search engines using different tools, and the options included in Premium Addons for Elementor plugin that helps you to decrease the server loading and improve performance.

Elementor Website Performance with Premium Addons

Premium Addons for Elementor plugin supercharges Elementor Page Builder with 60+ highly customizable Elementor essential addons and widgets, 400+ premade Elementor templates that will give you the ability to build sophisticated websites in less time with no coding required.

Premium Addons for Elementor team has been working on improving the plugin core by removing any unnecessary code, HTML container, etc. to minimize the loading speed. Also, we have added new options to detect the unused elements and disable them and generate CSS/JS files dynamically based on the premium elements that exist in your Elementor page/post.

Generate Dynamic Assets for Elementor Website

We have recently added an option in Premium Addons for Elementor plugin to improve the way used to load widgets` assets by generating the JavaScript (JS) and Cascading Style Sheets (CSS) files dynamically based on the Premium elements used in the current Elementor page/post.

This option will help your website to run faster and improve page load by removing duplicated codes, unused CSS, and decreasing the size of the assets files loaded on your Elementor website page. Dynamic assets loading means that CSS and JS files loaded on your page will contain the code of the only widgets on your page.

Disable Unused Widgets for Elementor Premium Addons Plugin

Disable Unused Elementor Widgets option also has been recently added. It detects the unused widgets in Premium Addons for Elementor and Premium Addons Pro and deactivates them. You can find this button on WP Dashboard > Premium Addons for Elementor > Widgets & Addons tab.

This option helps to minimize the number of requests sent to your server when you are on Elementor editor page by loading the PHP, CSS, and Javascript files of the used widgets only. This decreases the time it takes to load the editor page and helps to fix Elementor editor panel stuck, never loads, and a spinner is showing.

Please check this article for more information about how to improve Elementor page builder Editor speed and fix Elementor editor infinite loading problem.

Reduce Server Requests and Enhance Elementor Website Loading Speed

One more thing that slows Elementor loading speed is loading unnecessary Javascript files on your website. Premium Addons includes Elementor Google Maps widget that depends on Google Maps API JS file. So, if you are not using Premium Google Maps widget on your website, you can disable loading Google maps API JS file from Google Maps API, then uncheck Load Maps API JS File.

Please check this article for more information about how to reduce server requests for Elementor.

Speed Up Elementor Pages With Many Lottie Animations

Premium Addons is fully compatible with Lottie Animations. We added Elementor Lottie Animations widget and Elementor Lottie Animations addon elements. Those Lottie animations are by default rendered as SVG, but it’s a large size or many-layered animations. That maybe will lead to a slow down to your website page. So, added an option to render the animations as Canvas to improve page speed, please note that Canvas doesn’t support all Lottie Animations for example stacking multiple subtracting masks.

Please check this article for more clarification about Lottie Animation rendering.

Premium Addons has recently integrated Lottie Animation with Premium Addons widgets.

Minimum Requirements for Elementor Page Builder

Elementor website loading speed issues are usually related to lack of PHP memory or time limit. So, you should be sure that your website has the minimum system requirements to use Elementor Page Builder and Premium Addons for Elementor plugin.

To check your system info, please navigate to your WP dashboard -> Premium Addons for Elementor Dashboard -> System Info tab. Then

• Make sure that PHP Memory Limit is 300Mb or higher.
• Make sure that PHP Time Limit to 300 or higher.

Here’s an article showing how you can change PHP Memory Limit and PHP Time Limit on your server

How to Check Elementor WordPress Website Loading Time?

Website loading speed in your device is not the real loading speed. Since you’re visiting your own website frequently, the website will be cached by your browser automatically. Loading speed when visiting your webpage for the first time is the real measure because the page content has not been cached yet by your browser.

There are a lot of websites that can you use to test website speed like:

1. GtMetrix
2. PageSpeed Insights 
3. Pingdom

Check Elementor Site Speed Using GtMetrix

One of the most used tools to measure websites speed:

• Provide detailed information about what we need to optimize.
• Recommended Optimization sorted by importance and rated from 0-100.
• It saves your website speed report tests so you can share them later with team members.
• Provide detailed steps to how to improve each point in test report.

You can check their 2021 report based on 170 million tests.

Check Elementor Website Speed Using Google PageSpeed

Google PageSpeed tests web page optimization quality and also provides recommendations on how to improve website speed. Also, it shows the result for pages on desktop and mobile separately.

Why Is Your Elementor Site Slow?

After you run your speed test on your Elementor website, you will get a speed test report with recommendations to speed up the website. Mainly, the most critical items that slow down your website are:

• Web Hosting
• WordPress Configuration
• Page Size
• Plugins and Themes
• External Scripts

In next section will have detailed steps to improve website speed.

How to Speed Up Elementor Website?

First before we do anything, we strongly recommend to back up your website.

Elementor WordPress Site Better Hosting

When you open your browser and want to visit any website in the world, you request to access files from a computer that is too far from you. Probably this computer is hundreds or thousands of miles away from your current location. This computer/server needs to complete several tasks like executing server-side code, sending files and media to your browser to load, running database queries, and much more.

So, hosting is the most critical factor when creating a website because all steps listed below will not influence page loading speed. If your website is the main resource for revenue, so you should pay for better hosting because it will have a direct impact on your revenue.

Elementor WordPress Hosting Types

In this section, we will have a quick look at different Elementor WordPress website hosting types. So, you can choose the preferable and suitable hosting type for your website.

Dedicated web server for Elementor Website

A dedicated server means that you will have your own server and you’re using it individually with its full performance. It’s very useful for agencies and if you’re having a lot of websites because it’s a little bit expensive.

Reseller Web Hosting for Elementor WordPress Site

Reseller web hosting is the best solution for making money, you can use it to host and sell hosting for your clients and manage them.

Cloud Web Hosting for Elementor Site

Now, cloud hosting is the most used hosting service. As you can control over thousands of website servers together. Mainly, it used by big eCommerce website

Elementor WordPress Managed Web Hosting

Managed web hosting is a full hosting package that is designed specifically for WordPress hosting. You will have more control, technical support, and operation that will help you while building your Elementor WordPress websites like website backups, automatic WordPress updates, stagging websites, and more advanced security configurations to protect your website.

Shared Web Hosting for Elementor Site

Shared web hosting means that you’re using specific space from the server and your website will have some limitations. It’s very helpful for a personal website but will not provide the expected performance.

Now, you can select the kind of hosting that matches your needs and also the advantages of them.

What Should I Consider in Elementor Website Hosting Plan?

Whatever the host type and vender that you will go with, please consider the following factors before making a final choice:

• Price: Choosing the cheapest hosting will not deliver high performance.
• Host Tech Specs: Please select the host with enough RAM, disk space (prefer SSD) and processing power that meets your business needs easily if you’re running an e-commerce website.
  • PHP 7+
  • MySQL 5.6+
  • 256MB+ WordPress memory
  • NGINX server
    • NGINX performs 2.5 times faster than Apache 
• Real-Time Support: Having 24/7 support is one of the most important factors because if your site goes down unexpectedly, you will be able to talk to some who will help you.
• Real Reviews: Check authentic people’s reviews about the hosting not in just the website testimonials but also in Trustpilot for example.
• Location: Consider where the most visitors location and select hosting that their hosting near their geolocation.

Caching Plugins for Elementor Websites

Using WordPress caching plugins will improve loading speed by preventing servers to generate page HTML again and again from the database and PHP files for every visit. Installing caching plugin will render pages and store them as HTML versions. Most popular caching plugins like:

• W3 Total Cache (Free)
• WP Rocket (Premium)
• LiteSpeed Cache (Free)

Which caching plugin you should go with? The one that has the following options:

• Enable Minify JS & CSS files.
• Enable Lazyload for media images.
• Enable GZIP Compression.

Minify JS & CSS files in Elementor

Minify JS & CSS files used to describe a method that makes your website files size smaller by removing white spaces, new lines, comments, block delimiters, etc. This improves your page speed as it reduces the amount of code.

Lazyload for Elementor Media Elements

Lazy loading images reduce calls on the server of your website when the visitor is browsing your website. It prevents the images from not being loaded until they are visible on the viewport (the visible area of your webpage).

Elementor GZIP Compression

GZIP compression compresses files before sending them to the browser and once the browser receives them, it unzips the compressed files and displays them. This option saves about 70% of your files sizes which will reduce the download time and make your website faster.

Enable HTTPS and HTTP/2 for Elementor Website

Upgrade your host to use HTTPS mode (encrypted) which is significantly faster than the old HTTP protocol. You can install Really Simple SSL to solve mixed content issues after installing your SSL certification to your website.

Boost Elementor Website Performance Using CDN

Content Delivery Network (CDN) boosts your Elementor website load time when someone visits your website. It will download content from the nearest location rather than going to the main server which maybe will be too far from his current location. Also, it will protect your server from heavy requests by splitting traffic across different locations. There are a lot of CDN available likes:

• Cloudflare: An appropriate choice for corporate clients.
• BunnyCDN: Affordable solution to meet your budget.

Also, it’s recommended to use premium DNS because they offer more fastest response and can protect your website against DDoS attacks.

Plugins Impact WordPress Websites Built With Elementor Page Builder

Using faster and fewer plugins increases website speed because when visiting a website, fewer files will be loaded and more queries will be executed. Also, keeping the plugins up to date is important to make sure everything is secure and clean your Elementor website. You can check compatibility with PHP and WordPress versions using PluginTests website which runs smoke tests on WordPress plugins and provide a detailed report with plugin impact on performance and PHP errors.

For example, you can find the test report for Premium Addons for Elementor latest version:

Use Light Elementor Theme

To boost Elementor website speed, you should use a light theme that has been optimized and doesn’t slow down your visitor’s experience like:

• Kemet Theme
• Hello Elementor Theme

Uninstall Unused Plugins and Themes

In the website development stage, you’ll have a lot of WordPress Plugins and Themes installed. So, you can have wide options to choose from them. But after completing and your website ready to publish online make sure that all disabled plugins and themes have been deleted.

Keep Everything up to Date to Boost Elementor Speed

having outdated versions of WordPress, themes and plugins will put your website at security risks and maybe can cause conflicts between different plugins and themes. So, always be sure that you’ve updated them regularly. But be sure that take a backup before updating them. I recommend always keeping an eye on WordFence plugin blog to be updated to the latest security updates.

Cleanup Elementor WordPress Database

Elementor website content and settings are stored in your server’s database. You should always clean trash like posts, revisions, trashed comments, deleted plugin settings, etc. Also, it’s important to optimize your database to be more efficient. I always recommend using WP Optimize plugin.

Optimize Elementor Media Library

Images and video nowadays are the main elements in Elementor website. But having large size media will decrease your Elementor page speed. You should always optimize your media by following below steps:

• Don’t Upload Audio/Video Files Directly to WordPress: It’s always recommended to upload those large media files to the audio/video hosting service and embed them to your website. You can use Soundcloud, YouTube and Vimeo.
• Before uploading images to WordPress site: Optimize the images with one of the following image manipulation applications:
  • FileOptimizer
  • RIOT
  • ShortPixel Image Optimizier

Think mobile-first

Most users are now checking the website using their mobile phones, so you should make sure that your website is too light on mobile especially if they’re using mobile data while browsing. You can consider those points below while create your Elementor website:

• Remove Heavy Elements On Mobile: Alawys try to remove heavy content and media on mobile and tablet, so your page will be faster. You can use Premium Display Condition Global Feature to acheive that.
• Use Pagination: Try in large pages to use pagination which will help you to decrease page size.

Finally, why should you consider speed up Elementor WordPress Website?

Generally, having a slow website will cause a lot of bad effects. Here’s the list of the most significant issues:

• Less Website Visitors: Having slow load pages on the website will lead to fewer visitors. Almost 53% of users don’t like websites with 3+ seconds loading speed.
• Low ranking in search engines: Having a speedy website will increase the website’s chances to be on the first page. Google declares page speed as their primary ranking factor.
• Decrease Revenue And Sales: If you’re running an e-commerce website with Elementor on WordPress, then it’s very important to speed up your website. So, a website with a better user experience means more sales and revenue.
• Not Utilizing Paid Marketing Campaign in The Best Way: If your website takes too long time to load when visitor clicks on ad, they will give up and leave the page. That’s mean that you’re wasting money and not taking full advantage of paid ads.
• Not Appropriate for Brand Image: Websites are one of the most important elements of brand identity. You should not just have a well-designed website but also a light speed that lets your customers browse your website page easily and quickly.

Conclusion

Website speed is one of the most important factors that increase your website visitors. So, you should be concerned about this factor and try always to follow the latest techniques to improve website speed.

Now, go ahead and try to implement these techniques. Don’t forget to test your website speed before and after.

Come & Join The Community.

Share your thoughts, opinions, and suggestions with us, we listen to you! Join our Facebook group and be part of the community. You are more than welcome.