How to Speed Up Your Wordpress Website: Make Wordpress Faster 2022

Hi guys, it's Greg here and in today's video I want to show you how to speed up your website. Recently I went through a speed optimization process for my own website and I managed to get a score of 90 according to PageSpeed Insights for mobile version of my site and 98 for the desktop version of my site. So in this video I'm going to show you step by step what I did and what you can do as well. As you probably know I run this website here called Travel Croc. This is my travel blog and on this website I've recently decided to sort of look at the speed of it and make sure that it is as fast as possible because it is very very important for Google search traffic. If you want to get the maximum amount of traffic from Google search you need to make sure that your website is fast. Here are some before and after results. This is the blog post Chillicothe Ohio things to do that I took the screenshot of before I started the optimization process. You can see that for mobile my score was 41 and for the desktop version my score was 57. And with a few simple optimization tricks, well maybe not so simple, I managed to improve the score to 90 for mobile for exactly the same post and it went up to 98 for the desktop. And if I run the same URL through GTmetrix report you can see that I've got the GTmetrix grade A and I'm passing the Web Vitals assessment which is extremely important if you want to succeed at SEO in 2021. Okay so first of all let's talk about what tools should you use if you're trying to assess whether your website is fast enough or whether it's too slow and you should be speeding it up. There are two main tools that I recommend you use to keep things simple. That's exactly what I have done with a number of my websites and the first one is Google PageSpeed Insights. If you just type into Google PageSpeed Insights this website will come up. This is something that is provided to you by Google and it's quite critical to make sure that according to Google your website is running fast enough because ultimately for search traffic Google is going to be your largest traffic provider so you want to make sure that they're happy. And what is good enough? Well in general you've got the light system right so if your website is red or orange that's not fast enough. If it is green then generally Google will be quite happy to send you the maximum amount of traffic. So a good place to start is to take any page on your website any of the blog posts or any of the pages on your site and to run it through PageSpeed Insights. And the second tool which is quite important because it gives some bits of information that you can't actually find through PageSpeed Insights is GTmetrix. So go to GTmetrix and then test that same page. For example it gives you a very good view of this thing here called TTFB which stands for time to first byte which PageSpeed Insights doesn't actually give you. And this is very very helpful and we'll come back to a few other features of GTmetrix later on in this video. So two tools one is GTmetrix the second one is PageSpeed Insights. Okay so the first thing that you should be looking to improve is your hosting speed. Very very important to make sure that your connection that your web hosting provides to your website is as fast as possible. How do you test this? You need to go into GTmetrix and type in the page on your website. For example if we look at travel croc after the optimization that I have done you will see that time to first byte is 205. So this is the metric that you need to look at very important. Why? Well let me show you a sort of an example of a slow website. It's also my website caffeinatedblogger.com. This is a post on my website and this website I don't care so much about the speed of it because it's just my brand website. So I haven't done a lot of work to optimize the speed of it. I don't really need a lot of SEO traffic on this blog. And you will see here that ttfb for this website is 964. Okay so ttfb stands for time to first byte and this is basically when someone tries to access your website how quickly the website even starts to respond back and starts loading. So 964 milliseconds is essentially one one full second which is quite slow. You should be looking at ttfb at around 250 milliseconds or less. So my travel croc website loads with ttfb of 205 and that is very very good. And the best way to reduce this ttfb is basically to get a good high quality web hosting. So what are good high quality hosting providers that will give you very nice and low ttfb value? The first one that I highly recommend that I recently switched over to myself is a hosting called cloudways. My website travel croc now works on cloudways and as you can see with cloudways I'm getting ttfb of just 205 milliseconds which is very fast so I'm really really happy with this. And for you guys I actually contacted cloudways and I've got a special coupon for you if you want to use cloudways hosting then you can go to the resources in the description below and click the link in the description and then use my special code to get 20% off the hosting price for the first three months. So when you click the link in the description below you will get onto a page that looks like this and after you land on this page click on start your free trial. That's the cool thing about cloudways you can actually test them for three days absolutely free no credit card required and once you're happy with them you can then after those three days once you have full confidence you can join on a paid plan. So when you click start your free trial over here you will see a page like this so you can enter your name email password but make sure that you take advantage of this coupon that I've got special deal so where it says get a got a promo code enter my coupon code which is CB20 you will see a little tick box green tick box that means that it's valid this is my coupon that will give you 20% off for the first three months of you guys using cloudways which is pretty awesome. Now guys cloudways is a premium hosting company they're extremely fast but they're a tiny bit more expensive than a super budget like really low cost providers such as host gator or side ground you get much better service very very fast servers and the pricing once once you've actually registered you will be able to set up your your sort of server your package from inside the account the one that I personally use is this one called vulture and then high frequency okay vulture high frequency and the plan on which I'm running is just the cheapest one which is $13 a month $13 a month now with my discount code it'll be closer to about $10 per month so once you're inside cloudways you would basically see a dashboard similar to this and you would just need to go add a server you can see I've already got my travel croc server over here but you would go add server it's a little bit different if you're familiar with like let's say side ground side ground or other hosting providers it's a tiny bit different to them so you need to set up your server and then here you choose your application so probably for most of you it will be wordpress okay so just choose wordpress then you give it a name and whatever it is that you would like to do you can create a new project or select your existing project and then you will see over here that you've got options for what's called providers this is where you can choose either digital ocean or linode or vulture or aws etc and I personally use vulture and then I choose the high frequency over here and I chose the cheapest server that were just the one with the one gigabyte so this is how you sort of get the configuration of your server and then for location you would want to choose wherever most of your traffic is coming from so for me it is from the US normally so you can just choose any of the USA locations and then you can click launch now this button here at the bottom and essentially and away you go but like I was saying guys you actually get three days of free trial with cloudways if you go via my link in the description below cloudways do have amazing support and also they've got full documentation for how to you know how to operate everything but I've just shown you how to actually install wordpress and get started with cloudways on cloudways I am getting 205 time to first byte 205 milliseconds which is really good now if about ten dollars a month is too much for you and you want the cheaper hosting provider that still gives you really good time to first byte I recommend host armada this website here which is just one of my test websites lowkey freedom is hosted on host armada host armada are actually very cheap and just so that you can see the time to first byte that I'm getting from them is 627 milliseconds seconds here 627 which is actually really good for a shared hosting provider and I also do have a special deal with host armada so if you do want to grab host armada through my link click the link in the description below that link will take you to a page similar to this so you just go into hosting wordpress hosting the pricing is around three and a half dollars to four dollars a month but if you use my coupon and my link from the description below you'll get an additional discount as well just apply my coupon in the very last page of checkout so in the last page of checkout change the coupon code from liftoff which will be the default coupon to my coupon and that will give you 75 percent off so it'll be even cheaper than 359 or 449 or 539 a month so there you go hosting very important you can get around 600 milliseconds with host armada or you can get what I am currently getting which is 205 milliseconds with cloudways it's completely up to you and your budget talking about time to first byte I actually came across a really brilliant website onlinemediamasters.com and they have this comparison that they published of load times and time to first byte and over here you can see the image of time to first byte of 16 different wordpress hosts so cloudways vulturehf is the leading one that's the service the stack that I recommended for you earlier on in this video and then you can see some of the other test results so for example SiteGround which is a very popular option is quite slow in terms of time to first byte it's over one second hostgator was the slowest 1.2 seconds the second thing that you can do to speed up your website is to use the right theme that is a theme that is optimized for speed too many themes out there and too many websites out there are very slow because of the themes that are installed on them or perhaps because they're built using page builders so I have recently just a couple of days ago switched the theme on my travel croc blog to a theme called this theme over here now this theme is really good it's actually extremely flexible I'm using the premium version of this theme you can see that it looks good it loads fast and the most important thing about this theme is that it was built with the speed in mind the website speed in mind so you can check out the neve theme website and it's all about speed right so it's a lightweight theme built for speed in the new wordpress era it it gets a 100 speed grade through google through gt metrics reduced weight the actual theme itself is extremely lightweight and it loads very very fast you can use the free version of this theme or you can use the premium version of this theme I went for the premium version of this theme because I wanted the extra customization and extra support but it's completely up to you guys the links to the neve theme are in the description below but do make sure that you do your research and that you try to use a theme that is the most lightweight theme possible avoid building your website with element or with optimized press with various other themes that put a lot of bloat and a lot of css and a lot of javascript onto your website because that will dramatically slow down your website and no matter what other optimizations you do you will never be able to get the fastest website possible if your theme is not built for speed the next thing that you should do is use an image optimization service I personally use short pixel and for me image optimization is very important for two reasons one is I have a lot of images on my blog and second I also create this so-called web p versions of the images so there are two things that short pixel does for me it compresses the images on my website and you can see here your media library has been successfully optimized 42 so on average I saved about 42 percent of the bandwidth if an image was 100 kilobytes before now it's you know about 50 what does it work out to be 58 kilobytes instead of 100 and the second it creates these web p versions which is very important from google page speed insights perspective if in your page speed insights you're getting this error here serve images in next-gen formats then short pixel or another similar service can really help you with that now for image optimization there are three services that are kind of very common I use this one here called short pixel because of pricing I'll come back to that in just a second but the other two popular ones are smash or imagify you can use any of them they all three are great they have slightly different pricing but for me I decided short pixel because and I use this short pixel image optimizer I don't use adaptive images short pixel image optimizer has a credit system where I can pay one time I don't have to sign up for a monthly subscription which was attractive to me I just bought this package here 30k credits for $19.99 and that was enough for me to optimize all the images on my site and I still have quite a lot more image credits left over so I don't have to actually be on a plan after you install the short pixel onto your website as a plug-in you enter your api key and then set some settings I've put resize larger images to a maximum of 1024 either high or wide which is the option that I decided to go with you can do a different option of course there are full guides on how to set everything up but the important thing here is that you also tick deliver the next generation versions of the images in the front end that will just serve these webp versions of the images and ultimately it will remove this error serve images in next-gen formats out of your page spin insights report so now without doing any coding or anything fancy all these images are served in webp format so for example if I open image a new tab you will see that this is actually now a webp image see here at the end the extension is webp the next step that I personally took was to use a plug-in called flying scripts to delay and execute javascript on user interaction I'm going to show you how this works just to demonstrate to you the impact that it has I've just deactivated this plug-in you can see it's now not active in my travel crop website and then I re-ran the page speed analysis and as you can see there is actually now a bunch of errors for example reduce unused javascript and then you can see there is code so essentially there's 1.2 seconds estimated savings because now this code is loaded and before the rest of the page finishes loading okay and you can see here it's google syndication code which is basically the google ads google adsense ads on my website there is now a couple of other errors just below here reduce the impact of third-party code a third-party code blocked the main thread for two and a half seconds okay so that's again google syndication so that's related to google ads so a bunch of errors now have appeared as well as so you know now there is 8.4 seconds of savings over there and this is all this all can be resolved by using this plug-in called flying scripts it's 100 free this plug-in I'm going to put a link in the description below but basically you can also just look for it in the plug-in directory it's free it's called flying scripts I'm going to activate it now and this plug-in allows you to enter keywords and this is just like a part of any script name that is causing you issues on your website for me I've personally inserted googlesyndication.com embed player youtube instagram and ads by google so that's different types of scripts that kept appearing on google page speed insights and I've put an option of timeout five seconds so essentially these scripts will load once the once my website loads after five seconds these other scripts will be allowed to get executed on my web pages and they will also allow if there is user interaction so see it says here keywords that identify scripts that should load on user interaction okay so there are two conditions either someone does something on my website and then those scripts will fire off or if no one does anything if the visitor doesn't do anything then after five seconds they will execute so let me demonstrate to you so I'm now going to open my website and I'm not going to click anything and you'll see that google ads actually don't load straight away there is a five second delay so okay so I'm hitting enter and now you'll see the ads are not there five seconds will evaporate and the ads will appear see now after five seconds the ads have loaded so what this does is basically this delays all of these scripts it delays the ads it delays the other scripts that come up in the page speed insights reports and that ultimately helps you get a better user experience so I'll just demonstrate to you once again if I load the page and I move my mouse they will load straight away okay look loading the page ads not there I move my mouse they load straight away so really cool plugin these scripts will load on user interaction or they will load after five seconds or you can choose any number of seconds here that you decide to go with and if you're wondering what keywords to put into here you can get them from your page speed insights report so where you see for example this minimize main thread work reduce unused javascript you can see here okay you just need to analyze these you can see that this has got to do with google syndication.com so then I took this keyword you can use any keyword from this whole script link so you can go like this copy link address and then analyze it and you'll notice that it loads from google syndication.com so then I just entered google syndication.com into this flying script option screen then I also noticed Instagram because I embed Instagram posts from time to time so I inserted Instagram.com as well so you just do them one by one and then check your updated page speed insights report the next really important thing that you should do is you should activate caching on your website and there will generally be two types of caching that you can use your website hosting provider will generally provide you with caching so for example if you're using cloudways then you can google for something like cloudways activate caching so how to do this if you're using host armada again you would do the same thing host armada activate caching and it will bring up the tutorials for you for exactly what you need to do to activate caching on your hosting provider so cloudways for example do this through this breeze plugin okay so you can read all about it essentially there is a breeze plugin that gets installed onto your website that is hosted on cloudways and with the breeze plugin there are various settings you can read the tutorials on exactly what settings to choose but this will ensure that your website loads the fastest possible way the caching basically converts all of the database resources into what's called static html resources and your website loads a lot faster the database you know wordpress database doesn't have to calculate any of the values they are already converted and sort of pre-loaded in in html format onto your server and it just speeds up dramatically how fast your website can load if you're not sure about the best way to activate caching on your web host provider just contact their support or read their support documentation it's a little bit different with every hosting provider the next step to speed up your website is to remove unnecessary javascript and css from your website pages let me show you an example of exactly what i mean so i am here on my website on this post and if you open the page source and we go ctrl f and start typing in contact form 7 you will see that there is some code here related to contact form 7 so there is some css for example that gets loaded for contact form 7 there is also some javascript that is related to contact form 7 and in case you're not familiar with contact form 7 contact form 7 is a plugin a very popular one with hundreds of thousands of installations that allows you to just create simple contact forms like this so how did this code css code and javascript end up on this page well you see what happens is that plugins that you install onto your website it can even be page builders they end up loading on all of the pages of your website even though you're not using them there on this page i'm not using a contact form anywhere yet it still loads so there is a way to disable that and that significantly speeds up your website and for that you will need to use a plugin called perf matters or perf matters the link to that is in the description below once you've installed this plugin it is a paid plugin but it is very affordable and if you're really trying to speed up your website it's very very useful in a lot of ways so once you've installed this plugin you should go into assets and enable script manager like this over here and that's this will then enable you to use script manager on selected pages so let's say you're testing this page just open that up and then you will see that there is now a new option at the top if you are doing this in a when you are logged into your wordpress there is an option there say script manager so just open that up and now through script manager you will see all of the scripts and all of the css that gets loaded on this page and from here you can actually disable it if you need to so look i've got contact form 7 that gets loaded and if you can see here it loads javascript and css okay so this is not necessary this is slowing down the website and bringing down the page speed score there is also a bunch of other plugins it'll be different for every website depending on what sort of plugins and what sort of functionality what sort of theme you have installed but you can turn all of them off if you don't need them you can turn them off okay so contact form 7 i definitely do not need and i can turn it off from here and then i can choose where is it disabled so i can say okay it's disabled everywhere with the exception of certain options okay so i actually want to have it to leave it enabled on my contact page of course so the best way to to do this for contact form 7 is to go to my contact page so contact us over here and then open script manager from here so if i go do that click off disabled everywhere except on the current url so you can see i've already got that selected so the only page from now on the only page where contact form 7 will load is the contact us page see it because i'm on the on this on this page right now so let's just go and save this okay and we will now see so let's of course clear our cache so anytime you do any changes to your website you will need to make sure that you clear all of your caches so i'm going to go clear cache for wp rocket purge opcache clear the cache for breeze all right so this is now purged and let's now open that same url in our private window and now when you load this page it's going to load a lot faster because the css and the javascript for contact form 7 will only load on the contact us page will not load on any other pages on your website so very very cool and very powerful so you should definitely run script manager on your pages and check what kind of scripts get loaded and then consider disabling those scripts on as many pages as possible next i also recommend that once you've got perf matters that you take full advantage of a couple of other options that it provides for you the first one is under general options i will show you the settings here these are the different things that perf matters can speed up and they are generic things that most wordpress users do not need so you can disable them all as an example you can disable emojis disable xml rpc which is just a function for someone to access your website remotely most people don't need that i have disabled a whole bunch of stuff and that will mean that they're not running on my wordpress server and that my website is a lot faster with minimal effort so i highly recommend that you do that you can read about each of these options with a question mark and you can enable them one by one and make sure that your website is not getting broken by doing this the next thing i recommend that you do is you go into lazy loading and you enable lazy loading for iframes and videos so on my website i do a lot of embeds of instagram posts and youtube videos and if you tick this option that will mean that those iframes and those video embeds from youtube they will not get loaded until the person scrolls to them for example on this page i've got an instagram post embedded over here and this will slow down your website unless you enable that laser load option that i was showing you before because to load this instagram post the browser has to contact instagram and then wait for the response back but if you enable these iframes and videos option to to lazy load basically this will not load until the user actually scrolls down to it so this significantly speeds up your website and will solve a lot of problems with page speed insights the next option is this fonts option over here if you use google fonts on your website and majority of websites do these days i highly recommend that you turn on display swap and because that will download those google fonts onto your local server and it will instead of contacting a google external google website to load those fonts they will already be pre-loaded onto your server so it's a lot faster and it will speed up your website it will also remove a lot of the css related and and and render blocking issues from your page speed report next i want to show you how to eliminate some render blocking resources in particular css so i have just disabled something on my website and i've rerun page speed insights and you can see now i get this error that says eliminate render blocking resources over here and the culprits are this couple of css files now this is very common and these can save a lot of a lot of loading time for you if you optimize css delivery to do that i use a plugin called wp rocket the links to that plugin will be in the bottom in the description of this video and once you've got wp rocket installed i recommend that you go to file optimization optimize css and js and you enable this option here called optimize css delivery you'll notice there is also this box here that says fallback critical css now you need to have a value there just in case there are any errors on your website then this fallback critical css is going to load and to generate it for you you will need to go to the website called purify css.online and enter your website so let's say i take my website url just insert it in here click clean up css and now this is going to give me this option so click this button over here download combined purified and minified css so go ahead and download this text file this is going to give you this cleaned up css output it's going to look like something like this just a bunch of code so select all of it and insert it into this box over here fallback critical css save your changes and then make sure of course as always to flush your browser caches so here i'm going to clear cache purge op cache and then go purge all cache okay so now after this is done let's rerun our page speed insights and you will see that this css error will disappear so we're just going to reload and now over here you can see that we don't have those css render blocking resources errors anymore well guys if you follow the recommendations in this video i'm sure that you'll be very close to making your way to a green page speed insight score thank you so much for watching over here i'm going to put another video for you so go ahead and watch this video if you would like to learn how to seo optimize your wordpress blog posts i've made this tutorial for you so go ahead and watch this right now also leave me a like and a comment below let me know what you thought let me know how you went and any questions that you've got in regards to optimizing your website speed thank you so much for watching i'll see you in the next video