How To Speed Up Your WordPress Website with WP Rocket & Bunny CDN

so if you build a website or you're in the process of building a website one of the key factors to making sure that you get visitors and keep visitors is the speed at which your site loads and operates if you move the whole cache inside of things and the thoughts of CD ends just leave you cold today's video I think it's going to be perfect for you I'm going to give you an introduction to dealing with setting up caching software CD ends dealing with gzip all those kinds of really daunting kinds of tasks so if you're new to all this and you want to find out how to optimize your website from the start and also make sure it's optimized moving forward join me in today's video I'm gonna take you through all that right now so let's just go back to the office take a look so let me just start this video off by saying what it is we're going to do why I'm doing it and hopefully you'll see the reasoning behind it and maybe implement this into your own sort of work process now a lot of the videos you'll see online when it comes to look at these speed tests and how you can just stick a plug-in on there and you can take a site from a ten-second site to a two-second site you're basically trying to shoehorn a solution into a problem and hoping that it'll fix it through various different means if those sites had been started off and built with these tools in place and some of the practices we're going to take a look at in place then hopefully what this would do is it would you start off with a better starting point or you wouldn't retrospectively try to sort out problems with that being said what are we gonna do and want to be working with well I've got to sit a typical site it's not a complex site it's not a massive site it's already got a fairly decent starting point but it's a site that ultimately if you hand it off to a client that site would grow content will be added to it either via projects via new information new staff new current vacancies all kinds of different things so what technologies am i using to build this site first of all we're obviously using WordPress in this example we use in the hello theme so we've got a pretty bare-bones starting point which like I said before it is a good start important to have a theme that isn't massive and overkill for what you're trying to achieve it's a fairly simple stripped back design none of these images have been compressed prior to upload so there's an issue there we need to deal with a norm I would deal with optimizing the images before uploading but when you hand it off to a client you don't necessarily have that luxury so we're going to take a look at how we can optimize images before uploading and also how we can optimize images that have already been uploaded and optimize images that will be uploaded in the future by the client giving us three points of attack should we say to optimizing images with an elemental which is a page builder so that's already pushing us back to more bloated code than we'd have if we use in just a theme and maybe just WordPress on its own so there's already a bit of a negative impact by using that this isn't singling out elemental all page builders will suffer from code bloat it's just the way that it created we've got things like positions current vacancies and so on this is using advanced custom fields so these are custom design pages with custom sections inside there and you can take a look at each of the individual items we've got projects which is a filterable gallery so you can see we can filter through this images are playing a big part on this site and you can take a look at any of these images and you'll take a look at the project in which again is a large image it's all set up optimized to be using a CF custom-designed templates and so on so it's a good starting point it's a typical kind of starting point for a smaller project if you're working with larger projects I still think most of what we're going to cover in this video will be applicable to those bigger projects is a case of good practice from the get-go as opposed to retrospective trying to sort out issues okay so that's the site we're working with what tools are we going to use well we're gonna take a look at optimizing the images like I've said before uploading when we upload them and also anything that's already installed on the site if you use it something like SiteGround which is what I'm using here for my hosting and we're using the lowest package available on there the sort of couple of pounds couple of dollars a month kind of thing we're going to take a look at enabling gzip which normally at this point in time isn't Auto enabled as part of SiteGround however you know take a look at whatever hosting company you're working with because gzip can make a difference we're going to take a look at how we can set up a CDN we're going to use a low cost option that has a great sort of rapid this is bunny CDN so if you don't want to spend a huge amount of money bunny CDN is a good option and wanna take a look at a plugin that then will help us to optimize the site now and moving forward so with those things being said let's take a look at how we start things off with the images and how we can take a look at optimizing those before we even start now there are various different ways in which you can compress and optimize your images prior to uploading them to your site two of my favorite would be short pixel and also tiny PNG or tiny jpg is the same site they both work in pretty much the same way you upload an image you can then have that automatic impress then you can download it with a nice saving if you have PNG files especially PNG 24 with transparency saving those out of Photoshop they still pretty big so using something like tiny PNG or the optimized options in short pixel will give you a decent saving on their nice thing with short pixel you can take a look at it before and after so you can compare things you also have the option for different compression ratios so if we go to compress for example we have lossy glossy and lossless whereas a tiny PNG and tiny JPEG you literally just upload and you're given just the end result you don't really get a huge amount of options with the free version however with tiny PNG and tiny JPEG you do have the option to purchase a photoshop plugin which will give you this basically built into Photoshop now I'm not going to go through in detail how to use these they're pretty straightforward especially when it comes to tiny PMG or tiny JPEG you just literally drag and drop your files up on there same kind of thing goes for this but you get the option to preview it as part of short pixel the other thing that I like about short pixel is you can integrate this in and I believe there's a free plan that gives you a small amount of compression every single month however the paid for plan which I was lucky enough to grab myself a couple of deals over on appSumo a little while back gives you some great options and that's what we're going to be using today for two different parts of this where we could retrospectively compress images and how we can set it up to automatically adjust as it uploaded to our site we can also use this to automatically create web P images as well if we want to so short pixel is gonna be my choice however it's entirely up to you if you wanted to use an alternative but realistically I would always recommend compressing your images check in the quality before you upload things but as I said the topless video you don't always have that option when it comes to working with clients okay so that's the first thing we're gonna take a look at and we're gonna do that first of all we're gonna install the plug-in we're gonna link that to my short pixel account and take a look at compress in those images and some of the options we have available before we do though let's just quickly see what it is we're working with I'm gonna use GT metrics for this initial result but we'll take a look at some of the other sort of benchmarking things afterwards and see what they show us as well but as you can see we're not starting off too well even with a pretty simplistic sight our wife's low score is pretty good 90% is fairly respectable our page speed not great but the thing we're interested in and this is where this may be an unpopular kind of way of looking at things the most important aspect of any site then all of these different benchmark internet sites is this the actual load time how long does it take for the end-user to see a page being delivered to their browser four point three seconds is over double what we need it to be ultimately we want to be under two seconds on our load time a fully loaded time now there will be also sort of people saying about getting higher scores when we use in PageSpeed by Google and there's some merit in optimizing it for that kind of thing however the bottom line is still comes down to that fully loaded time yes there are going to be some detrimental effects for various different things with your search engine optimization side of things but always work for the end user what they're going to see when they land on your site and the two seconds should be your goal and the one would be amazing so that's what we're gonna work towards in this right now we've done that let's take a look at his torn those plugins and getting everything set up with our short pixel account to speed things up I've already gone ahead installed the short pixel image optimizer plugin I've activated it so what we need to do now is take a look at how we set things up so when you open up and you install this you're gonna get offered two different things one is the email address to request an API access the second is to supply an API key if you have an account you should have an API key available to you so we'll hop over to my short pixel account and when you log in you're gonna get this information which is your plans and pricing I'm going to go over this in detail but currently it looks like they're offering double credits for basically the same price so nine dollars 99 and credits that's pretty good going as 20,000 images you can optimize for ten dollars anyway but that being said we want the API keys option and in there we've got the API keys so I'm going to take my API key come back over into the short pixel plug-in and we're just gonna drop that API key in the hit validate that's gonna go and check everything is in place and take us over now into these short pixels plugin settings and this is where we start working on things you can see we've got some really basic options include thumbnails create an image backup what this will do is it'll create a folder on your server and keep a copy of the original uncompressed and modified images so if anything happens you can roll back to those or you can just go back and reoptimize them if you needed to if you don't have tens of thousands of images and you have enough space on your server I would recommend use an image backup even if you only use it to start off with while you make sure everything is working and then you clean it out afterwards just gives you that little bit of a fail-safe remove exif data if you're working with the site that doesn't require that information remove it because it is gonna make your file sizes a little smaller you can resize larger images and you can set a maximum size on there to optimize them and I'll leave those as they are we've also then got the three different compression levels lossy glossy and lossless now lossy is gonna give you the best compression but with the highest level of artifacts in other words if you have photographs with lots of intricate details you may start to see some detrimental effects on the image however making sure you have the image backup in place means that you can easily rollback individual images that don't look good and reapply a different level of compression to them if you want - we'll take a look at that a little later on because I'm going to compress everything - lossy and we'll find that the larger hero ridges on the site will look a little bit rubbish because of it but it'll depend upon what you want to do you can choose whichever option fits best to your needs onto the Advanced section we've got additional media folders if you want to drop things in there you can do but we're just going to choose the options that are most relevant to what I'm looking to do I don't want to convert PNG images because that would then lose any of the transparency you can set to create web P images and if your browser supports it you can have this automatically create those and you can see it says it creates those for free so you're not gonna have those taken out of your allowance which is cool if you choose that option you can see it says deliver the WebP II versions of the images in the front end you can select that and then you can choose how you want to approach it whether you want to use the replacement of the picture tag or whether you want to without altering any of the actual code on the page just use the htaccess file up to you which way you want to go about that if you're unsure then probably leave it off okay so everything else looks pretty good we don't wanna alter my automatic tamai pdfs because we're not using any and you can come down then you can see we can say we want to exclude certain thumbnail sizes so you can see we've got a list of different thumbnail image sizes I will say the tiny 155 150 some nails I'm not too bothered about optimizing those they're not used on the front end of this site they're more than likely just used in the media library on the back end but if you've got the credits and you want to optimize everything then by all means go ahead and optimize everything we can now say save and go to bulk process and what that's going to do is it's gonna tell us how many images we have that it's going to optimize gives it the option to include or exclude thumbnails and tells us whether we want to create the web P version so it tells us we have 66 images and leave all the options set as they are and just hit that start optimizing this isn't gonna start the optimization process it'll tell you how long it's gonna take once that's finished then we're ready to move on and take a look at what impacts that hat actually has on the site load times and there we go there's our optimization all finished and you can see we've saved about 61% over the original file sizes hovering over it gives us some more information about it what was processed accept accept accept uh you can if you want to bulk delete your meditator and a few other things pretty cool plugin not to start off with now if we come back over into the media library with this plug-in in store we have this new option down on the right-hand side so let's just say for example these slider images don't look great what we can do is we can click on there we can say to compare we can re optimize lossless reoptimize glossy or restore back up so if we click on compare that's going to allow us to compare the before and after so we can see the degradation that may have been impacting this particular image now you can't really see it great on there because it's quite a small thumbnail image however if we jump over to the front end of the site and we'll refresh this we can take a look and if you think the image doesn't look great which you can see there's some quite horrible banding inside the actual heading section and the same with this one we could easily come back in into a media library and we can do is we can click and we can say reoptimize glossy so in other words that's going to use some optimisation but it's also going to do it to a lesser degree you can restore the backup if you wanted to we will say reoptimize glossy you can see that says now image waiting to be reprocessed and we were the same man for our other slider reoptimize glossy and let those go through and we should then find that gives us the quality back obviously we're gonna have a slightly larger file size but sometimes this is the price you have to pay remember your site still has to look good to visit is even if it's being served up quickly if it looks rubbish when they get there it's not gonna give the greatest impression so with all of these kind of things is always a bit of a balancing act to get quality versus speed that's the kind of thing you've got to look to work with ok so now we see we've got a smaller level of saving thirteen point one seven and just under 23 but this still savings in the file sizes there's still got to be better now you may not be able to see the differences when we're looking on the screen on YouTube because it does compress things anyway so you may still see it doesn't look the greatest that's probably because we're still going the cached version and we're also like I say we use in YouTube which compresses things anyway okay so that's the first side of things that I wanted to cover heading back over to GT metrics I've run the test again and you can see went down to 2.7 seconds so we've already shaved off about one and a half seconds by doing that so we're already onto a good sort of step forward I will page speed has gone up to 75 percent so we're looking pretty good to start off with and that's just with optimizing these images next up on our list if you use in site ground and you don't have gzip compression enabled it's very easy to enable I probably linked to this particular article so you can just simply copy this code over well I'll show you this if you want to skip past issues to get past it there's time signatures in the description below so this isn't applicable to you by almost just skip past it but super easy to do we're going to do is we jump over into site ground into our account into the file manager and open up the public HTML folder for the site that you want to add gzip into inside there you'll find a file called htaccess we're going to do is we're going to right click and we're gonna click on edit and a scroll down and make sure that we don't have that code in it already by mistake we'll just drop in underneath and we'll just paste that little block of code in and we'll just hit save on them that now should enable gzip as part of your site ground account if you already enabled you're not gonna see any problem doing this but it is one of those things that I don't believe at this point in time I could be wrong please correct me in the comment section if I am I don't think gzip is enabled by default on your site ground accounts okay so that's how simple it is to just hide in gzip obviously if you use in a different hosting company and they don't have gzip enabled reach out to their tech support ask them can they enable it and if they can't enable it on a sort of global level ask them how you can enable it on your particular server or your particular hosting account for the site you're working with they should be pretty helpful and get that info over to you pretty quickly so next up on our list is we're going to be using WP rocket as the particular caching plug-in of choice in this example there are other options available and I've done a comparison video of several of the top ones including delivery rocket so if you want to check that out put a link in the description so you can take a look I put a link in the corner right now as well so you can check that out and you can see a comparison however though if you rocket is one of those ones that the cost is good the feature set is good and it's fairly straightforward to use it has a great reputation so it's one I would say it's worth checking out but like I say check out that video to see if you think any other options we've better suited to your specific requirements now I've already bought a copy of WP rocket this is paid for out of my own pockets this isn't sponsored endorsed or anything else we're gonna activate the plug-in once that's activated we should then start benefiting just by the default basic options that we have as part of WP rocket so that's already set up let's go into the settings and take a look at what we have there okay so there's the WP rocket dashboard and as you can see there are quite a lot of different options however it is automatically optimizing straight after you install it so you could if you wanted to just run with a completely stock install like this and all we'll do is we'll just quickly take a look to see what difference that's made our load time before we start making any tweaks and before we take a look at any form of CDN ok so while our page school and wife Law School haven't changed our fully loaded time now is sub 2 seconds it's worth bearing in mind though that whenever you use something like GT metrics or ping them you are going to see a fluctuation in various different settings specifically this one the fully loaded time so I would always suggest when you do this run several different you know sort of times to do a performance test and take a mean average don't you sort of find the highest or the lowest one and use that as an indicative example of worse like Plus also use tools like ping them you know just to get an idea of what it's like across various different platforms various different sort of speed test methods they're all gonna have their own little quirks in their own little fluctuations there's just a ton of different variables at play here ok so we can see that we are looking pretty good we still have some PageSpeed score things we could deal with getting some better options inside there but we are now sitting in that sub two second side of things ok so let's go back into WP rocket and take look at what we have inside you this isn't not an exhaustive test of W rocket this is for the average person that just wants to get a faster loading website what are the basic things you can do to just improve it you could just go with the stock settings like we just seen but there are still a few other little things that you could do just to speed things up actual a little bit okay so dashboard is just tell us what's going on kind of thing if we take a look at the cache we can see this is where the basic caching options are so it's enabled through enable caching for mobile devices generally you do because obviously you want people with mobile devices on 4G 5g and so on to have a good experience you can set whatever you want to up inside you it's really basic if you need help everything is available with some help information file optimization this is where you probably are going to start taking a look at different things this is where you can do what's called a minification and all magnification really means is it gets rid of things like spaces blank lines comments and so on from your HTML files your CSS files and your JavaScript files you can also have the option to combine multiple files together into one so for example you may have several different CSS files one for your theme you could have several for your page building you may have done some custom CSS that HUD might have a separate CSS file you can combine those all into one so it makes a bigger file but if you minify that and combine them into one there's less round trips between your server and the browser which ultimately should make up for the increase in file size by reduced round-trip latency again I hope that makes sense the thing you have to bear in mind though is that these can cause issues with various different themes various different setups so don't just enable everything click OK and then just go on to the next set of options with anything to do with using any kind of tool like this just minimal changes save clear the cache test make sure thing works ok then repeat to the next option the next option yes it may take a little time there's nothing worse than go through choosing 10 different options saving it go to your site and then realizing it doesn't work you've got to go back and do all those 10 options providing you remember what they are and then go through them one at the time to sort the problems out so let's start off by the minified HTML we can click on that what comes out save our changes once that's saved we should see it's going to test it's now going to go through and preload these to make sure what the cache is refreshed you can if you want to also come up hit the clear cache to make sure that everything is nice and clear you can see this now down eight pages which I think that's all that's on the site at the moment so we can then come back over to the site do a forced refresh make sure that the page is still loading in that all the different things are working so we go to team for example the page still loads up goes to the right section all those kinds of things so taking a bit of time just helps make sure that everything is working okay come back to the file optimization and this time we'll go on to the CSS file so we'll say minify the CSS files you can see that gives us a warning because like I said it can break your site will activate that will combine them as well we'll say activate that and we'll say optimise CSS delivery so we're only doing one section at the times of the selling breaks we know it's going to be to do with the CSS minification do the same thing again save our changes let that recache and reload those pages for us clear our cache at the top if you want to and we should be okay and you can see it tells us critical CSS generation is currently running one of the ten pages types completed so this is going through the process so give it a little time the bigger the site the more of these sort of optimizations that have to be run give it time to go through and do everything before you go and check it out because otherwise you could go through half through the optimizations and things are still not completed may look okay you move on come back and something's broken so they go does critical CSS have all been created we can come back to our site now we'll refresh this make sure everything is working okay so we'll just jump around a couple of pages just to check everything is looking good go to this section for example okay so everything is looking okay so we know that's completed successfully finally we'll do the same thing then for the JavaScript so remove JavaScript jQuery migrate vinify this again we're gonna get that notification just saying that could break something say yes or hope okay with that will enable the minified javascript files bla bla bla load javascript deferred yes will save the changes on there and again we're gonna let it go through the cache side of things okay that's done I figured my cache would jump back over to the site and you see this isn't the most exciting thing in the world to be doing it is kind of quite slow and laborious and repetitive but what it does do is it makes sure that everything is working so when you make changes you don't everything up okay so those sides of things are done for us let's quickly run another GT metrics test I'd only do GT metric test on everything I'm just gonna show you some of the basic things but I want to do at the beginning so you can see the process that I go through when I'm setting this up for a site so come back to this and again we're gonna run through a test okay so with those tweaks we now are seeing a little bit of a difference our yslow scores going from 90% to 97% so that's a nice little increase our fully loaded time is dropped by 0.2 seconds and our file size has come down from 1.3 5 megabytes to 1.3 three not really much but then we're not dealing with a massive site you should see a noticeable difference if the site is more comprehensive and complex our requests however are draw from 50 requests to 17 so you can see we're talking about cutting down that round-trip between sort of sending a request for a file and having it back multiple times for multiple CSS multiple jQuery files and so on that has made a quite a nice difference okay so what else do I recommend taking a look at as a bare minimum when you use is something like WP rocket well let's take a look we've done the file optimization let's have a quick look at media for example now you can see we've got lazy load now lazy load is just simply a way of deferring the loading of images and things like that until you start to scroll down the page and just before they kind of come into your browser window into view they then load in so it means you don't have to load all of the images on a page if quite a lot of those are below default so should speed things up so we'll say enable for images you've also had the option for iframes and videos so if you use those on your site it's worth enabling those options and you CSS replace YouTube iframe with preview image if you using that feature you can enable it for me I'm not using any of those so I'm just going to disable that option you've then got disabled emojis I would recommend doing that for the most part not really used in a lot of ways WordPress embeds this prevents you from embedding content from other non-white listed sites if you don't do that you can leave it web peek compatibility you can see this tells us because we use in short pixel we can also use stone if you rock it to deliver those images for you so you say enable that will it's a changes on there so that will now go through and should speed things up like I say if you've got lots of images preload do you want to activate pre loading I would recommend take a look through this and see if it's something you think is worthwhile advanced rules I would say if you're comfortable using this you're probably watching this video because this is gonna be way too basic for you but if you want to take a look take a look take a look at the need help if you try any of these out if you start to get comfortable you want to test it out do like I said beginning enable something set something up save it test it repeat repeat repeat don't kill your website by just learning to a ton of different options your database you can see we've got post revisions and drafts will only be deleted these are just things that if you have a site that's regularly having content added to it you're gonna find you probably have a ton of revisions ton of drafts so on you can see I've got 148 revisions in my database that's going to slow things down in your database because your database is going to get bigger so you can use this to clean things up if you want to so I would recommend doing that on a semi-regular basis just to clean up any junk that you may have sort of encountered CDN we're gonna come back to that in a moment so you've got things like control WordPress heartbeat I've never used this I have no idea why it does so I'm not even gonna touch upon that but again read the help if you're interested add-ons currently has just a couple of options and these are one-click bakit add-on so you can add these into things which if using Google tracking Google into Facebook pixel and so on you can enable those if you're on cloud ways then you may want to look at enable of varnish if you use in that for your caching because I believe that runs on cloud way so you may want to enable that if using CloudFlare you have that option or Securi you have that option so I'm not using any of those so I don't need to worry about them image optimization now unfortunately this is a service that they want to tie into they'll be rocket it's one of the assists that company kind of things called image if I if you don't want to use short pixel and you want to use something that's integrated into WP rocket free one sort of stop shop for this by all means take a look at image if I I'm not using it and using short pixel because that's my preferred option okay so then you've got tools so you can export your settings so you've got a good starting point on other sites if you're using the same server and a similar setup could be useful and you've got rollback and so on till allow you to roll back to previous versions of the actual plug-in itself and finally you've got tutorials to just give you a head start so that's basically WP rocket in a nutshell we've gone through some of the most important things but there are tons of other options they should you want a dig in a little deeper now the last thing we're gonna take a look at is a CDN or content delivery network if you're not sure what a CDN is just don't think of it as like a copy of various different files for your website in different parts of the world on different servers that are closer to your potential audience so let's just say that your server is based in the UK but a big chunk of your audience are in America then having to come all the way over to a UK based server could be quite slow for your us audience using a CDN means that key files are stored in a server location closer to those in America which means that they just go to that CDN server and grab the relevant files as opposed to coming all the way over to a UK based server you see the end can have multiple different countries with different servers in and it could have multiple different servers in an individual country to speed things up Bunnie CDN is a great option for those of us who don't have a massive budget but you want to benefit from a CDN now why is it such a good option pricing that's the key thing here you can see that we've got four different locations Europe and North America Asia Oceania and so on these are your standard options so for smaller sites they're going to be perfectly fine if you have a much bigger site then you have these options for higher volume and as you can see the price increases based upon there's different factors but you can see for Europe and North America it's gonna cost you one cent or point one cent per gigabyte that's pretty good going so you can use this and you can easily have a pretty popular site without having to spend more than maybe a couple of dollars a month to get CDNs in various different countries the other nice thing is you can pick and choose what CD ends you want in other words you may have a large audience in Europe or North America but next to nothing in Africa South America and Asia well instead of having to have all four of these you can just choose Europe or North America and you only pay for the CDN and the traffic that goes through it in that particular location on those servers which i think is great so what I've done is I've set up a basic free account 14-day trial account which I would recommend that you do to see how much of an impact it can make on your site this isn't the only CDN there are tons of CDN options available and it all depends what you want to do Bunnie is one that's been recommended umpteen times on different places that I've got the Facebook group and so on so that's the reason why we're taking a look at that today it seems to be quite highly regarded now once you've signed up for this trial and the nice thing to bear in mind here is you don't need to put a credit card or any payment details in for this test 14-day account so that's pretty cool then once you've set your counter you go to need to create what's called a pulse on now this might sound complicated but it's really super simple I've already created one for the test site that we're going to be using but I'll show you how to create one anyway click to add a new poll zone it says okay what are you gonna do we've got the name which is just going to be the name of this current pull zones we'll just call this test WP tats so you can see it also puts this little sort of URL at the end of it but we just worry about that then the origin your URL which in other words is just your site so we come back to our main site we'll copy the URL now you can't see that in fortune because the way I've got my screen set up but all I've done is I've copy that URL well drop that inside there and then you've got two options this under tear or the high-volume tear we're gonna stay on the standard tear because that is the cheapest for the most option and like I say that's gonna give you four smaller sites it's gonna be perfect so we'll leave that option and then you've got the different pricing zones so tells you how much you're gonna pay per gigabyte for each one of these different zones if you don't want to use any zones you simply click on it to disable them so this example we're only gonna have a CDN pull zone set up in Europe and North America which is where the bulk of my audience are going to be now we say add pull zone and you created a pull zone it's as simple as that if you jump over to the WordPress then to say if you use in website WordPress Joomla group and so on we use in WordPress click over there you can see all we really need to do is install the bunny CDN plug-in and just grab this bit of information so let's do that now let's come back over into our dashboard and we're gonna come back into a plugin so I've already gone ahead and downloaded this I just haven't activated it yet so when I come down and we see bunny CDN we don't activate that once that's activated we'll say clear cache for Delta P rocket and we're gonna come into bunny CDN now you can see this just wants to pull his own name so what we're gonna do come back in copy that from this so we'll just copy it and then what you can do is you come back into this you can drop that inside there and we'll say enable bunny CDN once that's been enabled you can see we can now clear the cache or we can switch to advanced view so if you switch to advanced view all you have inside there is just some extra information which is already pre set up for you anyway so you don't need to worry about setting anything inside here if you want to put the API key in you can do that and that's easy to get hold of come back over into here and if we come into our account go into our account I can't top and you see inside there there's our API so we need to do is enable that by viewing it copy it and simply just drop that into the relevant box inside the update your CDN clear cache and you are golden now because we using don't be rocket we've got to tell that that we're also going to be using Bunny CDN so we need to do is go back into our settings section back into WP rocket and inside we've got the option for CD ends when I click on there and you can see it says it wants the CDN name so how do we find that bit of info we do that by going back at our bunny CDN account go to our poll zones choose the polls on that we want so the example is this test WP test that's one we just created I'm gonna click on that and inside there we now have our host name and we have our origin URL we're gonna grab this host name go to copy that come back over into Philippi rocket we're just going to paste that inside there and we're going to come down and say Save Changes and that's all there is to it so now we can go ahead and just test that out once it's recache this will just clear the cache again on there to make sure everything is done and we're going to do is we're going to just make sure that that's all working and we are actually using the CDN to test on that I've opened up an incognito window loaded the site in and we're gonna do is we're gonna open the developer tools by pressing f12 once we open that we then heard the sources tab and from there we're looking for this which is that Bunny CDN pull zone you can see test WP tetes dot B - CDN ocean net which is exactly what we saw inside here at the top which is the host name so with that all set up we can just make sure we can see exactly what information is being displayed inside there so you can see we expand this out we've got del V contents and WP include are being served from that CDN simple as that so that's all being done set up and it's working and running that GT metrics test one final time you can see this is what we're coming back in with we've almost got perfect scores across the page speed and the yslow our fully loaded time is at 1.5 seconds and our total page is down to less than one megabyte with a minuscule 12 requests that's pretty good going now run the test over on ping them you can see these are the values you get in we're getting a pretty good performance score page size for some odd reason there's a discrepancy between the two here I'm not really sure why but you can see the load time is 401 milliseconds so less than half a second so this is where I'm trying to say to you at the beginning of the video you've got to use these as a starting point and get an idea of where you were to start off with and where you are afterwards and also tested yourself see how it feels to you and sometimes one of those things that all these speed tests in the world can be great but they don't tell you what it's like to actually interact with the site yourself open up an incognito window so you're not having all the caching and everything going on from previous examples clear that out start with a fresh section and just test it out and see how it works but this should give you a good starting point as some of the fundamental things you need to look at when you first of all create insights with optimization in mind and also moving forward some of the tools that should ultimately with the whole process of expanding your site easier knowing that you've got these various different things in place to optimize things as you move along secondly as you make changes to a site come back and test it out on a semi-regular basis especially there's a lot of content being added test different pages out see how the different pages are optimized tick you know take that time to go through and make sure that everything is in place and tweak as and when necessary but before you make any tweaks make sure you run a backup and if you haven't taken a look at doing backups I'd recommend taking a look at the video that I'll pop in the corner now and in the description below all about my whole backup process so you don't make changes and test things out you've got that there to get site back online if anything happens and you lose everything okay so I'm gonna wrap the video up at this point hopefully this is being useful to you if you are new to working with any kind of caching and optimizing and so on if you need comments questions or feedback or let me know what results you've had drop those in the comment section below because I'd love to find out what you think of this tutorial if it's helping you and what tools you use to get great results as always all the applicable links for everything I've covered in this video are in that description below - your posse this has been wptouch and until next time take care

Channel: WPTuts

Views: 18,804

Keywords: WPTuts, how to make wordpress faster load, how to make wordpress website faster, how to make your website faster wordpress, how to make your wordpress website run faster, wp rocket, wp rocket tutorial, wp rocket plugin, bunnycdn, bunnycdn setup, bunnycdn wp rocket, bunnycdn tutorial, How To Speed Up Your WordPress Website with WP Rocket & Bunny CDN

Id: JexdIO8uNUM

Length: 39min 42sec (2382 seconds)

Published: Fri Jul 17 2020