How To Fix A Slow WordPress Site - WordPress Speed Optimization Tutorial

[Music] how's it going everybody in today's video I wanted to show you how to debug a slow WordPress site now this is something that I've done quite a bit so my goal here is is to show you the steps that I would normally take in order to find out what exactly is slowing down my site and how to fix it and while this video is probably more geared towards developers there's going to be a lot of useful information in here for non coders as well we will be going over a few plugins that I tend to reach for that will actually help us out quite a bit so let's get started this is the site that we're going to be debugging today now it's just a quick little portfolio site that I whipped up for to be our guinea pig and there's really no obvious reason just by looking at it as to why it might be slow and I did that on purpose I wanted us to really rely on our art tools rather than visual cues because what I mean by visual cues is you know sometimes you go to a site and there's heavy animations and lots of ads and all that kind of stuff and you can be like well well that's obviously the reason why this is slow but there's nothing like that on here it's a very plain site so again I did that on purpose so we can rely on our tools and some of the tools that we're gonna be using it should be something that you already have at your disposal if you're using chrome hit command option I on your keyboard and you will pop up with the chrome developer tools now this is something that you've probably already used to some extent I mean the elements tab and the console tab are ones that I use daily but there's two more tabs that I want to touch on the first tab is the network tab now this is going to give us what's called a waterfall and it's going to be extremely helpful in helping us debug why this site is slow the other tab that we're gonna be taking a look at is over here at the top right it's called audits now this tab allows us to run what's called a lighthouse audit and well it says it right here it's going to help us identify and fix common problems that affect you sites performance accessibility and user experience we're going to be focusing on that first part sites performance and so what I'm gonna do is we're gonna run a lighthouse audit and it's gonna give us a score and some tips on how to fix our site we're going to take that score and we're gonna compare it as we start fixing things we're gonna see that that score start to increase and and I'll show you what I mean but first let's set up kind of what we want it to do the first thing is that we want it to run on mobile and I mean more traffic nowadays is coming through mobile than desktop so I figured that's a good place to start the second thing is we're only want to deal with performance we're not really interested in SEO or accessibility or anything like that right now just performance so just make sure that it's just checked the next thing that we're going to want to make sure we have checked is the simulated fast 3G now I'm just kind of doing this for the lowest common denominator approach like we want to make sure that our site receives a good score at the little slowest possible speed and that way you know we know it's good for people with phones out in the middle of nowhere and people who are running on really fast desktops with a hardwired connection so make sure that one's checked and the last button that we want to make sure that we have checked is the clear storage we want to make sure that we're not getting any sort of cheated scores we don't want anything to may be cached or anything like that so let's click run audits to see what it gives us all right so while that's doing its thing let me briefly explain what we're about to look at so lighthouse is giving going to compile a report for us and it's going to give us a score from 0 to 100 it's going to give us some metrics as to the how slow things are like how long things are gonna take to load as well as some suggestions as what we can do to increase our score so as you can see our score is 24 out of 100 we are definitely failing this is a terrible score to have and we are going to spend the next little while figuring out how we can bump that up the next section here is the metrics this is how long it's taking for the site to load and again we clicked that simulated fast 3G button so this is how long things are going to take on a 3G network if we scroll down a little bit further you can kind of see a chart as to how the the viewport is going to look for somebody on that 3G network basically they can't see anything for a long time then they see everything next we see opportunities these are the suggestions that lighthouse is giving us as to what we can do in order to make our site faster now these are some pretty good suggestions but this is not where I want to start I mean I would just basically wanted to get a baseline of what our score is this number 24 up here and we're gonna jump over to the network tab and we're gonna start looking at our waterfall for those who don't know a waterfall is essentially just a graph that will tell us how long our assets are taking to load and the order that they were loaded in now the first item in a waterfall is usually the request to the server and you'll see here that we have this giant bar here and if you hover over it you'll come up with this new window and you'll see that that giant bar represents our time to first byte that's how long it takes PHP and the server to to do all of its magic behind the scenes so if you're making a lot of queries to you know the database or to third parties and things like that that's what's going to increase this number so we have that giant number there at the top and we have a lot of slivers over here down the right-hand side of the screen and as we address this first one we'll be able to start taking a look at those other ones that take up more of the screen and we'll move on from there the other thing that I want to draw our attention to is down at the very bottom left here of this tab now it's going to have a couple different things we're going to want to take a look at the first thing that we're gonna want to take a look at is the number of requests this page is making this page is making 25 requests and that when it when we talk about requests we're essentially talking about the the number of JavaScript files it's downloading the number of CSS files it's downloading the number of images those kind of things so we have 25 things that we're downloading we're going to work to reduce that and as we reduce that number that our site will load a little bit faster the next thing is the number of megabytes transferred that's how much how many megabytes were downloading so that could include the size of our JavaScript and CSS the size of our images those kind of things so 8.7 megabytes is pretty darn huge so we're gonna be working to reduce that number as well the last number that I want to take a look at is the finish that's how long more or less our site has taken to load this home page so right now it's at six point seven four seconds that's you know without any throttling like we were seeing the lighthouse on it so that's a more natural number so now that we know what we're up against let's take some steps to resolve these issues now the first place that I tend to start is with images images are likely culprits to a large download size of a page so if you go into your network tab and click images then you're going to have a list of all the resources on this Paige and how big they are you can click on size to sort them by their size and we can instantly see that we have two images that are outrageously huge we have hero JPEG which is 3.3 megabytes and we have citizen JPEG which is 2.9 megabytes let's take some steps to resolve these so let's move over to our dashboard so if we login to our site we will be able to navigate to our home page and take a look at these images directly so if we go to all pages in home we have a couple of advanced custom fields here that are storing our our images for them to be displayed on the home page if you're not familiar with advanced custom fields I have a course that I'm working on about it and I will put a link to it in the description so we first off we have this hero image and I'm going to click the pencil icon and it's going to come up with some information well we can instantly see that it is a large image not only in its file size but as far as its pixel width and pixel height so there's no reason for this image to be 6,000 pixels wide if we go back to our home page we're just using this as a background image here now it does need to be larger than most images that are going to are going to be on this page but we don't need six thousand pixels worth of that image so we can click on edit image and it'll come up with this interface that we can use to crop it down go over here to this scale image section and I'm going to just set it to 1600 pixels that's usually what I set to full width images once it's finished and the image has been saved we can click back and we can now see that this image went from three megabytes all the way down to a hundred and ninety five kilobytes so let's move over to our other image that we were just looking in the other one that we were looking at is this citizen JPEG and again we're looking at close to three megabytes here let's hit edit an image but we don't need it to be 1600 pixels if we go back to our home page and inspect this image the container that it's in is only 585 pixels wide so let's just scale it down to 600 wit scale and once it's finished we cook back it's gone from three megabytes to 37 kilobytes so an insane amount of savings but even with that drastic amount of difference between our original image and our cropped image we can still take this one step further on pretty much every site that I work on we tend to have WP smush installed on this site and what WP smush does is it basically intercepts every image that you upload to your site through the media library and compresses it and it gets rid of all of that image metadata and what I mean by that is that every time that you take a picture with you know a fancy camera or your phone or whatever it stores extra data into that image and it usually will store the location like your like your latitude and longitude when you took the picture it will store the make and model of that camera and we have no use for that so what this plugin will do is it'll add a button to our edit page right here that will strip that data out of the image therefore reducing the file size and since we are just activating this plug-in now we're gonna have to go back and actually manually do this ourselves but normally it would happen every time that an image would be uploaded it would automatically do that for us so if we click smush here it's going to go in and rip all that data out and it should give us a nice little report as to how much it was actually able to strip out so it looks like it was able to take out about 4% so I mean it's not nothing but it definitely has a long-term impact on your site so as you start uploading more and more images this is going to make a bigger and bigger difference so let's do that to our hero image as well and see what kind of save we get here looks like we got 7% so a little bit more and again this is going to impact your site over time like this is also going to increase your score with auditing tools like lighthouse so going back to our homepage let's take a look at our network tab if we sort them by size again we can see that our images are much better than they were before if we look down at the bottom then you can see that our megabytes transferred was only 2.6 down from the original 8 point 7 and our finish time is down to five point zero five seconds so we're definitely making progress and so let's move on to the next step and that next step for me typically is auditing any unused CSS and JavaScript and to give you an idea of what I mean is that technically if we open up our source code here technically I have a plug-in called buddypress installed and you can see that right here now buddypress is a plug-in that allows you to have basically as a social networking type site and we're not using any of those features on the home page we're not we don't have any sort of login form or social feed or anything like that so the fact that these are being in queued on this page makes them unnecessary so what we're going to do is we're going to install another plugin called asset cleanup now asset cleanup is a plug-in that I use quite frequently and it allows you to take a look at all of the all of these scripts and styles that are loaded per page and then decide whether or not they need to be there so once we activate this plugin we can go over to our page our home page and we will get this nice little interface right here it's going to fetch the loaded scripts and styles for our homepage and then it's going to list them out for us down here so it's going to split it up into three separate categories from all the all the CSS and JavaScript from plugins from our theme and from any third parties so from our theme we have our app dot J s and our app dot CSS we definitely want to keep those or our site's going to break however in our plugins it's in its has in queued buddypress and that's what we were just talking about we don't want that so it's listed out every single JavaScript in every single CSS file that buddypress is put on our home page now you can get these to DQ themselves individually by just clicking this little switch here but we don't want buddypress to happen at all at our home page so you can just click this check all box or button and it will DQ them all so let's hit update and then let's take a look at our source again so we have all of these buddypress JavaScript files and if we reload the page we should see them disappear and it looks like it did so why that's important is every single one of those JavaScript files is doing two things to our load time it's adding first of all it will add an extra network request to our list down here and it will also add to the number of megabytes transferred so by removing those we are kind of killing two birds with one stone we're reducing the amount of requests and we're reducing the amount of megabytes transferred and you can see that right here down at the bottom left we went from like 20-something down to 14 and we've went from 2.5 mega bytes transferred or went from 2.7 mega it's transferred to 2.5 so let's go over to our audits tab to see if our score has increased in lighthouse so with any luck we will have jumped up just a little bit now we have a long ways to go there's still a lot more work that we can do but just by compressing some of the images and reducing some of the unused CSS and JavaScript we're now at 31 so we've had you know a noticeable amount of increase there but we also have all of these suggestions that we can now go through and increase that score further and further so let's start at the top and work our way down looks like the first opportunity that we have with the most amount of savings opportunity is enable text compression so what that means is that we have assets like JavaScript and CSS that can be minified if you're not familiar with the term minified when we create our CSS and JavaScript files they tend to come out like this there everything is all spaced out and they're really pretty and it's perfect for a human to read but this is a lot of wasted space for a computer to read like every time every space between every character and every line break is something that the computer has to actually read and interpret so what minifying does is it eliminates all the spaces and line breaks so the file size is drastically reduced and it is much easier to read for the browser and normally this would be would be a task that is handled by your workflow like whether you're using webpack or gulp or something like that but that is like a whole nother lesson and that's something that I will definitely be covering in another series but just for now we're going to go in to get our app dot CSS and we're just going to copy this whole file into an online minify err so C SS Minnow fire com you can paste in all of that CSS it's going to be quite large but you just paste it in and hit minify and it should output with a nice minified file so you can kind of see what I was just talking about all of the spaces have been removed so let's come back to here and paste it in here and hit save now let's do the same thing with our JavaScript we can go into app guess and we can go to JavaScript minify or comm and paste that in there and hopefully it's not going to crash because that's quite a large file but we're gonna hit minify and hopefully get a nice little output here so we're gonna copy that and we're going to paste it into our file again hit save and let's go back to lighthouse and after running the audit we are now at 73 so this is a dramatic increase from where we were at just before so but we're still not done and we still have a lot of other things that we have to deal with then now the next one is reduce server response times and if you remember in our network tab this is what we were talking about with this time to first byte and if you remember as well this does not just mean that oh my server is slow I need to upgrade hosting that could be part of it but there's also the other aspect that this could also mean that you're running some pretty heavy network requests in your PHP you could be making you know really big database queries or you can be hitting a third party and sometimes it's hard to find out whether this is your server or if this is PHP that's slowing this one down so I actually want to show you another plugin that will help you tell the difference so let's head back to our WordPress dashboard and add a new plugin and this plugin is called query monitor this is a plugin that i use on pretty much all my sites as well because it really helps me keep track of the changes that I'm making and and it helps me make sure that they are now impacting my site's performance negatively so now that we have it installed and activated let's go back to our home page and we should have a new little task bar down here at the bottom if we click the COG we can click overview you can start to see that it's going to give us some you know generic page speed and information like how long the the page took to load 5.2 seconds you know how much memory it's taking how long it how many queries we have but there's one in particular that I tend to look at first if you scroll down over here on the sidebar we'll see that they have a tab called HTTP API calls and we have five of them and it looks like we're making five those five calls to swap eco and if you're unfamiliar with swap eco it's a public API that allows you to grab information about Star Wars characters and if you remember at the beginning of the video we had this table down here at the bottom that was listing out five Star Wars characters so that's the reason why this time to first byte has is taking as long as it is we're making five round trips to get information about Star Wars characters if you look over here on the right hand side the very far right column it tells you the time and that's the time that it took to complete the request so each one is taking about a half a second totaling two and a half seconds of time to get these five characters so this is something that we can actually address with something called WordPress transients so let's jump over to our code so if you've never used WordPress transients before essentially it allows us to store data for a set amount of time before retrieving it again what we want to do first is make sure that our transient doesn't exist before we run this block of code so we want to store everything in a results variable and then we want to get transient and we want the Star Wars characters and we're naming this right now this can be whatever we want that we're just naming the transient so then we're going to only run this code if it doesn't exist and then so if it doesn't exist we do want to make those API calls and then we want to set the transient and we're going to use the same name that we used up here otherwise it wouldn't work and we want to store what comes back into this a results array and then the last parameter is how long you want to store this for and so I'm going to just do 12 hours so you do 12 times hour in seconds and hour in seconds is a default WordPress constant that's available to you you don't have to set that up and so long story short every time that our page loads it's going to check to see if this transient exists in the database if it does we it won't run this code and it'll just return our results it'll return that record in the database however if it's been 12 hours and that record no longer exists it will run this code and set it for us so let's go back to our page and see how it's affected our page load so let's refresh our page and see if we get those same HTTP API calls and we had to refresh it twice because the first time it set the transient for us and the second time we actually got to pull in that WordPress transient so we have no more API calls which is great let's check our time to first byte if we pull up our network tab and hit refresh we should get our new time to first byte let's go up to the top and we're down to one second now typically in a production environment that's still pretty horrendous we need to clean that up now there's two last things that I want to go over the first thing is we have query monitoring query monitor still running let's deactivate that we don't want that running anymore if we're going purely off of our results now if we go over to remove it and then refresh our page I mean it's it's sped it up just by a few hundred milliseconds it's it's not nothing but it definitely helps now the last thing that I want to go over is caching there's a plug-in that I use called WP rocket and WP rocket is hands-down my favorite caching plug-in because it doesn't just cache the way that other plugins cache it also has other optimizations that others don't so now that I've activated it we can go to settings and WP rocket and so what I'd like to do next is I want to walk you through what my typical setup looks like WP rocket has the sidebar over to the left that will has all of the different settings that are available to us so let's start over here with cache now that kind of the nice thing about this plugin is it's very much out-of-the-box ready to go but there's a little bit of tweaks we can make here but specifically on this cache tab everything is pretty much ready to go the only thing that I would say is like once you actually do have your SSL certificate installed that you click this check box and since I'm running locally and I don't have SSL on I'm just going to leave it as is so the next tab that I want to take a look at is file optimization now this one is going to be really handy because if you remember a little bit ago we actually had you know take our CSS and JavaScript files and go to a website and minify them now you normally this would be done by a build process but if that's not something that you have the luxury of this is also a really great way to just speed that process up you can minify your CSS files now when you click on it it's going to say well this could potentially have some issues so what I would suggest is as soon as you activate this this setting is going and checking your site to make sure everything still looks right another thing is that you can combine your CSS files WP rocket will actually look through all of your plugins and your site and it will try and combine all of your CSS files into one CSS file so that would reduce the number of HTTP requests that we make so if you remember down here in our network tab there's all these requests well if we go to our CSS button here we have two now as your site gets bigger that could potentially change you could have you know three four five even and what that would do is it would try and combine these two files into a single file so it would cut our requests in half and likewise for JavaScript in this one it probably would make a little bit more sense to do we're at four files we could try and combine those into one but same kind of issue here it has some potential side effects and I when I really want to emphasize potential I've done this a bunch of times on a lot of different sites and I've had no issues so you're just going to want to make sure that you go and check your site afterwards just to make sure everything looks good so the third checkbox is optimize CSS delivery and this is generating the critical CSS for your pages it doesn't actually directly impact your site speed just the perceived site speed so we're not going to actually check that box the next two or minifying javascript and combining javascript files exactly like CSS check the box save the settings go back your site poke around make sure everything looks good the last one is making sure javascript is deferred what this means is I mean typically when you're loading JavaScript on your site you want it to be the last thing to load this will make sure that wherever your javascript is in your source it will still be the last thing to load and let's save our changes so let's go back to our home page and see what our new scores are so let's open up our network tab and hit refresh and you can see that our time to first byte is now microscopic we're at fifteen point eight milliseconds now that's down from a second so we're hitting a fraction of what we were before also if you look down at this here at the bottom left we are only at ten requests our page sizes 380 kilobytes and it took a hundred and sixty three milliseconds to finish loading our page so this site is dramatically faster than it was before but believe it or not there's still a couple things that we can do to make this go even faster so if you notice when we first load this homepage all we're really seeing is this first image and some text and all this but if you look over here on our waterfall we're actually loading snowscape JPEG and Citizen jpg well if somebody lands on our site instantly clicks higher me they're still having to download images that they're never going to see so there is a technique called lazy loading your images and WP rocket actually makes that really simple so let's go over to our WP rocket tab again and click on media and under media there's the lazy loading section and we don't have any videos or iframes on our site but we do have a lot of images so let's make sure that we enable lazy loading for images and so what this is going to do is it's not going to load that snowscape JPEG and it's not going to load our citizen JPEG until they're about to be viewed so that way people aren't having to pay for resources that they're not actually using so let's open up our network tab and hit refresh so now we don't have citizen JPEG and we don't have snow scape JPEG but as we start to scroll down a little bit they should pop in so the first image is snowscape jpg since that's the one that's closer to the top if we scroll down a little bit further citizen JPEG loads it waits until it's about to be come into the viewport and then it loads in so that will reduce the initial amount of requests that we're having to make so therefore increasing our load speed so now let's take one final look at our lighthouse audit and see where we land let's run another audit with the same settings as before and we are scoring a perfect 100 so we have debugged our problems through the network tab and the lighthouse audit we've taken images and we've resized them to their containers we've lazy loaded them we've even compressed them with smush we've removed unnecessary scripts and styles thanks to that asset cleanup plugin and thanks to WP rocket we now have caching it's combining our files and we have reduced our network requests with WordPress transients so we've done quite a lot of work and now our site is instant we are can just click this refresh button as you can see and it is just loading instantly so whether you're just starting out in WordPress development or I've been doing it up for a while or you're not in development at all you just run a WordPress site I hope you learned something today these are all the things that I wish that I would have known when I was first starting out so if you liked the video make sure you hit the thumbs up button and subscribe to my channel so I know to keep doing what I'm doing hey guys I just wanted to shout out WP rocket really quick there towards the end of the video we installed it and implemented some of its features well we only really scratched the surface as to what WP rocket can do and so I'd invite you to click the link in the description check out the features and if you end up buying a license you'll be supporting me as I make new videos thanks again

Channel: WPCasts

Views: 70,030

Keywords: speed up wordpress, wordpress tutorials, optimize wordpress, fast wordpress load times, slow wordpress load times, make wordpress faster, wordpress speed, wordpress optimize images, wordpress developer, wordpress speed optimize, wordpress optimization, how to speed up wordpress, how to fix wordpress speed, wordpress tutorial, wordpress speed optimization, wordpress site speed, speed up wordpress website, website speed test, website speed

Id: zDix8THVpA8

Length: 35min 15sec (2115 seconds)

Published: Tue Apr 02 2019