How to Speed Up Elementor Websites – To Do Guide

In this article, we will discuss about 14 ways on how to speed up Elementor website.

What if it’s taking a bit longer to load a website?

Will you be there for unlimited time or just click the ‘cross’ sign and leave away? Almost every user will do the same.

So, when it comes to your own website, you definitely don’t like your website to load slow.

Moreover, speeding up is a must to boost up your conversion rate.

Today, we’re here to let you know some tricks to deal with your slow loading Elementor sites.

Let’s dig into the guide…

1. Pick A Performance-Optimized Host

As you know, the speed of a website depends on the engine which powers it. So, if you want to make your website run faster, then you will need quality hosting working upon it. Then, you have to know how a performance-oriented hosting is performed, right?

Let’s know the whole. In the beginning, you need a host offering PHP 7+. The PHP 7 supports great performance over the older versions of PHP 5 where a lot of hosts are available.

A WordPress host should come with PHP 7. Plus, there should be some other performance improvements to load your website faster than before.

Moreover, there are some other hosts for Elementor. My recommendations are:

  • SiteGround
  • Inmotion
  • Kinsta
  • WpEngine

You can pick any of the mentioned hosting companies. They can definitely run the Elementor quicker. Nevertheless, if you want to run your site with other criteria, then there is another option you can use to speed up Elementor’s performance:

  • PHP 7+
  • MYSQL 5.6+
  • WordPress memory: Minimum 64MB and ideally 128MB+

Make sure you check out the comprehensive ranked list of hosting plans in SoftwareFinder

Another option is to detect what host a website is hosted on, by using a hosting detector. If a website loads really fast, this is a great indication that the server loads fast as well.

2. Use a Lightweight Theme for Speed Optimization

Are you using a page builder to make your content? If you are, then the theme that you use is also responsive to loading your website fast.

Telling about my experience, I created my own blog website with the GeneratePress theme. As the theme was more lightweight, it came very handy for my site. Notably, it reduced 40% time on my site’s page loading.

Unfortunately, all the WordPress themes aren’t performance-oriented. The performance-oriented themes have to have some specialties. Like:

Lightweight (In size and requests).

Modular Theme. Accordingly, you will be able to cut only those features you need/want.

Now, you’ll ask, okay then tell me what are the best performance-oriented themes?

While your site is built-in Elementor page builder, the suggested themes will work superb. Following the best performance-oriented themes are:

Hello WordPress Theme

  • Hello Theme : This is a lightweight theme that pair with Elementor Pro.
  • GeneratePress : GeneratePress is another great lightweight theme from Tom Usborne.
  • Genesis : Genesis theme has a great appeal to the developers.
  • Astra : Astra helps to improve your site’s speed with its lightweight, customizable functionality. Plus, it is compatible with WooCommerce and LifterLMS.
  • OceanWP : Easy to use, lightweight and highly customizable. Coming with numbers of helpful free and premium widgets.

3. Image Optimization Trick

We have come to know from HTTP Archive that images comprise up to 50 percent of the file size of an average page. That is to say, images are a great part of a webpage’s file size. So, it is very clear that you will be able to improve your site’s speed only by optimizing the images.

Image optimization is done by two specific parts to speed up your WordPress site.

In the first part, you have to look for perfect image dimensions. Provided that the theme you use supports images only up to 800px wide. Which is quite a usual value? Don’t go for full 3,000px+ images to load on your website. Except for hero images or photography sites or something like this, it is just a waste of space! (Even if it’s retina skin)

Therefore your first step should be resizing the real resolution of the images on the website to the highest width which adjusts with your theme.

The other step of image optimization is compression. Compression sports with your images by sizing. There are two types of compression. Namely:

  • Lossy – Lossy process tends to reduce big file size into smaller. However, by this process, there will be a loss in image quality.
  • Lossless – In the lossless process, the smaller image size will reduce without losing its quality.

Thereby, you may try the two processes of compression. Depending on what you need quality or size, you should follow these processes, either lossy or lossless. Thus you can easily and safely use lossy/lossless compression.

Another important thing, if you want to resize and

compress the images for uploading to your WordPress site, you can undergo these high-end plugins:

ShortPixel WordPress Plugin

  • ShortPixel : ShortPixel plugin works on the number that how much images you need to optimize. There will be no issue with size. This plugin is totally free for 100 images/month.
  • Imagify : Imagify works considering the quantity of MB you need to optimize. Here you have no limitation on the number of images. This plugin offers a free service for 25MB/per month.
  • Smush Image Compression and Optimization :  The plugin is totally free. Anyway, it is just for lossless compression. Plus, the free version of this plugin has only a 1MB file size limit.

4. Disable Slow Load Plugins

Although there is a myth that a website’s speed is co-related to the number of plugins used on the site.

But, this myth is not valid at all in most cases. If you use the right plugin, there will be no damage done. On the other hand, if you have some slow plugins, then the myth comes true. Therefore, all plugins aren’t responsible for speed optimization. Though some are. In order to optimize your site’s speed, you have to eliminate those slow plugins. Accordingly, you have to reduce specific plugins that are responsible for slowing down your site.

Now the question may arise that how do you recognize slowing down plugins in your site?

You have two options to start:

First of all, you should use the free P3 plugin

P3 means the Plugin Performance Profiler. Again, PHP 5 plugin isn’t the perfect one. Anyway, if your site’s hosting hasn’t started, you may use this plugin.

If you haven’t updated this plugin yet, though most of the servers are on with PHP 5.

Again while your server is having PHP 7, then it’s easier to get slow plugins via the Waterfall tab in a tool such as Pingdom or GTmetrix Tools.

Note: PHP 7 offers great performance – Use it only when you’re not using the P3 plugin.

All you need to do just optimize your website through the tool. Plus, you should look for the various requests to get any bottlenecks. Then, you can click the request to look at the URL as you can take the idea to know which plugin is the source of each request.

This is not all though. There is another great option: the free Query Monitor plugin. Okay, then what steps you should take against the slow loading plugins of your site?

The easiest answer to this question is just to eliminate those plugins (Provided that they’re not essential). Plus, you can look for more performance-oriented alternatives.

Fortunately, you will get some plugins that let you kill two birds with one stone. To give you an idea, Elementor Pro can remove the necessity for plugins. Elementor Pro comes with performance-oriented support for features.

For example:

  • Sliders
  • Forms
  • Social share buttons
  • Countdown timers etc.

5. Minification of Code & Concatenation of Files

Concatenation and Minification are two great techniques for minimizing the size of code files.

In fact, the strategy of minification is done by deleting useless characters such as line breaks and spaces. Besides, the concatenation combines many files into one.

Luckily, there is free Autoptimize plugin available which can help you to do both. You just need to configure it.

Moreover, If there are some issues, you can undertake a troubleshooting step.

6. Generate Page Caching

Page caching is a good trick to speed up your Elementor page. Although you shouldn’t use page catching as an improvised for basic performance, it’s a great tweak for optimizing speed.

‘Page caching’ is performed by building a static HTML version of a website. Instead of forcing the server to create your page from your database and PHP files for every single visit.

At present, managed WordPress hosts practice page caching at the server level. Therefore, you don’t need to do anything as there is ‘managed WordPress hosting’ available.

However, your host mightn’t practice page caching, you have the option to do page catching via a plugin.

Fortunately, you’ll be able to choose from a number of great caching plugins. Anyway, you can get started with some fabulous plugins, like:

wp rocket plugin

  • Cache Enabler : This is a great lightweight plugin from KeyCDN folks. The plugin comes with pairing as Autoptimize. Note: Disable Cache Enabler’s minification while using Autoptimize.
  • WP Super Cache : WP Super Cache is a free plugin from Automattic. Most importantly, it performs great for speed optimization.
  • Swift Performance Lite :  Swift Performance Lite is another great caching plugin. The plugin is very famous and has been reviewed positively in the WordPress Speed Up Facebook group
  • WP Rocket : WP Rocket is a premium well-known plugin. Here you will get superior performance tweaks that go beyond page caching. Plus, this plugin will help you to integrate with Cloudflare.

7. Use A Content Delivery Network

A content delivery network (CDN) supports for speed optimization of your website.

Here’s How you can Implement A Content Delivery Network:

If your site doesn’t avail of CDN, visitors from different places will use your website from the same location or server.

A content delivery network (CDN) can change the location which shows your site’s files at several locations. Thus, a visitors’ browsers can load your website from the server which is nearest to them. This is surprisingly cheap as well. Plus, there is a free version. Definitely, you can use a free CDN via Cloudflare

As Cloudflare has no paid programs, you can easily take the free plan for your site. In order to set up your site with Cloudflare, all you need to do is:

First off, sign up at Cloudflare. Then, change your website’s domain name servers to the nameservers given by Cloudflare.

Thus, it’ll be pretty easy for you to get started with Cloudflare.

8. Generate GZIP Compression to Concise a File

GZIP Compression is a fabulous process of compressing your files. It is done by sending files from your server to a visitor’s browser. The process can concise the size of your webpages up to 70%.

Moreover, this process is very easy to implement. You have to assume your server by using Apache only by adding code snippet to your website.

Make sure you have Apache server running. 

.htaccess file:

<IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml

  # Remove browser bugs (only needed for really old browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</IfModule>

There are some more hosts where you can do this with cPanel. That is, the SiteGround offers an Optimize Website option in the cPanel. 

If you’ve already enabled GZIP compression, now you can check either it’s doing right or not. Check with the free Check GZIP compression tool.

9. Reducing HTTP Requests

When a visitor enters your website, his web browser will request a list of files that needs to build the webpage in the visitor’s browser. The requests are: HTML, CSS, images, etc. Plus, these requests might incorporate external files and scripts. Namely, Google Analytics tracking code.

If you’ve not forgotten, you can remember that you got an example of all the requests above. (In the point of removing slow plugins).

To do the trick, you can use the tools like Pingdom and GTmetrix to reduce the number of HTTP requests at your site. Moreover, you have options to make a more manual approach as well.

Here I’m telling you about this trick in brief. Let see some quick tricks for WordPress sites:

  • Not using Google Fonts
  • Disabling Font Awesome
  • Turning off Gravatars

That is to say, if you want to turn off Google Fonts and Font Awesome in your Elementor designs, you have to add these two code snippets to a plugin. Copy and paste the following code in your Theme function.php file. I recommend you to use a child Theme and place the code inside the child themes function.php file. 

add_filter( 'elementor/frontend/print_google_fonts', '__return_false' ); add_action( 'wp_enqueue_scripts', function() { wp_dequeue_style( 'font-awesome' ); }, 50 );

10. Generate Browser Caching

Setting up Browser Caching is another way to speed up your website. However, it’s not like the given page caching method. Browser caching requests a website visitors’ browsers to save specific files on their device.

Like this, when that visitor will make a further visit to your website, his browser can load easily the locally cached versions of specific files rather than the files from your own server. Thus, your site can perform a faster loading time.

If you want to get browser caching manually, then you’ve to write another simple code snippet to the .htaccess file:

<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$"> Header set Cache-Control "max-age=84600, public"

11. Optimize Your WordPress Database

Your WordPress database is the place where every content and settings are saved. It’ll eradicate numbers of trash in the form of:

  • Post revisions
  • Trashed posts/comments and etc.

If you can’t get any improvement in your website load times by only cleaning your database, then you need to optimize your database. The process will help you to run your site faster.

WP-Optimize plugin will let you clean trash of your database.

12. Use The WP-Disable Plugin

WP-Disable is such a big name when you want to gear on your website’s speed up performance. With a lot of functionalities inside the plugin, you can play around:

  • Removing emojis: Wp-Disable plugin lets you disable emojis. Actually, emoji is an extra .js file. So, you may disable this file at once with the plugin.
  • Eliminating Query Strings: By removing Query Strings, you’ll be able to remove trash in your site.
  • Customizing the Heartbeat API frequency to 60 seconds: If you want to reduce the load on your server without removing the Heartbeat API, this plugin helps you do this.
  • Changing Revisions to one: However, you may want to disable revisions. But I think it’s necessary to store one revision at least. This will reduce the load as well as let you revise at least once. (As you can find if there’s an issue with current draft).
  • Disabling Google Maps embeds: If you don’t need Google Maps on a specific webpage, then it is better to disable Google Maps embeds.

13. Block Hotlinking to restrict Freeloaders

Hotlinking is injurious for speed optimization in most cases. As your server needs loading images for any site else, hotlinking may juck your server’s contents. So, you had better block hotlinking. All you need to do is just write the given code snippet to the .htaccess file:

RewriteEngine on RewriteCond %{HTTP_REFERER} !^$ RewriteCond %{HTTP_REFERER} !^http://(www\.)example.com/.*$ [NC] RewriteRule \.(gif|jpg|jpeg|bmp|zip|rar|mp3|flv|swf|xml|php|png|css|pdf)$ - [F]

Please replace example.com from the code snippets with your own domain name.

14. Using the Default Color

There are many options from where you can choose the color from the default color gallery of Elementor.

The colors were designed specifically as you can easily use these. If default color having chosen, it’ll save your time while loading your website.

Let’s Wrap Up:

I’ve tried my best to let you know the trick on how to speed up Elementor website.

If you have read the whole article and strategies carefully, then you own self should be able to optimize your site’s speed. And if you have still any questions, feel free to comment below. We’ll be right back to you soon.

Your Elementor Projects Deserve the Best

Get Master Addons Now

© 2021 - Master Addons| All rights reserved

Master Addons Demos

Heading

Animated Headlines
Dual Heading
Gradient Headline

Image

Image Hover Effects
Image Hotspot
Filterable Image Gallery
Image Comparison
Gallery Slider
Advanced Image

Content

Advanced Accordion
Tabs
Toggle Content
Team Member
Team Slider
Infobox
Flipbox
Blog
Timeline
Business Hours
Pricing Table
Restrict Content
Dynamic Table

Special Elements

Call to Action
Tooltip
Progress Bar
Progress Bars
Creative Button
Creative Links
News Ticker
Table of Contents
Current Time
Domain Search
Nav Menu
Search
Blockquote
Counter Up
Countdown Timer

Extensions

Particles
Animated Gradient BG
Reading Progress Bar
Background Slider
Custom CSS
Custom JS
Positioning
Container Extras
Mega Menu
Entrance Animation
Transforms
Rellax
Reveal
Header,Footer,Comment
Display Conditions
Dynamic Tags
Floating Effects
Custom Breakpoints
Post/Page Duplicator
Wrapper Link

Contact Form

Contact Form 7
Ninja Form
WP Forms
Gravity Forms
Caldera Forms
weForms