YTread Logo
YTread Logo

How to Speed up WordPress with WP Rocket, Imagify and Cloudflare 2020

Mar 25, 2024
Hello guys, welcome to jtep wp. In this tutorial, I'll show you how to

speed

up a WordPress website using wp Rocket Imageify and a free CDN from Cloudflare. We're going to take a slow website with a rating of F and I'm going to bring it up to a rating using gtmetrix. I would appreciate it if you would use my affiliate links below for wp

rocket

as it helps the channel and keeps us creating new content. Let's start with this tutorial, we will use jtec. The wp website makes it much faster using a plugin called wp

rocket

and it really does what it says, it makes WordPress load quickly with just a few clicks.
how to speed up wordpress with wp rocket imagify and cloudflare 2020
You don't need any prior technical knowledge, as long as you can click a few boxes. We are going to

speed

up your site and for speed testing we are going to use two sites. We need gt metrics and pingdom as they are very good at running speed tests on websites and give you feedback on how sites are slow, where your site is fast, how to improve. and to finish we will use a site called

cloudflare

which offers a free cdn which is a content delivery network that also helps speed up your site even more and it is free. wp rocket currently has three options, we have a single site which is great if you only have one website, it has the plus option which is great if you have three websites and if you are a developer or a web design company you probably You want to go for infinite as this gives you unlimited websites you choose which one is the most suitable for you and you can go through the purchasing process and eventually it will give you a file so once you download it you will get wp-rocket.zip, so I'm going to leave it in my downloads folder for now the first thing I'm going to do is go into gt metrics.
how to speed up wordpress with wp rocket imagify and cloudflare 2020

More Interesting Facts About,

how to speed up wordpress with wp rocket imagify and cloudflare 2020...

I want to see how fast my site is right now, so I'm going to run a quick test. The test takes a couple of minutes, so be careful. patient, okay, so our test is over, so this site does not have any optimization, so this is our starting point, so the page speed score is quite bad, why is it slow 53 page speed full load 14 seconds actually loads much faster than our page size 6.74 the megabytes ask for 133 so these are the important figures to keep in mind on the right and the details of the page and we'll see down here let's page speed, we have no compression, we browse scaled images, which means we are sending large images.
how to speed up wordpress with wp rocket imagify and cloudflare 2020
It says we're not deferring to javascript, we're not taking advantage of browser caching, and we could optimize our images much better. Why are they slow? We can see that similarly, green is good, red is bad, so let's try it. improve all this using wp rockets the waterfall shows you what is loading and how long it takes. I am going to run a similar test using tools.pingdom.com paste on my website, you can select the appropriate location for you. I'm in the UK so I select Europe, UK, London and press Start Test again, the test takes a few moments to run so our results are available.
how to speed up wordpress with wp rocket imagify and cloudflare 2020
It gives us a performance rating of page size d 5.7 megabytes, time under 1.23 seconds, which is realistic, that's what I see on the screen that if I go to gt metrics, it tells us the full load time 14 seconds, so you see why I say take it with a pinch of salt, so we have our first benchmark, so I'm going to do the next step. is to install the plugin, so plug it in, add a new upload plugin, choose a file, go to our downloads folder, wp rocket.zip, open install now, once the plugins are installed activate the plugin by simply activating it , I would expect to see a small improvement in gt metrics.
I'm going to run the test again. I opened a new tab so I could run the test and compare the two results. Paste in my URL. Proof. The site that our page already shows us fastest in GT metrics. Looking at the first test. we did 14 seconds, 6.74 megabytes, 133 requests and on the second one, we were left with 91 requests and it's getting a little better and that's without doing much to get to the wp rocket settings where you want to go to plugins, search for wp rocket and go to settings wp rocket has its own cdn called rocket cdn which I have not used.
I'm going to get rid of that message. Would you allow wp rocket to collect sensitive data? Yes, no problem, we can do it. It tells us that it is our website. server, so while we are running WordPress version number of Apache 7.4, the current theme is the current site language on the left side of the panel, this is where we will be able to change the settings, some of them we are not going to touch. at all and I'm going to go into them one by one in the cache tab, we're not going to change anything here.
The default settings are perfect for what we need to do next. I'm going to move on to file optimization. a simple process of activating something, refreshing the page, does it make any difference or does it break the site? I'm going to turn on minify CSS files, it gives me a little warning, it might break things, it just says if you break it, turn it off. I'll enable it now, our site will use http 2 so I don't want to enable this one. Optimizes CSS delivery. We'll check it, and if you're a developer, you'll probably want to use this box.
You're a normal person like me, you won't need to touch this. All I'm going to do now is hit save. Now I'm going to run another GT metrics test to see if it has improved. Our site. Here is our original rating. after enabling it and again yes there is a little difference in page size what im going to do now is go ahead and enable some more options remove jquery migrate minify javascript files again if it causes any errors just we will come. Go back and turn it off, this one again we're using http 2, you don't need to turn it on to save changes and it's at the top, it starts creating some CSS files.
I'm also going to enable JavaScript lazy loading like it says. It can help improve loading time. Moving on, we'll go to the media tab. Lazy loading. Enable enable for iframes and videos. We can configure YouTube to replace the iframe with the preview image, which saves you from downloading a large number of video files. I'm not. using anything that uses

wordpress

embed to be able to disable that webp i will come back to that later because there is a plugin we can add that will optimize our images for the webp format save changes our performance scores continue to improve page load time is a size The faster page size is smaller and we get fewer requests, so we are on the right line in the preload tab, we don't need to change much here, I'm just going to enable link preloading, I don't need to fill anything in the Save boxes. changes and when you do this, always check your site's interface from time to time and make sure it hasn't crashed or disappeared.
I'm very happy that everything is going pretty well, so far, advanced rules again, this is more if you are a software developer or

wordpress

developer, I just don't need to touch them at all. Database, we can tell you to clean revisions, clean drafts, clean junk, reduce spam comments, junk comments, delete expired transients, you can delete all transients when you run this, probably more will appear here . We can optimize the table, save the changes and optimize here. It says 41 revisions, an automatic draft, 21 transits, and 10 optimized tables, making the database a little more efficient to connect to.

cloudflare

to wp rocket we go down to plugins scroll down to cloudflare mod options and then we start filling in the details so if you go to cloudfare.com you can sign up for a free account so you can sign up here create account i I already have one, so I'll go to your login screen.
I have several sites hosted on Cloudflare and I'm really impressed with the service for adding your site. Hover over the Add a Site button, click it, and then enter. the name of your website I enter the name of the site, you don't need to put https in it, I press add site, give it a moment, we are going to go with the free plan, confirm the plan once it has finished its initial scan, just press Continue , what we need to do now is log in to our domain name and change the nameservers. Here are my existing nameservers and this is what we need to change the nameserver one to and this is what we need to change the nameserver to now. m in my name server settings, now I can copy what it says from Cloudflare, so here is my first name server1, copy that and paste it here, then we want the name server to copy and paste it to the second one nameserver and press refresh, this may take some time. change to complete as you can see it says: please allow 12 to 48 hours for these changes to go into effect with my domain company, they are pretty quick and then we go back to Cloudflare, click Done, check the nameservers, get started, We configure the encryption to the maximum. press save to improve security we want to activate this because we always want to use https I press save and we want to check javascript css html press save broccoli activate it because it is a system created by cloudflare that helps speed things up press save and then once you are done, Hit finish and that's the part of Cloudflare setup to find your global API key.
Go to my profile and then we are looking for API tokens. Scroll down to see the global API key. Press view. Enter your Cloudflare password. Check i. I'm human, paste your global API key and your email address to find your zone ID. Go to the account home page. Click on your domain name. Scroll down to the zone ID. Highlight this, copy and paste it. Enable optimal settings. This automatically upgrades your Cloudfare settings and then. Save changes after enabling Cloudflare. I performed another test. Our grades improved again. Loading times dropped by six seconds. Page size dropped to 2.8 megabytes and 82 requests in pingdom.
We now have a C rating. Our load time is 1.04 seconds. 96 page size requests. 3.4 megs, I'll scroll down, let's take a look at the xhr content type, which is our YouTube video that's uploaded and it's about 1.1 megs. If we swap the YouTube video for an image, we would save about a megabyte, which is our CDN setup, full heartbeat. I'm using Elementor so I don't want to adjust this at all because this could prevent Elementor from working. The plugins we have added in our cdn here and we will continue with image optimization and I highly recommend using imageify, it is fantastic.
You can install it from here and what it is is a free plugin that will optimize your images and also convert them to webp. You can get a free account, you can register for free and once you have registered they will give you an API key. I'm going to log into my account and grab my API key now. To find it, you can go up to the API integration at the top right and copy the key. Once copied, you can go back to wp rocket i. make my api key paste that in the connect me box and if your api key is valid you can press ok now go to settings this will take us to create images and what we want is to automatically optimize the image and upload it like this when you charge it. your images will be reduced in size backup of the original images keep that optimization checked create webp versions of the images yes, we want the images in webp format to be displayed on the site yes, if you use a CDN, specify the URL if you have the free account.
I think it gives you 25 megabytes. If you have a paid account like me, you can have multiple plans. I have only one concert. Press image them all, start the optimization, and then sit back and wait when the image is finished. It will show you the original size of the image, which is 15.9 megabytes, and the optimized size, which is four megabytes, which saves 75 percent and also converts our images to webp, so if you use a browser like Google or Safari, it will use the smaller one the faster. webp images after doing image optimization I reloaded gt metrics.
I ran a test of our page size up to 3.93 and 83 requests, but it tells us we can still make more improvements. It says we can make our logo a little smaller, so we adjust the size. of the logo from this size here to this size we could probably get it in green also browser caching. I'm looking at this and a lot of this looks like the Google video on YouTube so if I pulled the video from this site it would probably solve that for us and again you see that our YouTube video on the home page is causing it to be a low score .
I'm going to take it out just so you cansee what it's like without that there so go to page edit with Elementor I'm just going to pull the video so here's our problem: the background video I set as an image refresh, I ran the test again after Having Google video removed from the website significantly improved our scores, so we have a a rating there for page speed a b for and slow our load time is now 5.2 seconds page size 1, 2 megs and 46 requests, so it was our Google video that caused it to be quite slow looking at this here scale images, yeah, that's it if we changed our logo, we could probably get it up to a degree of pingdom.
It's also improved with a load time and 967 milliseconds, so we're down to a 57 second requests, which is about the right checkout size, around 1.4 megabytes, performance grade C, so we're still We consider that could we get more out of it? And this is where we see that removing the video from YouTube has generated a great saving in size. Before we had about 1.4 megabytes, so that's down to 707 kilobytes and I'm going to fix this image here that says. it's a little big utmetrix and ping told me that this image here, this WordPress logo was the one that's causing a problem, could be optimized.
What I did was go to a site and download an SVG version, which is a much smaller file, all we have to do now is add it, we find an icon, we move the icon up and then we'll hit load svg enable, then we'll drag our svg file, we will press insert media. We're going to delete the old one and now all we're going to do is increase its size, so I'm going to the style size that I added in our WordPress.svg logo we're going to hit refresh and then I'm going to run the test again now and see what it does for let's our original from where we started, let's test it again and our test results are on that, so We're looking at the scores all the time.
There are 5.6 seconds, 1.4 megs, so you can see that our optimized images performed quite well. It says there's an icon there that we can adjust somewhere for a reduction of 36, but that's really nothing. the basics of how to optimize a site with wp rocket okay guys if you found this helpful don't forget to like and hit the subscribe button. I have a lot more content on wordpress web design tips and tricks and tips for content creators. I'll see you next time

If you have any copyright issue, please Contact