Speed Up Divi Website + LIVE Test Results With Every Change! 2022

Jan 1, 2022 | Divi

Speed up your Divi website without breaking it. For Desktop AND for Mobile! Your Divi website needs speed for conversion, SEO and your own personal frustration!

πŸ‘‡πŸ»πŸ‘‡πŸ»πŸ‘‡πŸ» Start here πŸ‘‡πŸ»πŸ‘‡πŸ»πŸ‘‡πŸ»

Do you want to support my channel? Leave a like or buy Divi with 20% discount via the link below. That will help me enormously to create these free videos for you and keep going!

β‡’ Software that I recommend:
Best Divi Caching plugin β‡’
https://wpressdoctor.com/caching/
Get Divi with 20% discount β‡’
https://wpressdoctor.com/getdivi/
Hosting used for this video β‡’
https://wpressdoctor.com/nr1webhosting/

I want you to succeed with your website, so lets get started.

⏱️Timestamps⏱️
0:00 Speed Up Divi Website – Intro
0:10 Test tools we are using:
0:19 Google PageSpeed Insights ➜ https://pagespeed.web.dev/
0:31
GTMetrix ➜
https://gtmetrix.com/
0:44 Pingdom Website Speed Test ➜ https://tools.pingdom.com/
3:07 Step 1: Get #1 speed plugin ➜ https://wpressdoctor.com/caching/
4:26 Upload plugin to WordPress
4:38 Setting up plugin with live Speed tests with every change
14:24 Step 2: Remove unused plugins
15:41 Step 3: Optimising Images
19:53 Optimising Mobile Score
21:57 Step 4: Routing Website Through CloudFlare
27:04 Step 5: Change hosting https://wpressdoctor.com/nr1webhosting/

Thank you for watching πŸ˜€

Speed Up Divi Website + LIVE Test Results With Every Change! 2022

πŸ“–TransscriptπŸ“–

 

N -obody likes a slow website, so i’m going to help you out in just five simple steps.

The first thing of course is to see how fast this website is without changing anything. For that we are using three different tools and we’re gonna check them multiple times during this tutorial. The first thing you do you go to Pagespeed Insights. if you don’t know where it is just follow the link in the description of this video, and you just fill in your website and press analyze. All right, while it is working on its performance test, we’re gonna fill it out on another tool. Which is called GTMetrix. Also – link is in the description. Just enter your url of your website again – divi-doctor.com – and press ‘Test your site’. While it is running we’re going to the third testing tool. Which is called Pingdom. Your website right there, and press ‘Start test’. All right the first test has been completed if we now scroll down, they say there’s no data found from actual real user experience. You might have some information right there, but this website doesn’t get any visitors because it is just a tutorial website. So let’s go down and as you can see… oh this is not very good. On mobile we have 26 performance ouch! Let’s watch the desktop version… it’s better. This is just Divi out of the box. It has a 75 performance which is actually okay. I want to be in this green zone. So this is our baseline. These are results of our GTMetrix score. It actually scores okay. And last but not least of course the Pingdom test. These are the results of our Pingdom test. A 71 a pretty big page size and the load time is actually pretty high: 4 seconds to load! This cannot be right. Alright so log into your WordPress dashboard and let’s start optimizing. The first thing we’re going to do is we’re going to install a caching plugin. As you can see at my plugins I only have two plugins on my website. It is the iThemes Security – there’s a tutorial I created about ‘How to secure your website’ which you should really watch, because securing is really important for your website. And of course I have the Monarch plugin with a few adaptions of my own, you now also see the WhatsApp and Telegram also added to your Monarch. It’s just a simple code you add to your website and then these icons appear and they work flawlessly. So it’s another tutorial so watch this tutorial right there if you’re interested. Let’s get back to our optimizing. You might have a lot of them maybe 30 plugins I don’t know, we’re working with those two. There is no caching plugin enabled whatsoever on this website, apart from Divi’s own optimizing. If you go to ‘Divi’ you go to the options, there is a tab called performance. If you click on this one, your Divi installation should look like this. With everything on if it breaks your website please disable the one you don’t like and see if that solves your problem if not let’s go to the next step and install world’s best caching plugin. You go to WPressDoctor.com/caching and you press enter. And then you go to world’s best caching plugin there is: WPRocket. I”ve tested a lot of them and i’m really convinced that WPRocket is actually the best for Divi. So what we actually need to do is we need to go right there to buy WPRocket, because it actually is a premium plugin which works awesome. What you get for this price? You get one year of support and update for one website. You can also choose the plus version i personally have the infinite version because all my client websites and my 11 own personal websites, are working with WPRocket because I really like the system. So choose whatever license is best for you. If you have one website, this is the best, if you have three website this should do it. And if you have more than five website this is actually better for your wallet. Press ‘Buy WPRocket’.

So fill in all your details and pay with the credit card. Once you have paid you can log into your account using your details we just provided. And now you can see your license and you can go just down there and go to ‘Download WPRocket’. Press that button. Now go back to our website you go to ‘Plugins’ -> ‘Add new plugin’. We press ‘Upload’ and then you select the file we’ve just downloaded from WPRocket and press ‘Install now’. Then we press this button ‘Activate plugin’ and that’s it! And it says WPRocket is good to go. Alright let’s tweak it a bit we go to settings and then you can see the first thing is congratulations your WPRocket
is now activated and already working for you. We’re going to check that out. Preload complete, we can close this message. If you want them to learn from you then press ‘Yes allow’ or press ‘no thanks’. Whatever you want. Right we can close this one. Well they say it’s already working for you, so we are going back to our three tests and run them again.

When we are changing any options you will see the changes directly in these three tools because yes, I have activated them every time again and again after each option. So you will see on the right side the results right now. Well indeed we have some improvements shown right there, so that’s good. All right we can close this message and press the button. Let me explain something real quick to you, on your dashboard you can see your license of course you can clear your cache and pre-load cache, we’ll be covering it later on. But you can also use this item right up in your menu to clear the cache. Sometimes you will need this because if you change your pages or posts you won’t see the difference right there in your browser you need to clear your cache. Also when adding new plugins, clearing your cache might help and solve a lot of problems. Alright here you can see some documentation and some videos which is very interesting and you have the frequently asked questions. But let’s start right now on the left side menu with caching. Basic cache options click that one you can speed up your site for mobile visitors this is important just leave it on you don’t have to work with a separate cache file because divi already does that user cache should be enabled if you have a lot of users logging into your website and the cache lifespan for 10 hours is great just leave it on right there all right let’s go to file optimization on the file optimization we’re first going to minify css if i push this button you will see immediately the results of the three tests on screen so you’ll see what’s happening when i change it could break things activate minify css sometimes the scores may go even down but just hang in there we’re going to activate everything and then we’ll see how it looks from there combine css files of course activated ooh that had an impact on scores really well activate optimize css delivery and this is better feature so if you activate this and you see that your divi website is all messed up please use load css asynchronously this works safer well let’s check it out what happens activate removed unused css and now we actually have to wait some time because they are removing the css and they’re analyzing the website to make it work it is completed this is the website now it’s loads actually pretty normal everything looks pretty good does my effects still work yes they do and the images everything works fine so the better feature is really good well how does it affect the scores oh wow so that had a really big impact on gt matrix and google page speed i like that i like that a lot now you can see how why i like wp rex rocket so much because it’s just amazing system all right let’s scroll down we have optimized css let’s start changing javascript let’s minify javascript files press activate well that really improved the score a bit more but it does seem that pingdom is just not working correctly or it just doesn’t like our website well we just keep optimizing and see how it goes from here combine javascript files of course activate it ah here we are so now pingnom does like our website thank you very much it was javascript all right we can also load javascript deferred so that’s amazing but i guess we already maxed out gg metrics so we cannot get any faster for them and i’d say it feels really fast and the last option we can check is delay javascript execution of course let’s save the changes and see what happens didn’t improve much but we are already really blazing fast right now so i’m really happy with the results till so far but let’s see how much further we can push this website let’s go to media and of course we want lazy loading to be activated this is a very powerful feature you can read all about it uh for them press save changes and let’s also enable it for iframes and videos if you even have a lot of youtube videos on your website using an iframe you could you really should check this box because it’s really improved the speed of how youtube videos are loaded in your website well that had some impact on the scores not very much but it had some impact on the mobile scores because as you see right here the desktop is almost already maxed out but the mobile score is only at 80. why is that well we’re gonna analyze this later on but first count first contact phone paint really does a bad job right here so we’re gonna fix that later on in this video to get your mobile scores also really high dimensions so add missing image dimension and press save changes that is actually a really good result we already have right here and we didn’t even follow the next four steps of this video i am blown away every time with wp rocket it’s such an amazing plug-in it’s worth every single dollar don’t you agree when a company promises speed and they deliver it man i’m happy alright let’s go to preload right there and then you press activate sitemap base sketch preloading i don’t have a sidemap on this website but you should have seen here something like from yoast of rankmath which is excellent just leave it on link preloading is already set to on and preloading fonts is already working for us so press save changes i must point out with preloading fonts if you do have a font that you have manually added and it’s not in this list please add it in there and it will save you a bunch of time loading those fonts alright so let’s go to advanced rules is a thing that we should not do manually ourselves because it always works for me however if you encounter any problems and you contact wp rocket and they tell you to add some certain rules to your advanced rules then they can then they can be really useful i’ve used it one time and it really works great too to not cache a certain plugin all right let’s scroll down let’s go to our data by database here you can clean up your database to remove for example all your revisions your outer draft or your trespass you can just clean them if you never use revisions or if you don’t know even what those are then you can just remove remove them comments cleanup you can remove your comments temporary options you can remove them all from your database and your database cleanup if you have a lot of overhead you will see them right here i don’t so i’m not going to clean it and an automatic cleanup i would not advise you to do so because you can remove a lot of things that you don’t want to have removed all right press save changes and optimize and then we go to our cdn if you do have a cdn you can activate it right here in this place if you do not have one and you want even more speed and you have a lot of international clients then rocket cdn is a very good option for you it it actually serves your website from a server closest to the person in question if your website is hosted in amsterdam for example and someone from australia visits your website the other side of the world that it might be a little bit slower when you load it from a cdn it is all blazing fast from everywhere on the world so if your target audience is a lot of international people you should really consider this thing i’m not gonna use it so i’m gonna close it right there and i don’t use a cdn for this website right let’s go down to heartbeat control wordpress heartbeat api it’s already on and that is great just leave it on normally wordpress uses heartbeat every minute but wp rocket slows it to every once in two minutes so that’s a slow of 100 and it really works by not giving the load on your server so it speeds up your website if you go to add-ons you can see that you can activate varnish if you have it on your website this specific server does not use varnish so i’m not going to edit it if you’re not sure you have it ask your hosting company because they have to install varnish on your website i don’t have any web b images if you do press add on and then it is it works absolutely amazing with wp rocket alright cloudflare we will be adding this in in just a few minutes so hold on image optimization on the left side imageify is a awesome plugin you should really use if you have a lot of images on your website we’ll be installing this later on to export all your settings and import all your settings and roll back to another version of the plugin if the plugin broke your website with a new version.

So the second way to optimize and speed up your website is very important you go to plugins and you go to install plugins and you can see a list of all the plugins that has to be installed on your website you should really deactivate and remove all the plugins you do not use on your website for example all in one seo i use rank matt so we’re gonna remove that one dash notifier hello dolly jet pack oh this is it sounds really fast but it’s not w3 total cache we don’t need it because we have wp rocket woocommerce this is not even a workshop and wp optimize we have wp rocket which is way better and just press book action press deactivate and then delete and we’re going to delete all these plugins we do not use this is how to get rid of all the extra ballast that is not needed on your website if you also have a couple of plugins like insert header code insert header and footer code for example you do not need it when using divi if you want to know if you use every feature from divi please watch my tutorial about things you’re doing wrong with dv because it will really help you out using all the features of divi and maximizing your speed also alright step number three it’s time to optimize our images if you go to media and you go to your library you will see that you have used a lot of images lately on your website and they might be a bit oversized from your website point of view if i for example click on this size and the dimensions are alright and the file size is not very high however you could do even better without losing any quality to do that we will be using a another plugin which is free from wp rocket to do that we go to wp rocket we go to settings and we go to image optimization and then we can install install imagify now imagify is a really cool plugin which really creates new images from your existing images to create them very small without losing any quality so you can’t see it with your bare eyes is great all right the first thing we need to do is we need to sign up because it is free to get our api key and then we can configure it so let’s sign up and your email address it is the wpres and we press sign up and now we have a api key so we press ok go to your email and you get an email like this welcome to imagify and here you can see your api key so let’s copy this one then we go back to wordpress and we press i have my api key we paste it in we press connect me congratulations alright and then we go to settings it’s that easy yes it is that easy all right we have three optimization levels we have normal aggressive and ultra i would not suggest to use ultra because it’s a bit extreme maybe so let’s use aggressive how to optimize it back up original images and let’s go down right here

Now we want to use w uh we we want to use webp images because they are just really smaller so we’re going to activate this one use picture text preferred and we don’t have cdn so that’s okay press save and go to bug optimizer let’s get this over with and the only thing you have to do right now is press this button imagine final and we’ll see that it’s going as you can see we’re on the free plan right now of magifi we have still 100 space credits left and if you start the optimization we will see how much credit it will cost for only 22 images i don’t think a lot.

So you can also see some details down here if you press few details you can see what they are optimizing right now and what they’ve already optimized so if you’re wondering if you need to buy credits for a magifi just press what plan do i need and then they actually calculate what is the best choice for you isn’t that awesome so they said you currently have 19 mbs of images you upload around 20 kilobytes of images per month because i don’t know upload anything to my website they say the free plan is enough to optimize your images that’s very nice of them thank you very much imagine i will keep it this way if you optimize a lot of images to your website you can actually buy this version and then you have five dollars per month and if you pay yearly then you get two months for free this is very interesting if you have a blog and you’re uploading a lot of images to your website every single month and now we see well done you have saved 1.90 megabytes out of 2.71 megabytes that’s that seems like uh not very much but it actually helps really reducing the size on our website we have zero space credit left so that’s pretty good we are just completely

uh and that’s pretty good because we have optimized all our images which haven’t been optimized already and now we see what it does to our scores we’re going to analyze page speeds insights again and also the gt metrics again and ping them once more well the desktop is already very high so the mobile score on google doesn’t seem to get really high because of the first content full paint and if you scroll down you can see actually what’s happening they have an empty screen and then the images comes very laid in you see that so the images must be served in next-gen formats that’s what they say so we go to our homepage to fix this issue once and for all if you now edit your in my example my homepage for example you see that our mobile fuel this image on the in the background is really making a content shift how are we going to change it well it’s pretty easy just go to the settings of the place where this image is in in my case it is in this column and the background is these images now we can use a different image for our mobile device so you click on this mobile option right there we go to phone and then we’re going to select another image for our phone on a iphone 11 for example this is the image it’s actually being loaded we can actually cut a lot out of this image for our mobile view so we’re going to do just that and the new file i created is just very small especially for mobile and it’s only 40 kilobytes so i think that should do the trick and let’s upload the image all right so let’s see if google and if google page speed loves our mobile view a bit more let’s analyze it again oh wow so now you can see that the performance on mobile is gone up to 94. this is exactly how i wanted to see on desktop it is still 98 it is perfect it couldn’t not almost not get any better and on mobile it’s 94 that is that is a really great uh that’s really awesome i’m i’m happy i’m happy with this thank you wp rocket you have an awesome plug-in there for a magifi it really works great and you see with just a few adjustments on your mobile view you can actually get a very high score on mobile also with divi that is really awesome all right let’s go to the fourth step of the website and for that what you can do is we can route our website through cloudflare now cloudflare is a free tool which you can you write your website through and you can also pay for them for add more options so what do you do you go to cloudflare.com what’s also very awesome is that your website is protected from ddos attacks when you’re routing your website through the cluster system so how do we do we just press sign up right there then you enter your email address the wpressdoctor.com and press create account when you are in your account you can easily add a website right there click on that website and fill in your url without the http so dvductor.com add site and then you can pay for a plan of course but you can also start a free version below it press this one and press continue and then you’re scanning your existing dns records why because they’re going to copy it so that your dns when someone fills out your url is being routed through the cloudflare network so these are all the records that are in right there and i press continue now the thing you have to do is you have to change your name servers if you mess this up your entire website will not work again so if you don’t know what you’re doing please ask your host in this case this website has been hosted on name hero as you can see and we have to change it to this one and this one how we’re going to do that i’m going to log into my name hero account from there i go to domains and then i go to my diviductor.com and i press on this one and then we go to nameservers right there and here you can see custom name servers are from name hero we’re going to copy and paste them from cloudflare click to copy and we’re gonna replace this one and the second one click to copy and replace this one and then we press change name servers all right changes has been saved successfully now our name servers at cloud star has been activated that’s pretty easy then we go back to cloudflare and we press done check our nameservers and press finish later all right now it’s gonna take a while i think a couple of hours before dns settings has been saved through the entire internet it could take actually up to 24 hours so you have to watch this page from cloudflare to see if your website has been added to the cloudflare network once it has been routed you go to wp rocket to go to settings and then you go down and we go to add-ons and then you can actually enable this one use cloudflare you press modify options here you have to fill in your global api key where can you find it well it’s pretty easy if you know where while we’re here we also need the zone id so we’re gonna press copy you go to w rocket and you find you paste your zone id and also your account email that you used at registration with cloudflare so it should be the wpress doctor.com and now for our global api key and when i log back in it’s great news cloudflare is now protecting your site it works so now we’re gonna get our api key go to my profile api tokens right there and we’re gonna press the global api key we press view enter your password then you have to solve a very difficult puzzle choose all the bosses and more buses and press verify then you press view now you can see your api key just copy it paste it in wp rocket and press optimal settings scroll down and press save changes and there’s a couple things changed and there’s a couple things that changed on cloudflare the cache level set to standard minification on rocket loader off and browser cache set to those seconds all right you can close these messages and now you also have cloudflare added to your website well done i’m really proud of you and the biggest question of course is does this actually help in speeding up our website well it definitely does look at those scores so this is the mobile view it’s 96 right now and on desktop it is a blazing amazing 99. this is awesome you almost can’t get any better and also with GTMetrix a flipping 100 and 99 structure and also a 655 millisecond to load our website and of course i’m curious does everything works that is intended yes it actually works and if i scroll down you can see that all my options are still in there all the effects everything works as intended but this website is just amazingly blazing fast so if you retest it from your home you will see the exact same scores please do so so you know i’m not making fun of or anything it is the absolute truth.

So the fifth and last step is actually pretty obvious if you don’t see the same results i’m having right here with this website uh with my hosting company then you really should thinking about changing your hosting company i don’t know your budget i don’t you know your money but if you follow the link in the description of this video you will get a discount for name hero which is a perfectly hosting company in the first three years you’re not paying a lot for your website it’s really amazing so you should really follow my tutorial around here how to set up a name here hosting and you can actually move your website to name hero to get the same speed results because your website matters and your speed also matters a lot to your website visitors alright guys that’s basically it i hope your website speed has gone up please tell me in the comments if you did hit that like button if i helped you out subscribe if you want to see more videos about wordpress divi and other cool stuff and i’ll see you around in the next video have a awesome day.