How to Speed Up Your Elementor Website 1261184322971373023
How to Speed Up Your Elementor Website

How to Speed Up Your Elementor Website

Speed optimization is as vital as better UI and UX design and overall aesthetic feel in terms of web design. Your website can be next to be worthless if your target visitors would take forever to load even just your home page. However, like any other problem, there are always solutions.

In this tutorial, you will be able to achieve something like this:
er optimized


01.

Delete inactive plugins and themes

best optimzation process image 1
Let’s start on something relatively easy.


We start on deleting unused plugins and themes. Even if they’re deactivated and inactive, they still consume storage on your server. So, reduce your server’s workload should be the first step to increase page loading speed.

You can use P3 Profiler to check which active plugins are also stressing out your site so you can monitor and maybe switch to alternatives that are much more optimized.


02.

Empty all trash

best optimzation process image 2

Next is you check every trash.

What I mean by every trash is literally what it sounds like. First, you check your site’s Cpanel or something and check if there are trashed files in there. If there are, delete them, permanently. You won’t be deleting them if you need them, right?

Second is check for trashed pages and posts. Delete them, too. As I said, they shouldn’t be in the trash in the first place if they’re important.

best optimzation process image 3

We want to make the server’s storage consumption at its most minimal state.

You can upgrade this step by modifying your Elementor website’s wpconfig.php to save you the hassle of having to do this every time, on every page, on every post.

By default, WordPress keeps trash for at least 30 days. How about we reduce it to seven days instead?

define ('EMPTY_TRASH_DAYS', 7);

Or if you understand fully that trash is trash, completely disable the trash system:

define ('EMPTY_TRASH_DAYS', 0);

03.

Enable Gzip compression

This is where it gets a bit tricky; code is now involved.

In the Information Age and the rise of the Internet, where storage matters everywhere, compression is our lord and savior. Same in optimizing your Elementor website.

Gzip is a feature that allows you to reduce the total size of your website by an average of 70%, which means you can reduce the loading speed of your size by 70% as well.

Fortunately, activating gzip compression (if you haven’t yet), is fairly easy. You enable gzip compression by simply modifying your .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>

04.

Take advantage of caching

Now, this is where things really get complicated.

As now that there’s a great chance that we’ve already reduced the size of your website by 70%, let’s not reduce it furthermore by not having the need to load your website every time the user access it.

How? Of course through “caching”.

If you don’t know it already, caching is when the browser or some network automatically stores the site’s heavy files on your website so you don’t have to download them again in case you come back.

It saves a ton of time!

There are a lot of ways to do this.

The first is enabling browser caching. You can do this by modifying your .htaccess file and adding this code snippet:

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>
## EXPIRES CACHING ##

What the above code does should be obvious already.

Second is installing a WordPress cache plugin. If you’re a web developer, this is like a 10-second task. If not, this is like a 1-minute task. In both cases, fairly easy.

wprocket

On the premium side, we can recommend the WordPress caching plugin WP Rocket for the following features:

  • Simple, fast, and intuitive setup.
  • Page caching is immediately activated.
  • Google Fonts Optimization minimizes HTTP requests.
  • JavaScript files are deferred till the page is rendered.
  • Integrates seamlessly with Cloudflare.

On the free side, we’ll recommend W3 Total Cache, not simply because it’s free, but before we discovered WP Rocket, we used W3 Total Cache for like eight months.

wp3total cache

And third, lastly, is using a Content Delivery Network or CDN like Cloudflare.

cloudflare savings

Not only that it speeds up your site for like 10 times, but it also protects your website(s) against DDoS attacks, session fixation and other forms of brute-force website hacking penetration practices.


05.

Minify, compress and optimize

tinypng

Prevention is the best cure.

Like in getting sick, yes, you can cure some diseases, but wouldn’t it be better if you didn’t even have them in the first place? It would’ve saved you time, money and effort which might as well have spent instead on other productive stuff.

One thing is optimizing your media files first before uploading them on your website. There are only compression tools for images like Tiny PNG that can reduce the size of your images in JPG or PNG format for 50% to 90% without degrading quality. It seems like magic.

tiny png plugin

However, if you don’t feel like having to do this every time as if you make blog posts every day, you can use the Tiny PNG plugin. It’s not free, but you get what you pay!

Other than compressing images, you may also optimize, compress and “minify” the javascript and CSS files of your site.

Most WordPress caching plugins have them already so there shouldn’t be an issue with that. CSS minification basically works like this:

Let’s say this is your CSS:

#red {
font-size: 1em;
color: red;
}

Now after being minified, it looks like this:

#red{font-size:1em;color:red;}

Yeah, it basically just reduces that space and newlines. However, if you have a ton of CSS on your site, it would count much. 10% to 20% additional file size reduction is not bad.

In addition to emptying your trash, you might also want to disable or reduce the revisions storage of your site, especially on pages and posts that get modified a lot.

Imagine this: Let’s say you have a blog page with 5,000 words. That’s already 10kB. So, what if you have like 20 revisions of that page. Your 10kB gets bloated 20 times into 2Mb. Look how much space you can save. And that’s just text, what for images?

You optimize your site to have the most optimal number of revisions by modifying the wpconfig.php file once again:

define( 'WP_POST_REVISIONS', 3 );

Or if you want, you can disable the revisions system altogether. However, please be wary that despite their optimization implications, the revisions system can be useful at times.

define( 'WP_POST_REVISIONS', false );

06.

Best web hosting

siteground

The above steps and tips may seem obsolete if the root of your optimization and page speed problems comes from your server and hosting provider itself. That’s why you need to make sure you have chosen the right hosting plan. A recommended hosting should have the best ability to process HTTP requests and MySQL commands at the least amount of time possible.

You can try to search the internet of recommended hosting. But here at Elementor Resources, we recommended SiteGround. Find out why on our post Why We Recommend SiteGround.


07.

Fastest WordPress theme

Choosing the best Elementor theme may sound easy, but knowing how much WordPress theme exists out there, this task can immediately give you a headache. A lot of WordPress themes would claim that they’re the fastest, lightest and simply the best WordPress theme. But you can never truly know unless you actually try them.

So, we’d just save time and give you a list of Elementor themes that do make this website considerably lighter, and faster just on simply by using it:

  1. OceanWP
  2. Hello Elementor
  3. Kava
  4. Neve
  5. Astra

Check 25 more Elementor Themes here.


Thanks for Reaching This Far! 🙂

I hope we were able to help you with this tutorial! You can also try to install the Elementor Pro Version and get access to more Elementor templates for free!

Get Elementor Pro Now

If you have more concerns or have encountered other issues, let us know in the comments section!

Leave a Reply

×
×

Cart