This is a transcript of our "Speed Up Elementor: How To Make An Elementor Website Load Faster" tutorial so you can easily follow along.

The tools we're using:

This video discusses the tools, tips and techniques that you need to improve the speed of your element or website. In this example video, we improve the speed of an Elementor website from 3.4 seconds to 1.4 seconds. So if you're interested in learning how to do that, this is the tutorial for you.

So we're going to just run through hopefully this video will be about an hour, and it will teach you everything you need to know about improving the speed and performance of your website. Alright, so first off, I want to go over why you want to actually improve the loading time of your website. Go to your website right now, enter the URL into the browser and load it. If the website takes a while to load and you're sitting there and you're thinking and you're actually focused on the loading time, then you're thinking this is a little bit too long.

This isn't a good look on my company or my website or my business, then you definitely want to focus on the performance of your website. There are a bunch of statistics that we could go over. And I'll show you a few right now as to why you want your website to load quicker. So this is on Neil Patel. He's SEO guy. And there are some pretty damning statistics here. First off, 73% of mobile internet users say they've encountered a website that was too slow to use. And then 47% of consumers expect it to load in two seconds or less. And then if it takes over three seconds, 40% of people will abandon the website.

So say you're a plumber in a small town, and you get maybe 100 people on your website, and of those 100 people 10 people convert to leads. So cut away 40% of those 10 people, you're left with, not a lot, you're left with six people and those six people who knows they might become leads they might not but those four people who have abandoned your website who would become leads. You're losing a lot of money. Because of this, and this is on a small scale example of a small service website in a small town, if you increase the amount of visitors or increase the amount of leads that you could be generating per month, you'll see that you're really losing a lot of money if your website isn't loading quickly. And there are a lot of other statistics that you can go online and take a look at. But these are the main things.

If an ecommerce website makes $100,000 per day, one second page delay could cost you $2.5 million. Then this is from Amazon and Walmart. Both of these guys improve the loading time of their websites and their sales shut up. So focusing on speed when it comes to your Elementor website, built with WordPress is absolutely essential. Elementor itself is a great tool because it allows you to build really whatever you want. So as you can see, we made this website here with Elementor, we used a Elementor template and this is actually going to be The website that we use to optimize, so I'll use this website to show you how our agency optimizes the websites.

But you can really build anything you want with Elementor. However, Elementor does come with its flaws. Elementor. Number one is pretty bloated when it comes to the coded outputs. So it outputs a bunch of code that isn't super clean. And because of this, it can increase the loading time of your website. So out of the box Elementtor, or isn't the fastest, and you'll need to focus on the actual speed of your website after building it. And then also Elementor allows you to build whatever you want.

So you could build this you could build something crazier, you could build something more simple, but because it allows you to build whatever you want, you need to be a little mindful when it comes to the creation of your website and you need to think, is this going to make my website load slower, and if this makes my website load slower Is it worth it? So that's really the constant trade off that you need to be thinking about when building your website when it comes to performance. Is this going to increase my sales? Is this going to decrease my sales? Is this going to make me more credible or is this going to make me lose more visitors? So it's really a seesaw. And you're going to try to balance that seesaw.

So you should always just think about what you're building on Elementor. And as you can see, a built in Elementor this was used from a template. So we didn't build the whole thing, but we added a couple things here. And we also have about and contact so this is the page and website that we're going to be using to optimize Elementor for speed. And as you can see, the only two plugins we're using on this website are Elementor and Elementor Pro, and then the only theme we're using on this website is Hello Elementor. So this should give you a good base Elementor website that you can follow along when we begin the optimization. So let's get right into it.

The first thing that you need to focus on when optimizing your Elementor website for speed is the hosting that it's on. So when it comes to hosting and Elementor, there's a lot of misinformation out there. And there's a lot of people looking for guidance on this. I see a lot in the Elementor Facebook group and the general WordPress Reddit. People ask, what hosts should I be on? Should I be on GoDaddy? Should I be on Bluehost? Should I be on something else?

Oh, if you're on shared hosting, and you can get off it, then you should get off it. If you're thinking about buying hosting, you shouldn't consider shared hosting. And this is because shared hosting is simply slower than other hosting offerings out there. And it costs almost the same now. So I wanted to show you a comparison between our preferred host which is CloudWays, and I'll explain more about CloudWays in a bit and a shared host which is Bluehost. So Bluehost is probably the most advertised host out there, they have an affiliate program. And if people refer other people to Bluehost, they'll make $65. So this Bluehost is everywhere. And a lot of people who are first starting out, get trapped into believing that Bluehost is a good option for them.

And in some cases, it might be a good option for a super basic website. But a website built with Elementor requires a lot of resources to load effectively. And this is because it's loading number one, a very, very fully featured page building tool on the back end. And on the front end, it's loading a very well designed page that has a lot of features such as transitions, high resolution images, menu, stuff like that.

This isn't a basic page, even if you're building something basic in Elementor. The code output is not basic. And it requires processing power to load. And that's not what shared hosting gives you. Shared hosting doesn't offer the resources you need to load Elementor quickly. And if this is all going over your head, I'm going to show you a couple numbers now.

So this is the loading time of our WordPress website on CloudWays. And this is the domain that we're going to be using to test our WordPress website, the loading, diagnose what's causing the loading to be slow, and then fix everything. So this is where our website is hosted now, as you can see, it scores 68 out of 100 on Google page speed Insights.

And here's our lab data. So we're going to be taking for this video we're going to mainly be looking at speed index under the lab data speed index gives you a whole measure of the loading time of your website. So it shows how quickly the contents of a page are populated. So this is kind of like a happy medium between everything here. And it says that it takes 2.8 seconds to load this page fully. Well, visibly populated time to interactive is full, but we're taking a look at speed index. So it's Takes 2.8 seconds to load this page.

What we did, we took this entire website installation. So everything I showed you in the back end the about page, the contact page, and we use a tool called WP migrate all in one WP migrate, which generated a perfect copy of this website. And we took this website and we installed it on a Bluehost installation. And we hoped Bluehost for live development that doesn't require speed or power or anything like that. We don't really use it that much anymore, but we still have it.

So I took this website, I completely copied it, and then I put it on Bluehost and I'll show you the page, we installed it on blog.isotropic.co and this will actually when we publish this video, this will just redirect you to our isotropic design blog. So this is an exact copy except the host is different. This is on a Bluehost host and what we did We ran it back through PageSpeed Insights. So this is the same page as this right here.

And you can see, here's your identifier of the page. And we ran it through Bluehost. And we got a worse speed index a lot worse. So compared to the 2.8 seconds of loading time, this takes 3.4 seconds. And as you can see, this is the same page. And it has a little different score a little worse. But the main thing to look at here is 3.4 seconds, compared to 2.8 seconds on the same page. And this is a pretty basic website, there are no additional plugins.

There are no special features on the page other than animations. So what I'm trying to show to you is that out of the bat, purchasing shared hosting is slower than purchasing, enterprise hosting, and I'm going to again, show you what CloudWays in a few seconds off the bat it's slower and then also this is a very big website to plugins, the Hello Elementor theme, basic Elementor page with transition. So if this is loading in 3.4 seconds, with no plugins, three pages, stuff like that, shared hosting the speed issues with it will compound so as you build your website bigger and bigger and as more and more people start visiting it and you have multiple people on the page at once, this speed index will rise exponentially.

And a higher speed index is worse because this is how fast the page takes the load. So off the bat, you can see that shared hosting is worse on a basic website in a development environment with no external factors. But then when you add in the actual real world element of a website, it gets even worse. So you don't want to be on Bluehost you don't want to be on GoDaddy, no matter what the people tell you. And they're only telling you that because they're getting paid $65 per conversion.

So our recommended host is CloudWays we use CloudWays on all of our agency websites, we use CloudWays on all of our-and as you can see, we use it on all of our agency websites, we use it on all of our client websites. And CloudWays is a host that allows you to easily host your website on enterprise level cloud hosting.

And what this means is that you can host your website on AWS, Google Compute Engine digitalocean offerings like that. And this is a very well featured, well managed, well run host. So you can run it on five cloud providers, you can install as many instances as WordPress as you want. The support aspect of this company is amazing. As an agency, we ask them a lot of advanced questions about PHP, and they respond and typically will even do things for us. So that's what you want when it comes to hosting. They got manage security, automated backups, real time monitoring, a built in CDN and stuff like that. So It's a great host.

We recommend this, wholeheartedly. When it comes to pricing. If you compare this host to Bluehost, or GoDaddy, it's actually almost the same price. So if you're buying a basic installation of Bluehost, it cost you around $7 per month.

This will cost you around $10 per month for the most basic plan. And this is good enough for one individual installation of an elemental website. So you can host it on digitalocean, linode, Vultr, AWS, Google Cloud. We do all of our websites on digitalocean because it's just the cheapest plan here. And you don't really need what other companies are offering. If you're just doing a basic element or website, it's pay as you go. So every month you get billed instead of having to up front pay one year, stuff like that, which is what other hosts will do. And you can start for free.

So you can give it a three-day free trial, no credit card info, anything like that. And then also, because we like this company, we partnered with this company, and you can get 30% off your first month of hosting. By entering the code “isotopic” there is a link in the description below. So we're using this host for this website and all of our other websites. And the reason we use this host is because it allows us to host on industry leading, name brand, data centers. And because we're using good hardware that additional enterprise level companies use, we're getting good performance.

Comparing that to Bluehost servers, it blows it out of the water because you get a dedicated one RAM, dedicated one core processor, 25 gigabytes of SSD storage and one terabyte for $10 a month, billed monthly. So we use this company, and we recommend that you use this company too. So this tutorial is using a website built with CloudWays hosting as the underlying storage provider.

Alright, so hopefully that gave you a good overview of why we use CloudWays, why you want to improve the speed of your Elementor website, and stuff like that.

So to quickly introduce who I am, I'm the founder of an agency who builds exclusively with WordPress and about 50% of our WordPress websites are created with Elementor. And because of that, we noticed that there are performance issues with Elementor. So we found ways to resolve the performance as best as we can. So that's what I'm going to be sharing here, I'm going to be sharing this same thing that my agency does when it comes to Elementor performance.

So we build websites and then we also have a professional WordPress PageSpeed optimization service. And the techniques that I'm going to show you in this video are basically the same things that we do with this service. So this service basically goes in and will do exactly what I'm going to show you here. Also, we wrote the book on WordPress PageSpeed. So if you go to Amazon calm, and then you type in WordPress PageSpeed. The book that we wrote on WordPress PageSpeed is the first thing that shows up. So we wrote the book on this pretty much. It's a step by step guide on how to increase the performance of your website.

And we have a link below. We also wrote the book on building an Elementor website. So here's our other book on building an Elementor to our website. And this is link below to. So there's a lot of knowledge that our agency has when it comes to increasing the page speed and the performance and everything related to the Elementor website. So that's basically what I'm going to be sharing to you. In this next section of this video. I'm going to be sharing all of the things that we've identified as an agency, over four years of building websites with WordPress, and 50% of the websites being built with Elementor.

I'm going to just share with you all of the tools and techniques that we use. And this is exactly what we would do in an agency. But I'm going to try to make this as simple and easy to understand tutorial. So even if you are a beginner, hopefully you'll be able to follow through and check out the tools at least, and install them on your website and see if you can increase the speed. So I'm going to try to introduce these topics to you in a simple and easy to understand manner.

Alright, so let's get right into the tutorial now. Hopefully that introduction wasn't too long, but I hope it did give you some background and things to pay attention to. So as you saw in the beginning section of this video, we use PageSpeed Insights to identify the base performance score and loading time of our website. And the reason we use PageSpeed insights is because it's simple to understand and it gives you exactly what's wrong with the loading time of your website.

There are other tools out there like GT metrics, Pingdom, a new tool called Fast Or Slow. And all these are linked in the description of this video. But the reason we use PageSpeed is because it's very simple to use, the industry uses it, and it gives you a list of things that you will want to focus on improvement. It's a very simple tool. And the simplicity is what makes it easy to use easy to understand and then easy to go ahead and fix the issues that it identifies. So there are other tools out there, other tools will offer you a lot more power, but if you're just looking to make the website that you've built in Elementor load quicker, this is just a good way to do it.

So, you enter your website address here, click the Analyze button and it will take a couple seconds to generate a report and what this does, it uses a underlying API called lighthouse. Lighthouse is a performance optimization and website audit tool that Google built. And this is also a Google websitedevelopersgoogle.com and it will take your website, and it will run it through all of it’s tests, and then it will output this report. And it outputs a mobile first report. And then you can go to the desktop report, and we're going to focus on both aspects of these. But we're first going to focus on the desktop report. So here's the address to our website.

As you can see, it is the burger website that we built specifically for this video, it will tell you all of the metrics here, it will tell you opportunities and it will tell you diagnostics, then it will also tell you the past audits and it will show this was made by lighthouse. So the things we want to focus on here are number one, all of these metrics. So the main metric we focus on is speed index, and it will bounce up and down until we actually optimize the website, then it’s largest contentful paint, then it's time to interactive, then it's first contentful paint.

All of these can be explored more here. They're a bunch of links in the description of this video to a blog post that we wrote on all of these metrics. But just for this video, we're going to be looking at speed index. So we want to increase the speed index of our website. And we're going to do that by scrolling down and taking a look at opportunities. And these suggestions help your page load faster, they don't directly affect the performance score, and this is your performance score. And also something to note is that you shouldn't really care about this score.

This is more of an overall metric that says, “hey, your website loads a little slow, hey, your website loads a little fast.” You don't want to be pushing it point by point up and up. What you do want to be focusing on is the speed index, we want to target a sub two second loading time. Sometimes that's impossible with the way the websites built, but we're going to try to improve the speed index as best we can. So we want this to [inaudible]. And we don't really care about this. Again, we care more about speed index.

So the way we're going to optimize our website is by taking a look at the opportunities that are triggered by the PageSpeed report. So as you can see here, search images in next generation formats, and it gives you all the images that it wants you to serve in a next generation format.

It tells you to reduce the initial server response time, and this is probably because our pages and optimized it wants you to eliminate render blocking resources. And it tells you all of these CSS files that it wants to eliminate. And then it tells you to properly size images. So what you can do from these suggestions is go in and do everything manually and properly size your images by putting them in Photoshop and resizing them to match this properly sized identifier.

You can also go ahead and eliminate your render button resources by taking all of these CSS sheets, copy and pasting all the CSS into another sheet, removing all unused CSS, and then loading it from that individual CSS by installing a PHP code snippet. You can also go and reduce server response time by pretty much doing everything else identified here.

You can also serve these next generation formats by installing something on your command line in converting everything to web P. But that is really complicated. everything I just said probably went right over your head. It's complicated, it's manual, it takes a long time and there's really no point to be doing this.

What you do want to do is address these opportunities, but you want to be smart about how you optimize your website for speed. So as an agency, we use three major tools when it comes to WordPress performance optimization. These three tools work together. And they solve pretty much every opportunity here. And I'm going to show you how to directly address these opportunities here. They solve all the opportunities and they make your website load faster.

Alright, so the three major tools that we're going to be using in this tutorial are as follows. We're going to be using a plugin called Asset Cleanup Pro. And this is a performance WordPress plugin. And it works together with a caching plugin. And what it does is, it helps you make your website load faster by disabling specific CSS and JavaScript, scripts that make up the page.

And you can disable these individual scripts that aren't used in the page, which means you'll be loading less data and the less data you load, the faster your page will load. And when it comes to performance, the two main things you want to focus on are loading less data and then loading data in a way that is faster to load than other methods.

So by loading less data and then loading data in a faster method, you will increase the performance time of your page. So there are a lot of features here and I'm going to show you it in the back end. There is a free version and there's a pro version. The reason we like the pro version is because it allows us to address individual plugins. It allows us to load individual scripts asynchronously, or defer them, and then we can move the scripts around and I'm going to explain why we want to do this in another section where I go directly into how to use this plugin. So we're using the pro version of this plugin linked in the description. You can also use the free version but you won't be able to do some things that we mentioned in this tutorial.

The main plugin that we use to increase the performance of Elementor websites is a plugin called WP rocket. And WP rocket allows you to speed up your website. It's a caching plugin, but it's also a complete performance plugin. WP rocket allows you to cache your page.

So basically what cache does, it generates static files of your website. And then visitors load static files rather than loading live files. And by doing this, it will load faster because it doesn't need to connect to a server. You can also preload the cache, you can compress your individual files. And then you can focus on images. And I'm going to go over all of these features. But all of these features will make our website load faster.

This plugin costs $49 per year. And if you're going to spend money on one of the plugins that we talked about here, it needs to be this one. This is what makes your website load faster. This will make your website load faster too. But this is the backbone of our performance optimization that we do in our agency. Then this is just another thing that we use to really make the pages load faster. Then another plugin that we'll be using in this tutorial is called, PerfMatters.

PerfMatters is a very simple, very lightweight plugin, I think it's 50KB of code. And it allows us to toggle on and off specific elements of our website, kind of like asset cleanup. And it gives us a couple specific tools that I'm going to go over. And these specific tools we will be using to make the whole website load faster.

So this plugin is a whole website, script manager pretty much. This is a complete optimization tool for everything in the website. And then this tool is going to let us go into these specific pages and optimize them further to load faster. So we're going to use this on the home page to make the home page load as fast as possible.

Alright, so these are the three plugins that we recommend using and this is what our tutorial is going to be using. So now I'm going to run you through how we install and use each individually plug in on the WordPress website. And that's going to be the rest of this tutorial. And then from that tutorial, you should be able to speed up your own Elementor website. So what we have now is the Elementor website built on Elementor introduced in the beginning of this video, the current plugins are Elementor and Elementor. Pro, our PageSpeed and I'm going to reload this page speed is our performance score is around 64 to 68.

Our speed index is around 2.8 to 3.1. And the mobile score we'll have to take a look is 22 out of 100. And it takes 11 seconds to load on mobile. And again, it will show us all of our opportunities that we're going to be addressing in this video. And then also the desktop is 71 speed index is 2.2. We need to serve images in next gen formats. And as you can see, this is pretty good performance. Already, because we're on CloudWays. So you need to go check out cloud ways. Free Trial, no credit card 30% off with, “isotropic” it is a link in the description.

Alright, so first thing we're going to do is install all three of those plugins. And then once those plugins are installed, we're going to go configure each individual one. And then I almost forgot that we're actually going to be using a fourth plugin called EWWW image optimizer. And this tool is going to directly address this performance opportunity which is served images in next gen formats. And this tool is actually free.

And I wanted to introduce it really quickly because there's some thoughts around this tool. So this tool uses the resources on your server to take your images, resize them to smaller sizes, compress them, and then transform whatever format they are in, which is typically JPEG or PNG and take that format and make it web P. Web P is in next gen format and it loads a million times faster, “not actually.”

But it loads a lot faster than JPG or PNG or anything like that. This plugin has a little controversy around it because some hosting providers will block this plugin because it uses your resources on your server, so the RAM and the CPU from your server to change the images. And when you change the images, it is extremely resource intensive. If you're on CloudWays, you have the power to do this. You run your own server. It's fun, you can use this plugin very easily, very simply, it's a free plugin.

If you are not on CloudWays, you might not want to use this plugin, you might want to use something like image plugin. Other plugins will optimize images but they'll do that on their own server and they'll offload all the processing performance or everything like that. What they'll do the send the image to their platform, their platform will optimize that image and then it will send the image back to your website that is allowed on every host, but you need to pay for it because you're using somebody else's resources.

So this is the really only the free solution out there that works. Other solutions you'll need to pay for. If you're on CloudWays, this is the perfect tool for you. If you're on something else, this might be the perfect tool for you. It might not.

Alright, so here are all of our plugins. As you can see, WordPress Rocket, Perf Matters, EWWW, acit cleanup pro not activated because I only have a license for one website. But I can upload this on any other website I want.

Alright, so we're basically going to just get right into our optimization of the website. So the first tool that we're going to optimize is WP rocket and WP rocket is going to Increase the speed of our website. And as you can see, everything is installed. And it automatically pre loads the cache. So when you install this plugin, the cache is automatically optimized and activated.

There are a couple other things that we're going to take a look at. So we've set up a mobile cache. There's no other caching settings that we're going to do. And if you want to read more about caching and why you want it, there are a bunch of articles online linked in the description below. But the cache basically makes your website faster, in simplest terms.

Next thing we're going to do is file optimizations. So we're going to minify HTML, and this removes all the whitespace and comments to make the file size smaller. And again, file size smaller, less data loaded, faster loading website. We're going to minify CSS files, and it's a warning and the warning says my break the website, but we're going to take that risk if it breaks a website all we can do just unclick it and diagnose the issues and then exclude the CSS files that caused the website to break.

We're also going to optimize the CSS delivery, then we're going to remove jQuery migrate, we're going to minify JavaScript files, we're going to combine JavaScript files. So merging and minification is what this is called. And merging and minification will eliminate render blocking resources as best as we can. Merging and minification basically means that we take all of the CSS code, optimize it, remove all code that isn't used, and then minify it by combining it all into or merge it by combining it all into one file.

So we're only serving two individual files, one for CSS, and one for JavaScript. If we hop back here right now, we can see that we're loading a million different CSS files. So this tool will take all of these individual CSS files and push them together and you'll be able to see that when we redo our PageSpeed insight report, right now it's at 71.

Alright, so we've done all of this. And we're also going to just load JavaScript deferred. And that changes the way the code is actually loaded when the browser renders the page. If you want to read more about that, you can in the description below, but by deferring it or loading it asynchronously, we cause the website to load faster.

We're going to also lazy load the images and iframes and videos. And what this does is it loads your images as the browser scrolls to them. So if you don't lazy load, all of the images on the page are loaded when the page loads. And that loads unnecessary data because if your user doesn't scroll, you're loading an image off of the viewport that nobody's ever going to see for no reason. So this will load it as the user scrolls into the image. Disabling emojis reduces the number of HTTP requests, so if you don't use emojis In your website, and you probably shouldn't, then this will reduce the need for WordPress to call for the imagery file.

We're going to disable WordPress embeds. And then we're also going to set up word WP caching. And we're going to set up WP caching, because we're going to use the EWWW image optimizer in the next step to optimize our images. So we've done all of this. We've optimized our files, we've done media, we've set up our cache. Now we're going to preload things. So we're going to activate pre loading, which is already there. And then we're going to preload bonds.

And if your PageSpeed report tells you to preload fonts, then you can do that. I don't believe that anywhere in this. It will tell us, Yes, it will. Alright, so here's one font, and here's another font. So basically, what I'm going to do, I'm going to copy the link location, and then I'm going to go into preload because PageSpeed Insights tells us that we want to preload our fonts. And then I'm going to take those fonts and preload them using WP rocket. So basically, we just paste the fonts into here. And then save changes. So that increases the performance by having the fonts load a bit faster. So as you can see, these are the paths of where the fonts are stored in WordPress. And we got those paths from going to preload key requests and then going the fonts and we saw the fonts, we put them in here. Alright, so we're going to save those changes again. And we have pre-loaded all of our fonts. We can try out advanced rules, but typically there aren't any things that you want to add into here.

Additionally, with the database, we can clean up our database and cleaning up the database makes it load a little bit faster and makes it a little bit smaller. But we don't really need to do that. If we have a CDN we can enable it. And CloudFlare are CloudWays. CloudWays offers a CDN and CloudFlare offers a CDN. On all of our websites that are hosted on cloud ways, we will use their CDN and their CDN is a stack path CDN. And basically what a CDN does if you're not familiar, and we have a link in the description describing CDNs ends, if you're not familiar with CDNs, basically what it does is it makes the files load faster by serving them from a data center that is closer to your specific geography. So if I'm in New York, it will load it from a server in New York.

Alright, so after integrating your CDN and this is an optional step, you're pretty much done with WP rocket. So we're going to run this through PageSpeed and see if we made a difference. And we should have because of simple math, we made our files smaller by optimizing them. We're now loading them closer to wherever the website is being called from. We've removed unneeded loading of media.

So if there's an image that isn't going to be viewed, it's not going to be load, then we've set up a cache. So this is only with the WP rocket optimization. So we went from 22 to 47 on mobile, we cut our 11 second loading time down to 4.7 seconds, first contentful paint to 1.7 seconds. Now we're on the desktop report. And we went from around 66, I believe to 85. By just optimizing with those individual things. We dropped our speed index to 1.4 seconds. And that is the combination of WP rocket as well as CloudWays. And we really just solved every issue that it told us to do other than the images.

So that's what WP rocket will do for you. As you can see in real time. I clicked a bunch of buttons, click the Save button, and then ran this report again and instantly saw our speed index jumped to 1.4 seconds. Alright, so we're done with WP rocket. WP rocket, by the way, will do this automatically for every new file that you add to the website. So we're adding new pages to our food truck website, it will go ahead and it will take those pages and it will add them to the cache and it will merge and minify all the files automatically. So as you can see, with WP rocket, it's the same website. It's just a faster loading, same website as before, just the faster loading.

Alright, so next up, we're going to optimize our images. And this is a very fun, simple, easy thing to do. What we're going to do is add a couple things. So basically what this is going to do, it's going to take your JPEG files, it's going to take your PNG files, it's going to resize them too. In adequate size, so if your image is like 4000 pixels wide, it will resize it to 1000 pixels wide or something like that, that works well with the website. And by resizing it less data is loaded. And because less data is loaded, the website loads faster. It will also compress the files so it will compress the data in them and make it faster to load.

The final thing we're going to do is convert JPG to PNG. And we're going to do that by checking off JPG to PNG. And then we're also going to check off JS to PNG rewriting. And then we're also going to force web P. And web p again is a file type that is an image file type and it will load your images a lot faster than JPEG or PNG. And it works on the Chrome browser, the Firefox browser and the support for web P images in Safari is currently in beta web P image support, if the image is not supported, so currently in the general version of Safari, it's not supported. It will just fall back this will automatically fall back to JPG or PNG files.

So as you can see here, we're bulk optimizing all of the images in our media library. So I'll show you that here. We have a bunch of images in the media library. They're big images, high resolution images of food, and what this is doing. It's running through and it's chugging along, you can see it's at 36. We have six minutes remaining for optimization. It's running through, it's taking each image and then it's automatically optimizing them. So you can see here, it's reducing the file size by 49%. And you can see like 50% 40%, so you're saving half of your file size. You're reducing it which means the image that's loading is half as large as the original one. Simple math shows that a smaller image is going to load faster. And because that image loads faster, your entire website is going to load faster, then it converts the reduced image to web P. And web p reduces the file size even more. And it depends on the type of logo, but you can save it by up to in this example, that's 50.7% 58%.

Here, I mean, web P will really reduce the file size and then it will also just load faster in the browser. So once this is done running, it will automatically be serving the images in web P and I'll show you how to check for that. In the meantime, I'm going to go check out the perf matters plugin and optimize even further with perf matters. So there's some overlap between perf matters and WP rocket. So you don't really need perf matters, but this is a really neat little plugin that will help you optimize your website in a couple ways. So what we're going to do is, this is a business website. So we're going to remove specific elements of our website. And we're going to disable couple elements.

The emojis are already disabled, but we'll do it again here. We don't need our REST API. We don't have Google Maps, we do have Google fonts. Lazy loading is already optimized through VP rocket and WoCommerce isn't installed on this website. But I'm going to turn these on either way because it doesn't hurt. So it's a very simple plugin that allows you to turn things on and off. We can install Google Analytics here and this is important because Google Analytics is traditionally a third party JavaScript script, and loading JavaScript from the third party can slow down your website.

So if you run a PageSpeed report, and it says, “stop JavaScript from loading” in the third party, then you can easily do that by using this tool, I can get back to it using this tool, entering the tracking ID and then enabling local analytics, which means the script will be stored from on your website, the analytics JavaScript script will be stored on your website. And the only thing that we'll be doing is pushing information from your site to Google Analytics, traditionally, it pulls the script from Google Analytics, runs it on the website and then pushes data back. So that's just site load a little bit faster.

And then finally, we can hop over to extras and I don't think there's anything we're going to do here. But as you can see, you got a couple additional features in parameters.

Alright, so let's Go check back at our bulk optimization. And we are under bulk optimization and actually looks like I stopped it. So we're going to start it up again. And it'll run and it will do its thing and it will optimize the images.

Alright, so while this is optimizing, I'm not going to close the tab like I did last time. Instead, I'm going to go and show you asset cleanup Pro. And asset cleanup Pro is mainly used in our agency for specific optimization of specific pages. I'm going to show you it here. This is a pretty simple website. So we might not use this to the extent that we use it in other websites. But you get a ton of settings here. So if we have a lot of plugins, we can run to plug in manager and disable the plug in on the website. So an example I like using with this is if you use Gravity Forms on the contact page, you needed on the contact page.

If you're using Gravity Forms, it's loading its CSS and JavaScript scripts on the entire website, even if you only use it on a specific page. So let's assume that this is Gravity Forms, we don't have Gravity Forms installed. But if we had Gravity Forms installed, we could unload it site wide everywhere, make an exception, and then load it on our contact page only. So what this rule does, is only loads this individual plugin on the contact page. And then you can also specify regex.

So if you want to load a plug in on all of your posts, you can use regex expressions to do that. So this is a very easy and simple and powerful tool where you can take plugins that you don't use on every single page and you can only load them on the pages that are loaded up. So if you're using a WooCommerce WooCommerce will load on the homepage. And WooCommerce is a massive, massive collection of scripts. And if you're not using WooCommerce, and you're loading their scripts, you're decimating the speed of your homepage because you're loading a bunch of scripts that aren't used that are very heavy scripts.

So by using this tool, you can deactivate WooCommerce everywhere except for where it's used, which means that you won't be loading the scripts with WooCommerce anywhere but where they need to be loaded. And then you can also run through to the traditional settings and then it will show you that the minification and everything else is already taken care of by WP rocket. And asset cleanup pro says it here and we've used it a lot before together. It works well with WP rocket.

Alright, so the main things that we're going to be using this general settings page for is working Going to swap the font display, which will cause our fonts to load a little bit faster. We're going to run into Google fonts. And we're going to apply swap here too. And then if you remember, we've already pre-loaded the fonts in WP rocket, but if you want to preload fonts, in asset cleanup, you can do that here. But you should only preload the fonts in one plugin, you shouldn't do them in multiple plugins.

Alright, so these are the main settings that we're going to use in this website. In other websites, this is a really powerful plugin. So we might be able to use the tools more if we have a bunch of plugins and stuff like that. But in this website, if you remember, we only have two front end plugins, which are the Elementor plugins. So there's really no use here. The main thing that we use this tool for is individual page optimization. So I'm going to show you that right now. If we go on to the Edit page. And we're not editing with Elementor when the Gutenberg editor and we scroll down, this is where the plug in works is magic, right.

You can manage the CSS and JavaScript of the individual plugins. So what you can do here is you can turn off specific Google fonts, you can turn off specific CSS files, you can turn off specific JavaScript files. So if you're not loading specific files from your website, and they're loading on the page, even if you're not using them to create the actual page, you can turn it off. So in this example, I don't believe there's anything that we can actually turn off. Let me check the front end.

We might be able to turn off the icons. So, I'm going to turn off the icons just to show you what you can do here. But you can turn off individual things. So we're going to turn off our Elementor icons, we're going to turn off the font, awesome icons. And keep them like that.

Additional functionality if you need to load something, but you don't want it to load initially, you can go ahead and defer the loading of the script or loaded asynchronously. So as you can see, with JavaScript, if you want to load something asynchronously, you can do it specifically on the say, stuff like that. Typically, we'll use this to remove plugins, scripts and files that we don't use on this specific page. And by removing these from the loading of the page, the page will just load faster because you're not loading unnecessary things.

So I'm just going to show you and we'll have to re enable this because these are actually used in the Page. But as you can see, all of these bond icons are working now, on the back end, we turned off all the fun icons. So if we reload the page, you will notice that these icons are not showing anymore. And that's because it's not loading the file behind the icons. So if you want to make your website load faster, you can remove all the traditional Elementor and all the traditional Font Awesome icons from all of your pages. And then you can use this tool and go ahead and disable whatever plugins and whatever files I'm at, you need to disable. So we're going re enable that because the page actually loads with those plugins. But this was just to show you, you can identify the specific scripts that you don't use on the page.

So say we didn't have the icons that live here. We can take those icons and we can simply disable them with this tool. So that's what we really use this tool for. We’ll Go through every individual page on a website and disable the scripts that aren't used on that site. And then if the scripts are used on that site, we can either move them, we can defer them, we can load them asynchronously.

As you can see, we can do a lot here. So this is a very powerful page specific optimization plugin here. So I'm going to upload it, I'm updated, and by updating it, we're going to turn those script files back on and those CSS files back on. And you'll be able to see that our icons show again.

Alright, so we're going to run back to the image optimization. So we've finished our image optimization, and I want to go back and just discuss what we actually have saved here. So as you can see, this is the general optimization. This is the resizing and compression of the PNG and JPEG files. We're not changing the actual file make up with just changing the size of them, we reduced this file by 55%, with web P, we reduced it by another 21%. And this happens throughout the website with multiple different types of images, and sizes of images and anything like that. And you can see that at the end of the day, we're reducing probably by average, we're reducing by maybe 20% to 30%. And these are not massive file sizes.

So 241 kilobytes, but at the end of the day, if we're reducing all of these kilobytes, they add up to megabytes, and then these megabytes add up. In the long run, if you scale the site, they can add up to gigabytes, so you're saving not only bandwidth on your end, but you're also saving a lot of data that is pointlessly loaded when loading the website, which makes things run faster. So now let's go take a look on the front end of the website and see if our files are now loading in web P because they've been optimized and they've been converted to load in web P format.

So we're going to go to find an image. Here's an image right here. And what we're going to do, we're going to inspect the element, and I'm on Firefox developer. But you can also do this through Chrome. You can do this through Edge any browser that you use. I really like Firefox developer, because it gives you a lot of additional tools. But here we are inspecting an image. And we know this is the image because the image class and we can run over the image URL, and it will show us the image here. To identify that we're serving it in web P format.

See the doc web p right here. That's how we know that we're serving it as a web p image. If this is loading on Safari, the dot web p will be dropped and it will load only as a JPEG. So this is a really cool feature that the plugin does automatically and it will automatic just load your image as a web P, and I'm going to show you the actual image loading, we'll see if it works, who knows. But as you can see, this is loading as a web P. And you can see that that loading time is almost instantaneous because it's web P, and then we can fall back to JPEG.

So it will load you a JPEG file instead of the web P. If the web P doesn't work, so as you can see, this is a JPEG file, loading as a JPEG. And then you just add the dot web p because the EWW optimization plugin converted it to a JP, they're copies of both of them. You can see loading as a web page.

Alright, very simple tool for image optimization. As you can see, we ran it in the background while optimizing everything else. Alright, so that's basically the optimization that we ran on the website.

So let me run back really quickly through everything that we did on the website, then I'm going to run the PageSpeed for the final time, and then I'm going to give you the actual numbers of what we did when optimizing the website, right.

Alright, so first off, we'll run through all the plugins that we installed, we installed four major image and performance optimization plugins. So we installed asset cleanup Pro, and this is a page specific optimization plugin that we use. This is a great plugin. We have a lot of tutorials linked in the description below. If you need to remove unused CSS unused JavaScript, this is the plugin for you.

If you're not loading a script, well if you're not using a script on a page, but you're still loading it, it's pointless, so you should disable it. This plugin allows you to easily do that.

Next up is a EWW image optimizer. This is a free plugin and it allows you to reduce the file sizes of the existing images and then you can also convert it and then serve it in web p format, easily. Keep in mind that if you're on CloudWays, which is the provider that we use for all of our hosting projects, if you're on cloud ways, EWWW is the perfect tool for you. Because your server can handle it. If you're on shared hosting, or another host that blocks it, it might be a good idea to go find another image optimization plugin, but we recommend you be on CloudWays. And then we recommend you use this plugin.

It works really well. And I mean, I did everything here in real time. So you could see that it was really a couple clicks, and you are good to go. Then we got perf matters. Perf matters allows us to fine tune scripts that we don't want to load and it also has a couple additional settings. And of all the plugins I would say this is the least necessary, but this is really a good performance optimization plugin. We really like it. I'll link you a review video going into it, how we use this specifically in all of our websites. I kind of covered this really quickly.

Then the final plug in is WP rocket and this is the essential plugin behind the WordPress website. As you can see, this is the WP rocket run. We haven't done the final run yet, but it went from 68 to 85. And it dropped from 3.5 or something to 1.4. So that's crazy, just with WP rocket. And you can see WP rocket is super easy to use. It's just a bunch of clicks. Like you just need to click things.

Alright, so in order of most needed to lease needed, I'd say WP rocket, EWW asset cleanup pro perf matters. Install all of these plugins and your elemental website will load faster, simple as that.

So what we did with each of these plugins WP rocket I'm going to run through everything again. So you can either make a checklist or just be reminded as to what we did.

We optimized the cache and the caches automatically installed when you install this plugin, we optimized all of our files by merging in minifying, HTML, CSS, JavaScript, we set up lazy loading of our media images, we pre-loaded everything.

And then we also tried to integrate a CDN that didn't work. And I believe the website's going to load fast enough without the CDN. But if you need the CDN I showed you here, CloudWay CDN, set it up, and then go ahead and install it using WP rocket or perf matters, they're both have the same features.

Again, there are a couple feature overlaps between these plugins. So only use one of these plugins to do a specific feature. Don't try to preload parts with both plugins. It will probably break.

We pre-loaded the basic Elementor fonts here with WP rocket and we did that by adding the URLs specified in the PageSpeed report. So it said, “hey, you might want to go ahead and preload your images?” So we found them. I mean, preload your font. So we found the fonts that it wanted us to preload. we copied and pasted it into here, very simple, very easy.

Alright, that's basically what we did with WP rocket, then we went ahead to EWW, and we set up. First off, we set up the, and we didn't really do much here, right. We didn't change anything here, you can change a lot of things. And this is a very powerful plugin, but we basically skipped everything here, went to web P, and checked off these two boxes.

JPEG, PNG to web P, JavaScript web p rewriting. And this will work if you're using just the basic Elementor website. And then we also forced web P. Then we went to media, bulk optimize. We scan for the un-optimized images. And then we went ahead and ran the optimization and we already ran optimization so we're not going to run it again.

We also took a look at perf matters. So perf matters is that plugin that allows you to turn on and off individual things. And we turned off a bunch of things that we knew we didn't use in the website. You can also incorporate your CDN here, if you really want to, you can locally incorporate Google Analytics, stuff like that.

And this will shave off a couple hundred milliseconds of loading time on your website if you do it, right. So this is a valuable plugin. But as the plugins go, this is probably on the bottom of the list.

Finally, we ran into asset cleanup Pro, we went through the settings on the back end, if you have plugins that you don't need everywhere, but you only need specifically, you can do that here. Then under the settings you can run through and see if you can optimize anything further here. In our case, all we needed to do is change the font display of specific fonts. And then, I mean, there are a bunch of additional things that you could do here but we didn't need to do anything else in the basic settings of asset cleanup.

Then what we did We went page by page and we only did one page. But we could run through each page into each page, we went to edit the page on the back end WordPress, not that elemental editor, back end WordPress editor, we ran through all the scripts that we didn't need, and we turn them off. Simple, it's off, it's on. We didn't actually leave any of those settings on this page, because we're using everything here.

But if you're not using something, and this is especially true if you're using a bunch of different plugins, so say you're using an element or add on plugin, and you're not using any add ons in this specific page, you can turn off that the scripts behind the plugin for that specific page, which means the page will load faster because you're loading less data. So we did all that. And now here we are.

So everything is completely optimized on our Elementor, our website, and I'm going to show you the elemental website first. Then we'll run our page speed. So here's our website, and then also just wanted to mention, again, we're hosting this thing on cloud waves in CloudWays. We're spending $10 a month, we're getting 1GB of RAM, specifically for this installation. We're doing very well here with our hosting and stuff like that very simple and easy to install.

So if you need to check out cloud ways free trial, you can actually take your website, back it up with WP migrate, import the website onto a test domain, like we did here, this is on a test domain, you can import the website, optimize it on the test domain. And then if you really like it, move your domain from the old host to the new host. And because it's an exact copy of the website, everything will be effectively migrated. So you can try our CloudWays here.

You can go to their website cloudways.com there's a link in the description below. If you use that link and you use our code, “isotropic” you'll save 30% off the first month of hosting that, that actually can add up $10 plan this one buck. But if you're on a bigger plan if you're using a lot of websites that can really add up, and you can help us by supporting CloudWays who we have partnered with.

Alright, so we're on cloud ways everything's good to go. we've optimized our entire website. And I'm going to finally run through the PageSpeed report again, and hopefully, we will have improved from our 22 out of 100 performance score on mobile, originally, and 64 out of 100 on desktop, I believe.

Alright, so I'm going to run the Google PageSpeed Insights report for the final time and then I'm going to go and discuss everything that happened. So 85 our speed index is 1.4. And we're serving our images in next gen formats. There are a couple things to note here.

We tested our images. So we know that this thing is serving as a web P the issue here sometimes it depends, is that if Elementor is using a background image, it inserts it via CSS, and CSS inserted images cannot be transformed into web P by any solution out there right now. And that's a big issue.

And we wrote about it in our blog. But you can't change the background images to web P, which are the fastest loading type of image. So as you can see, we really sped up our website here, our websites crazy fast now it loads in 1.4 seconds first contentful paint is 0.5 seconds, time to interactive is 1.2 seconds. However, our only opportunity that we weren't able to completely address was transforming everything into web P.

And the reason we couldn't transform it into epi is because these are background images inserted by Elementor, via CSS, and they have not set up web P support. And we wrote about that in our blog, and I'll link you to the GitHub issue if you want to read more about it.

But everything else included, we've fixed all of our opportunities, we went ahead and made our performance score 85, which is this has been done in 30 minutes, and we increased the speed index to 1.4 seconds. And if you think back to the beginning of the video, we want it to be under two seconds. That's the optimization that we typically run on all of our WordPress websites, agency websites, client websites, and this is also something similar to what we'll do in the speed up service. So, to conclude this tutorial.

Alright, so this tutorial should have shown you the tools that we use to clean up our website and make it faster. We use WP rocket we use asset cleanup we use EWWW and we use perf matters. All of these are linked in the description below.

We're hosting on CloudWays. In the beginning I showed you why you want to be using a reputable host a good host. So CloudWays versus Bluehost off the bat, on a basic website, there was a massive time difference. On a bigger website, the time difference would be even more visible. And all of this optimization happened live on the video. In this video, from what I can see, it's going to probably be around an hour.

So we ran this in around an hour, we clicked a bunch of checkmarks we clicked a bunch of save buttons. We turned off and on some scripts, and that's really all we did. Hopefully, this video showed you that improving the speed of a WordPress website, or an Elementor website built with WordPress. doesn't need to be complicated, isn't insanely hard, and it's just a matter of using the right tools and clicking the right buttons. And if you can do that, you can transform your website from a slow website to a fast website in a very short amount of time.

And as you can see, this isn't a perfect a hundred score. And the mobile has something to be desired because our webpage didn't apply to the mobile. And what we would do is go ahead and identify what's causing these issues and optimize it even further. So in the one hour, we were able to increase the speed of the website, almost by 100%. Additionally, if we had more time, if we had more hours to go into the website and figure out how to make it load faster, we do that and we would probably get a high 90 score.

So it's not very hard to improve the performance of a website. These tools can be used on any WordPress website, but we wanted to do this specifically for Elementor because we saw that there were a lot of questions regarding how you can make an element or website faster. So hopefully this tutorial really showed you exactly how to do that.

If you liked the tutorial if you like our content, subscribe to the channel. Drop a like on the tutorial that will help more people see it and it will help this tutorial help more people.

If you have any questions, comments or concerns, leave them in the description below, or the comments below. And then in the description below, you're going to find a million billion links to all different types of things. Clicking on the links to the plugins that we use is helpful to us because some of them are affiliate links.

Again, we use all these plugins in our day to day websites in our client websites, so you know you're getting the real deal. Hopefully this was helpful, and I'll see you again, real soon in another video.