Home » Tutorials » 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…
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:
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:
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.
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:
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:
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:
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:
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.
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:
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.
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.
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:
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 );
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"
Your WordPress database is the place where every content and settings are saved. It’ll eradicate numbers of trash in the form of:
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.
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:
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.
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.