Full Guide To Wordpress Page Speed Optimization 2019

Full Guide To WordPress Page Speed Optimization 2019



what's going on everybody Chris here from chase Reiner agency I'm gonna share with you today some site speed optimization tactics that are sure to make Google and your users happy let's get started with it all right so I'm going to temp to make this as simple as I can while still explaining enough so that you're not a danger to your site we're gonna be focusing on WordPress and that's the platform majority of our viewers use and a lot of the other common do-it-yourself CMS is like Squarespace – Shopify and all them they can't be optimized for site speed aside from manually resizing and compressing all the images so you know if you use one of them you're probably stuck with over a four second load time so I wouldn't be surprised there and I suggest you switch but first and foremost it's important to start with a solid foundation which is hosting of course so coupler recommended hosts I like in motion hosting chase prefers sigh growl but either one are really good hosts there's quite a few good hosts out there but regardless of which host you go with you're going to want to go with VPS hosting or dedicated servers shared hosting is never recommended for lots of reasons but the main things are the size to be tends to be more inconsistent during due to server load at certain times the day or how many people are sharing that same server you also have very little control over the server and so that can be a problem too when you want to do certain things upgrade certain things and as far our site speed you know is concerned there's some stuff in this video that we're not going to cover because it's much more advanced stuff like like adding HTTP to push to your server which reduces the number of requests but configuring your servers and we're not going to go into any configuring your servers except maybe PHP versions or something like that but either way bps which stands for virtual private server or your dedicated server are your best options dedicated of course being the best one because you don't have to deal with allocated resources you know even like with the VPS hosting it's it's all yours so you get to utilize 100% of the resources on the server I also don't recommend getting any specialty WordPress hosting as it can still restrict your access and and customized ability to the server and they're generally shared servers as well so this brush technology settings go on your server you know like I said a minute ago PHP 7 you want to make sure that it's there as long as your website is compatible with it because a lot of times you can see a nose speed difference when you upgrade to PHP 7 and it's usually really easy and it's like flipping a switch or selecting a drop-down in your hosting control panel in fact I can show you a site round here's the cPanel and somewhere in here I know they'll be some PHP settings oh yeah here we go PHP version manager so let's check that make sure we have PHP 7 or above and you'll want to check the site directly after this in case it does break something then you can go right back in here and switch it back and it's usually usually safe to do so you don't permanently mess anything out by changing the PHP versions at least I haven't ever seen anything mess up yeah ok so this is already such PHP 7.1 which is great yeah and their system default is pH b7 so that's awesome a lot of hosts are still stuck with their defaults down at 5.6 so that's great that their default is set higher than that all right so the other way before starting any pH or any site speed optimizations you should always take a backup of the site since compression can sometimes break things and have what not a lot of tactics we're gonna do is kind of heavy on the and you know stressful on your site so you're always gonna want to take a backup you know I don't care if you use you know all-in-one WP migration or keep a backup backup buddy duplicator it doesn't matter what you use as long as you you make a backup of your site and it's also a good idea to have FTP access in case you have to restore like if you can't get the WordPress anymore or anything like that you can restore from FTP you know either reinstall a new version of WordPress and then restore from backup once you get WordPress up and running again or whatever it is but you want to make sure you're ready in case anything does happen so you can get your site back up as quickly as possible so keep that in mind I think before we actually cover the optimizations we should probably talk about some of the tools that will help you help you with determining what this most wrong with your site and what you need to optimize or fix there's two types of these speed tools they're synthetic tools which don't give us the most accurate metrics but they're still helpful you know in certain ways that gives you more insight than some other some of the other tools and the organic testing tools and stuff and organic testing tools they give us more accurate metrics but they may not help in the same way that a synthetic tool can so you'll want to use both in most cases so Pingdom is an organic I mean is a combination of organic and set the synthetic tools I'll show you what I mean here oops screw that up this is a hang on running test would you let me stop it hmm it actually ran that with an extra Amer is that right I'm gonna start this test again hmm number 72 in line seriously all right so while that's going GT metrics is a synthetic tool makes use of as you can see your performance course here makes use of Google's Page Speed guidelines as well as yslow which is Yahoo's guidelines also shows a priority a priority of the recommendations which is great I like this here where it says priority high low medium and so it tells you the importance of the of the things skewed and also has a relative score comparing your site to all other sites GT metric is tested which you can see right here the average page B score is 72 percent and so we're just a hair above average on both of these which is still not good enough we're running 3.8 seconds here requests are not too bad page speed a little I mean the page size is a little large but the it's kind of inaccurate in GT metrics anyway it provides a lot more accurate load times than Pingdom does but less accurate on total page size and it tends to like not to register videos which are uploaded to the site and the page sizes and the number of requests seems to be fairly inaccurate as well sometimes it's less and sometimes it's more but it's still fairly accurate on load times and and that's what would you only use it for in fact we use this tool probably more than any other ok here we go all right forms grade is e 58 load times is 3.5 3 seconds which is eerily similar to this and that's odd because Pingdom generally has much lower load times and that's the bad thing about Pingdom is the load time is very inaccurate and it helps to know how fast your site is compared to all other sites in the web penis shows right here faster than 45 percent tested sites and then it gives you some some insights into each one you've got javascript files this should be combined as few as possible combined external CSS parallelized downloads across the toast names not sure I've seen that one before okay the rest of this is pretty standard stuff painting gives you a lot of a lot of unique resources as far as that goes and here's a waterfall like most of the tools will have something like this where it shows you the specific requests that are happening and how long they take to load so this is just a redirect here and then so this should be the server server speed right here and it shows you if you hover over how long it takes for the DNS DN DNS lookup and for the SSL and the connect and they're waiting to receive and so it gives you a pretty accurate breakdown how long each little thing takes and again a GT metrics the same thing it gives you obviously these and actually when you click on them it will show you specific file URLs that are the problem URLs optimized images all these need to be compressed all these need to be cached which their parent they're not being cached right now all these are the JavaScript that is that is blocking rendering the critical rendering path of the page so if you could defer those to the end or async them then this page was loading so those things we're gonna work on today PageSpeed insights is another one PageSpeed insights isn't as much a page speed test as it is like a performance best practice tool so it gives you a lot of hints at what's going on but doesn't actually tell you like a load speed time it just gives you like percentages of you know where you fit in again here shows you the render blocking JavaScript and render blocking CSS as well server response time same stuff here leverage browser caching and optimize images and it will also tell you how to fix them and so that it's a pretty handy little tool as well and also it shows you on mobile and desktop so you can optimize for each but the most accurate tool of them all is web page test out of work this one's amazing simply because you can adjust for any any scenario for example test location of course you can have any test location from any device and so if you wanted to do like a moto G phone a nexus iPhone anything you want from any country in any main city that has has the servers for this webpage test our ggest this nova source project it's primarily been developed and supported by Google to make the web as a whole a faster place and so you can also change the browser from any browser you know Firefox ie Levin doesn't matter what browser you want to test from you can test from anyone but we're gonna go ahead and go with Chrome you get Advanced Settings you can even choose your connection speed which is phenomenal so you can try try it from just a cable standard cable connection the SL 3ge so you can have full mobile testing it's very accurate even 56k dial-up if that's what you want to test for or you can actually go to custom and actually modify your download upload speeds like and see all that kind of stuff so it's very very cool I get back off there we go so we're gonna go with a standard cable we're gonna capture the video that's with no the cool thing about this one is that you can actually capture the video as it's rendering so we gun to rim you can run as many tests as you want so we're gonna run we're going to do five tests and we're gonna start hmm supportive browser if that's my ad blocker that's disabled that I reload this chrome cable mystic five cannon capture video start testing it could be okay so here's all your test runs these still are still running apparently so we can go to any one of these and check out the waterfalls and how they differ between the different runs this like I said this is the most accurate tool and it gives you the most metrics so this is a pure organic tool so this is our actual load time our time to first byte the start to rendering it gives you a speed index which if you click on this it'll it'll share with you what that means as far as it'll show you a chart to find out where where you fit in as far as all the other type sites that have been tested and it shows more accurate requests we plot full results this should show us the graph you know this shows us a graph there's just there's just ridiculous amounts of data in these now you can like I said you can literally watch the video of the rendering okay yeah that's pretty hardcore how long that takes and then if you go into the film strip view you can actually actually choose the increments that you want to view the loading from so you can actually find out exactly when the time to first paint is like you do point 1 second intervals and you grab this and find out exactly when which is super strange usually you'll see a first paint somewhere in here but it literally waits that long and then your first paint is 100% loaded that's quite unusual but yeah you click on any one of these and I'll tell you all the information that you need what type of course static isatis Code time to first byte of each single request that there that is in there and so this this can really help you and look we've got requesting external fonts which is never a good thing anytime you request any type of external resources into your site while it's loaded then it holds up holds up progress on rendering the site and so it's never a good idea to be calling any external resources if you can help it some stuff can't be helped but most can but as you can see like each test looks a little bit different and so it has different slightly different loading times but you can go through here and check out every one of them but the main thing is to determine what's what is causing the most problems and we already know from from the other ones that we're having issues with with our browser caching server skills and SEO scaled images a deeper deeper parsing of JavaScript or a sinking JavaScript and so we're going to work on those things and see if we can't get this load time down all right first thing we're to do is browser caching so you want to go to plugins add new we're going to try to use two plugins for most of this to make it nice and easy for you guys a lot of this can be done manually through HT access file the problem I have with doing browser caching in htaccess though is that it's not quite as easy to purge the cache once you get it in there yeah so the first plugin you wanna you're gonna want to install is called WP fastest cache really the fastest caching plug-in that I know of is WP rocket but it does cost money WP fast cache as far as I know is the second fastest caching plug-in and it's free they do have a pro version which you can purchase there's a gives you a few other options and stuff but I think the free version is pretty good even by itself so once you get that installed we just go to the settings on it here okay yeah and you can just you can pretty much enable any of everything on here when you go to the preload you'll want to make sure that if you're on shared hosting you want a down on like four to six pages per minute if you're using VPS you know or dedicated you can put 10 to 12 somewhere around there the rest of these pretty self-explanatory when you read them minifying HTML and CSS this has to do with removing unnecessary characters and the code like white spaces and things like that that are they're taking up a lot of room and actually have to do with a loading time so what this does is get rid of all that whitespace and compress the files into just you know walls of code but it helps it to load faster so that's always good and combining CSS and JavaScript you know it's also called concatenation is also important thing for loading times and gzip compression is definitely important gzip compression will compress all your code files as well and reduce the size at just like it says here reduce the size of files sent to your permission from your server this plugin also takes care of the browser caching so then we just select all those and submit another point about browser caching is that whenever you make changes to your site sometimes they don't show up you'll just have to clear the cache right here you see delete cache and minify CSS and j/s because caching can sometimes show you a cached version of the site that you're not that you're expecting to see change that you made and you can see it so you'll want to delete the cache from there okay so so far there's no real danger but like I said I hope you took a backup because the next one could be a little harsher on it I go to add new now we're looking for I'll top Tomas her again stalls from an activator yeah again we're gonna go into the settings and if you use any other type of like w3 total cache or whatever and you decide to install this too I mean you'll have to pay attention to what what exactly you're optimizing in each one so that you're not just doing too much over you know but these are all okay to work with WP fastest cache which is optimized HTML code JavaScript CSS code and then you just save the changes in empty the cache I think we'll go ahead and retest this just to kind of see where we're at went out near done yet 2.1 seconds see this is a load better already because we got you know a lot of several of these other things out of the way now we got level leverage leverage browser caching good defer parsing your JavaScript which we haven't even done that so I'm not sure why that's better optimize order of styles inscription with Alan think was a problem to begin with so we're now we're pushing the to second threshold already so that's great reduced number of requests so that's great now we're gonna go back over here and make sure that we have and add new no we're gonna do with an image compression plug-in which may already be on the site it's called WP smush jeez okay so it is already active here so once you get that installed go into the smush part over here the flares just called smush now it used to be WP smush okay so yeah it still has a bunch of images that still need to be smooshed or compressed you just keep clicking the book smoosh button if you have a lot of them because I'm gonna do them all at once with the free version look it looks like we have some image they're too large and that's why they're not being compressed so we'll have to get in there and download these files reduce the size which they shouldn't be uploaded that size to begin with but almost have to download and resize compress upload then compress again with this because that's the best the best way to do it on your site is I use a site called Optimus illa and so once I upload an image to a site and I'll test to see how it's it's displayed on the page let me show you real quick for example we have one of these here and I have a not a good example surely there's one on here okay so I have a plug in here called image size imp oh yeah you can get a Chrome extension and if you just right-click on the image and go to view info it will tell you not only the URL of the page you can see if that's optimized but also tell you the original dimensions of the of the image and then tell you what it's displayed at which this appears to be inaccurate because I know it's not that wide but sometimes it is inaccurate and I don't really understand why but of course I have this other one it will also tell me hmm display image dimensions yeah see us more like it except it's not showing this this one here see this is still showing the the full width of the image I don't get that but this is what it actually is 159 pixels high strange anyway there's ways that you can tell what the actual size of the image that's being displayed and so I usually real resize it in paint.net or paint and then take it here to this image compressor Optimas illa and you just drag and drop them in here you can do 20 at a time and download them and then put them directly into your site and so it gets double compression and it's the correct size here so your optimized fully foresight speed as far as the images go after you smushed everything which doesn't look like you get smushed anything else because these are way too big yeah anything over a Meg it won't do so all right so next we can go back to plugins add new this next one should get us 102 seconds this is called a sink Jas now this is the one that's most likely to break stuff well it's so far I haven't had to actually you know restore from a backup due to this no here just now they just call it async JavaScript I guess it's made by the same company as at optimize so it is supported by them and you Steven got like a little support function aren't activated and we're going to go into with the vendor tools no settings settings yep settings acing JavaScript okay so you enable async javascript now here's the tricky part because jQuery tends to be things that breaks two things the most I mean obviously uh the ideal situation would just be apply async and just let it go because that's going to be the very fastest version but it almost always breaks something so you can try applying async jQuery excluded and then and then I always go down here the bottom of the legged donor and enable I'll talk to my support and actually I try to defer the jQuery method down here and that should be it and we're gonna try it so we're gonna save the settings and hopefully it doesn't break I'm going to open this in a new tab so we can still have this open this case we can go back to switch the settings back okay so it did break something so our blog posts are gone and this is pretty common so async isn't always the way to go but if you can get away with async it is just definitely the fastest way to do it so we're just going to do twofer let's go these settings here applied to fer jQuery excluded okay that should be good enable this defer that setting saved all right I'm gonna clear the cache on both of these just to make sure there's not going to show us the broken version okay yeah and so the defer just just basically defers the the JavaScript to the end of the page so that it doesn't doesn't block the critical rendering path the critical rendering path is anything that shows and gets loaded on the visible part of the screen above the fold so that's what we're trying to get rid of is any CSS or JavaScript it is blocking the visible part of the page from rendering so we're gonna run this a couple more times so I'll just clear the cache so I might give a high one first and then you should go down after the second time yeah so we're hitting at two seconds now and if we do it again it'll probably under two seconds and obviously this is so give me an F because we have to fix those other images on the site that were uploaded to large and so since we remove those and resize them then we'll be able to compress them all and so that's really going to help us out as well so our score is much better on PageSpeed and and why slow so that's awesome yeah so this is what we were looking for right here one point six seconds see the first time the catch was not was was still dry because I purged it but now that the cache is going real good on the site yeah and we do it again it'll probably be down to 1.4 1.2 so that's really great especially for a Divi site so you can't expect a lot better than that but you know speed a site speed optimization is not just like a one and done thing and something you got to continuously be mindful of and work on and there's a few things here that we have to address in order to get it down as per that far as we can but really it just takes a little bit of studying of the site and picking through these things and deciding what can be helped and what cannot be helped and to INTRUST try to take out them like here's a Google tag manager thing for I'm guessing for the analytics yeah so by using Google tag manager it might be taking a little bit longer there's a plugin that you can use for the the analytic script that optimizes it I think it's called optimizations or analytics optimization suite sleeping up on it real quick yeah but just by doing those things that we've already done you should be able to get your site speed down under control under two seconds so but there's several other other tactics and things that you can do to reduce your side speed and I'll show you a few more here in just a second you'll see you know Linux optimization suite I think this was called ah here here just host Google Analytics locally I think that's it or something that looks like that no that's not it something really close to that though seems like a familiar symbol it might be the same company see if I can mmm give me one second guys complete analytics optimization suite okay so it's still not showing up in the repository so you may may not be in the repository so you just have to oh guess they just changed the name it is that host Google analyst locally change the name yep from complete an ellipse optimization suite because it's cooler in my opinion Oh God but anyway if you use this plugin and actually put the analytics script into this it'll load a lot faster instead of because Annaleigh of scripts are often one of the big things that are hold people up from optimizing their site speed and getting it below two seconds so remember that plugin and that should help you optimize your your analytics script see what else is there a plugin organizer sometimes it's the order of your plugins that causes a problem as well so there you make plug-in organizer but again you can you can screw your site up a little bit with this one which is another important reason to back it up before you before you just decide to use this one this plugin allows allows you to change the order that your plugins load and that can really help your site speed as well if you're having problems getting it down because it could be your plugins just loading and in a funny order and so that can really help you we don't need it on this side so I'm not going to go through the entire process but I'm just giving you some other plugins you can do some research on on how to actually optimize with them to try to help you there's also a lot of other ones that you can experiment with like PageSpeed optimization for SEO this one here is it does a lot of stuff but this one's really good for fixing fonts that are slow on the side site down kind of like what we have going on this this site but we may not need to be able to do it since we got this Islander to second it's pretty easily but WP deferred javascript is another plugin that you can use as an alternative to async KS or async javascript but again both of these both loads are pretty harsh plugins so may consider those if nothing else is working browser hinting that's something we haven't gone over yet what browser hinting is is that it basically pre renders a page let me just see if I can try to explain this okay let's say you're on the home page and if somebody lands on the home page in the background you can have a script running that will load the next page that you think that they're going to go to so by either heatmap or through analytics you can tell what what the next page that they normally go to is I'm gonna guess on this one and say it's probably the call to action because a lot of times it is but it's best not to guess you know you because it does it does use are more resources to do so but it can be really advantageous because if I pre-render the next page that this goes to then it will automatically I mean like as soon as I click on this boom it'll be over it's just almost like I bring speed because it's already pre rendered the page in the background so let me show you how that's done that's gonna pages sleeping up on the homepage mmm no idea what it's called this car page draft draft thank you hear this come on apparently the screen record slows down my my browser a bit not to mention all these 30 plugins I got going on up here that probably doesn't help come on jeez taking forever okay so we should have a yeah here comes a doe a strips and any plug-in that will give you a header option on each page will help with this because you want to go in the head of the page and so this is its this plug-in it's not called Oh H ad script it's called as I called I almost forget the name of this thing guess I'll show you share with you with this plug-in is before let's show you how to do the pre rendering come on all right so it's called so go ad script header/footer this is the one that we use there's a couple more but this is just always the one that we've used it gives you the option to either do a site-wide head tag and site-wide footer tag or if you go to the individual pages like we are it will give you an individual header of the page thing you can add CSS to this any JavaScript or anything like that that you need to buy the page so and let's see was it when grill equals pre-render it's actually a pretty simple script and then you do your H rep equals then the site name then you go contact close that and that's it I mean this this work right here is all you need to pre-render the next page I'm not going to do it on this one because I don't know for a fact that that is the next page that they're going to go to and so I would need to do a little bit of checking through analytics to find out whether that's the right page or through heat map either one you'll be able to know what the next page is so you can look you can literally do this through every step of your funnel if you want to to where each page that you know they're most likely to go to next will always be a pre-rendered and it's more of a user experience trick you know then an SEO tactic so this is just to make it appear immediate loading if they're going a specific route so okay what else can we cover cache Foreman cache warming is another thing for plugins and they have a plug-in for this is also you use it with if you're on shared hosting the cache for anything doesn't work so if you're using VPS your dedicated hosting you can you can keep the cash warm so to speak which is like a plug-in this just ensures that nobody ever lands on a page that is not show is showing cached like you know try cache warning Oh it's because I'm already and I'm in the install plugins not in the add new my I know this thing's the repository somewhere but if you try the cash warming thing you will have to go you will have to set up Ron jobs so you have to look up how to set up cron jobs on your server about every five minutes for it to work and it keeps the WordPress sites cached perpetually fresh you know so that no one ever hits a stale or uncashed page what is going on here I have no idea what is this okay just accidentally hit that yeah here it is warm cache right here better stronger faster push forward press nice not the same thing so here it is warm cache right here it just keeps it warm all the time but like I said you have to set up a cron job for it to do it and this just it depends on the host to do all that so there's other things there's a lot of other more complicated things that you can do for a site speed such as like I mentioned earlier HTTP to push or just even HTTP to which reduces the number of requests like say your computer goes and it makes one request and then instead of just making one answer and sending the information back to you it will actually send your HTML and your CSS at the same time and so it literally cuts your requests in half and then there's domain sharding where you're actually taking parts of the website from multiple different domains or subdomains and so it all loads synchronously all at the same time but I don't know how that really affects SEO and I would think that it really affects SEO so that would be more of a user experience trick as well and I'm not sure I would trust that for SEO to be honest so and content delivery networks that's something we didn't cover CloudFlare is free even they weren't originally designed to be a CDN there were actually is a global security network but they have enough servers all over the world to create and make it a CDN and so they did that fairly quickly after starting up and it is free they have premium versions but it is free and in order to run your site through CloudFlare all you do is go in and create an account with them and once you create an account they'll give you a IP address to point your servers to and then you go into your domain name hosting it's not necessarily your website your website hosting although it might be at the same place but if you bought your domain somewhere else like it's like a cheap place you want to point it there so that your DNS settings have to be pointed towards CloudFlare in order to make it to run it through that and then it would be part of the content delivery network and so you see where all their servers are and so it'll serve from this from the server it'll serve your website from the server closest to the user that's trying to access your site and so it does make it faster and plus they have free SSL so so yeah that about covers it but a lot of hosts actually have CloudFlare integrated also like psych round probably does I would say I might be able to find it right here in the in the cPanel so a lot of them is if they're integrated like that all you have to do is activate it so that's kind of cool if I can ever get back to the cPanel yeah yeah right here so CloudFlare is integrated saw you guys click on that enable it you know and go follow the steps and usually cloud clear would just be start right up and be super easy but if you don't have that in your in your hosting control panel it's really easy to sign up and they and they just guide you through step by step of what you need to do so I think that about covers it I'm probably missing a few things but I can't really think of them right now so well I guess there are a few other things some more like instant page rendering type tactics like push state of an AJAX I'll scroll pjax it's like instant page to page navigation on your WordPress site but again that's more of a user experience trick I don't think that it helps with your SEO but that's something else that you can research anyway I hope this video helped a little bit any of you that are having problems with it and again remember these tool tools are your friend they're going to teach you everything you know and need to know to research what the problem is and how to fix it and so these tools are your friends when it comes to optimizing your site speed and I think that's all I got for now we'll see you guys later

13 thoughts on “Full Guide To WordPress Page Speed Optimization 2019

  1. Thenk you for this video.

    What are the google plugins you use? Can I find out, please?

    31:17

    I found https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm 🙂

  2. Speed up WordPress

    Swift Performance is not only a cache plugin, but an all-in-one performance optimization tool.

    For More details visit : https://swteplugins.com/?ref=124

  3. This video is like a $500 consultation. Thanks Chase. I keep my plugins at a minimum but if they make my sites faster I'll add them. I decreased my load time by 50%! Awesome Chase.

  4. What's the name of the chrome extension at 30:51 that you use to see your on page image display dimensions? Thanks for the great video!

  5. Can you please LIST all the plugins you spoke about in the video under the video space. I appreciate your hard work creating the video.

  6. Hey, would do on-page SEO for a client who had their website created with HTML code instead of WordPress?

  7. I didn't know about the prerender. Thanks for that!

    For image compression I would recommend ShortPixel. It has a web version for up to 10MB https://shortpixel.com/online-image-compression
    It also has a plugin and the pricing plans are cost-effective https://shortpixel.com/pricing

    For caching I'd go with WP Rocket, but it's a premium plugin so WP Fastest Cache is the next best thing.

Leave a Reply

Your email address will not be published. Required fields are marked *