Optimizing Subscriber Sites Live - WordPress Performance Optimization Stream

all right what's going on everybody welcome to a friday morning or friday afternoon stream depending on where you are in the world happy to see everybody hopefully everything is kicking off you guys can hear i'm excited for today today is a good day it's a sunny day outside we had a bunch of bunch of rain here the last couple days i'm happy to be well i'm inside but nonetheless it's still good so give me a wave say hi in chat let me know where you're from i see john he says hope all is well same for you john elijah and amanda what's up y'all uh paul glad to see you here we're going to do just a little chit chat warm up so let me know how you guys are doing and we'll get rolling here in just a little bit i have about an hour and a half today for the stream and so i want to make sure we have a timely stream today the objective overall is going to be optimizing a subscriber sites this is tobias hass's site and uh it's for a football club a lot of improvements to be made here so i'm really excited about that we're going to cover things like hosting and um like local google fonts and a bunch of other things like that we're also going to use the plug-in perf matters to really extract the most out of this site so we'll get into that in just a little bit but that's the overall goal for today so amanda says glad it's friday me too and daniel london awesome happy to have you um i wanted to give a shout out to daniel and a couple other folks our members we have luke allen twice we have chris lee waihong uh we have taylor john tobias um jay barrios we have kyle van duzen who is not going to be here today he is out on vacation and then ceto daniel heinrich and evan so happy to have all you guys thanks so much stratos what's going on man welcome into the stream so there we go so the site we're going to be working on today is tobias so give him a little shout out in chat you can see him down there essentially we are going to take his football club site and try to get it as optimized as we can so i'll show you guys in just a minute but what i've done already is uh cloned that website from uh from his hosting i forget who it is it's not one of the big names it's not you know cloudways or anybody like that but i created a server on my cloudways account uh that's actually in frankfurt because the football club is in germany based in germany so i figured it would make the most sense to have a server based over there of course all of mine are in the us and so basically what we're going to do is just see what a hosting change can get us because i'll show you guys the page speed results here in just a moment there's tons of room for improvement just around hosting and then we'll get into the more nitty gritty optimization stuff daniel says f1 in one day yes dude let's go and we're in turkey it's gonna be such a good such a good race i hope uh such a good track i'm happy to be back there so we'll see how that goes also looking forward to f1 back in the us this year that'll be great in austin so if any other f1 fans are in the chat give us a shout out hope everybody's doing well i'm gonna check the stream levels and everything make sure we're doing good here looks like all is well so let me go ahead and switch my screen over here so you guys can kind of see what we're getting into so amanda says how'd you get the member highlights in chat so there's a little join button down there in the lower right uh it's going to be next to the subscribe button which of course you already are and uh there's a membership that you can use here on youtube and that supports the channel and myself so it is a paid function but it is kind of like a uh a member bonus so uh i'm gonna take my son to the first monster jam nice that'll be fun i've never done that before if there's a big um kind of facility there's a like a i don't know what you call an event venue about an hour from me where they do it sometimes but i've never been um okay so let's go ahead and jump right into this so here is the actual website itself so you can see that this is the version that's already on cloudways and essentially this is the server that i created so it's just a two gigabyte vulture server in frankfurt and all my other ones are in the us like i said i have a variance between two and eight gig servers what i've been doing lately in the last couple of months for client work is splitting the servers out uh so that they are basically in a two or four gig server and then that way if one of them goes down or if one of them gets some major traffic spike it's not going to affect any of the others so that's kind of what i've been doing um and so essentially we just have already moved this over so with the page speed results from before the biggest thing that you would notice is that the load times were super super long so you can kind of see it here it says time to interactive is 10 seconds it just obviously the site was very very slow so the hosting is probably going to have the biggest impact in terms of maybe overall percentage gain and the improvement but i'm really interested to see what else we can do and we'll find out then the gt metric score i changed the test server to london so it was a little bit closer that's about as close as i could get to germany the default of course is vancouver which doesn't make sense it's like on you know probably opposite halves of the world almost or nearly almost and so yeah these are our baseline results so i screenshotted these before the stream started so we kind of have a baseline and we can come back to these but what i wanted to do right off the bat is just take the link from our cloudway server and try to run that the only caveat here is that on this site there is cloudflare so i'm not sure exactly what cloudflare was doing specifically for the live site whether it was you know just dns or some sort of caching or whatever but it's not connected now so we're going to essentially eliminate cloudflare out of this particular site only you know for testing purposes that's okay actually i want to disable asset cleanup pro which is also on this site and just see what we can get so let's go ahead and run this and then i'll hop back over to chat and kind of see what's been going on so we'll let that run i like to do these one at a time i don't know that it actually even makes that big of a difference if i were to run page speed and gt metrics at the same time but i like to do them one by one just to make sure i'm not stepping on my own toes let's see stratos says jack made some tests for web hosting and digital ocean gets better results to vulture oh okay that's really interesting because i know you are uh can i not analyze this url i'm gonna run it again i don't care i'm gonna i'm gonna run it until it goes um because uh uh stratos you've been a big proponent of vulture like i have for quite a long time i've just been happy with vulture because it just works i typically don't have problems with it and um in i think i've had them for like three years now i think it's gone down one time which what is why is this not working failed document request okay uh let's go with gt metrics and see what we can do here so let me make sure the analysis is still in london so there we go let's analyze this again and let's see if gt metrics will work yeah amanda i'll be very interested to know how a digital ocean compares i i at one time had um the google service and then also i never tried amazon but i had google and i really really liked it it felt super fast but i couldn't i couldn't get around paying for bandwidth that seemed crazy for for most you know small client sites while we're waiting for this to load if you guys haven't already please drop a like on the stream while you're here i greatly appreciate it and that really does help it tells youtube that we're doing something right here so gt metrics is going to work i wonder if there's a caching or some other kind of plug-in conflict that we need to turn off maybe asset cleanup pro is causing some problems so we can go take a look at that that's why i wanted to do this live because these are the sorts of things that would be really difficult to convey in the video okay so i'm going to pull up my screenshot real quick so where is gt metrics gt metrics before so our scores before was performance of 41 structure of 92 contentful peyton was 9.9 which is the same total blocking time was 169 so we've improved that a little bit and then cumulative layout shift is exactly the same so honestly the hosting really didn't play that big of a of a difference i am genuinely surprised i thought that was going to be much more impactful than it has turned out to be so far that's really interesting actually but i want to know why page speed insights is not working so let me come over here and this is of course just a demo site so we can safely deactivate some of these plugins so i'm going to disable cloudflare and asset cleanup and then happy files hydrogen imagefy oxi extras ninja seopress none of those other ones i don't think should have any impact on why it's timing out but it might be the cloudflare one since it was giving us a configuration error so i'm gonna take this i'm actually going to just reload this page entirely and then i want to run the test again hopefully it doesn't time out this time uh good question stratos the requests let's see um did where did requests go is it in structure i don't know hopefully why is this not working of course it's because we're streaming that's so ridiculous lighthouse failed document request unstable internet i don't think that's it unresponsive server i don't think so why oh gosh it never fails i didn't have this problem before and now of course that we're live on stream never fails dude the site just takes too long to load oh well if that's the case then we can fix that um page speed insights well okay so actually one thing that i would be curious about is if we just oops i didn't mean to click something hopefully i didn't do that no i didn't okay one thing i wanted to do is just do a hard reload and see how long it feels like the page takes so i've already clicked the button and it's still thinking about it okay so maybe it's maybe it's just timing out because it's still slow yeah page speed insights is noping the hell out it's crazy i don't know why i've only ever had that one time and i thought it was just a fluke um so it does work so what else could be the problem what what kind of scripts do we have on here just gravatar there's no tracking codes these plugins are disabled advanced scripts i wonder if there's anything in there um i don't know for sure i suspect probably not but what i'm going to do is open this in a new window just to be safe i want to check what we have here so we have a gdpr youtube we have a lightbox css like box gutenberg oxygen template widget title excerpt and custom image size okay there's nothing in here that would be causing a concern so i wonder if we just try to do some optimization and see if we can pull anything out of the bag yeah a good call disable everything so i think yeah we're just going to disable everything deactivate and then we'll know run again if it's something to do with the site or if there's some other server conflict there but i don't think there would be that would be really really odd if there was seems like it's going to work so i bet it's just the the site overall so we can really pull some performance out of this if you remember from before oh yeah there we go hey look hey we're done woohoo we fixed it 100 on mobile and desktop yay good job guys no obviously that's totally unrealistic but okay so we now know that the site is um or the page speed tool can at least analyze the site so we can at least configure the optimizations and see what we can pull out of this so now i'm gonna go uh basically just reactivate everything except we don't need all in one and i'm gonna leave off asset cleanup and cloudflare so we'll go ahead and activate this stuff again why did it only put in a few of my that's annoying so apparently advanced scripts takes over your screen when you reactivate it i don't like that chrome has integrated lighthouse you are correct oh look another clean plugins one that takes over your screen that's that's actually incredibly annoying oh my gosh i've never seen it do that schedule press i don't remember if well actually i have the site open over here so i can go check on the back end and compare what plugins were active i think there was a few of them that weren't active the give and content bot were not so let me make sure that's off content bot actually is i'll come back to that in a second and so is give and then anything else schedule press was not active as well okay so seo press advanced access manager um [Music] oh good lord y'all why am i struggling so hard here activate oxygen am i gonna do these one by one deactivate content but oxygen elements for woocommerce oxy ninja oxygen gutenberg uh seo seo user access manager okay see this is the kind of stuff that i would edit out of a real video that's why i feel like live streams are just feel so much more real and kind of like more authentic okay so the give plugin we also didn't need i'm gonna deactivate that guy uh just let me deactivate it don't tell me i need a modal pop-up to acknowledge that oxy extras that was active wasn't it yeah all right so now i'm going to refresh the page just make sure everything is still good to go and i wonder if i wonder if there's optimizations to be made in the oxygen template that was something else i was going to mention is that i'm sure people if you're watching the stream and you're hearing about oxygen you're probably thinking but jonathan oxygen solves all your page speed woes well to some degree yes but then it also as you start to build out your site and add things like youtube videos and custom code and things like that it can start to negate the benefit that oxygen gives you but we can bring that kind of stuff back strata says chrome has an integrated lighthouse feature that you can use it does you're right i wonder if we can give that a shot real quick i forget how you even get to that quite honestly uh chrome oh it's the audits tab okay so inspect and then lighthouse and let's go with generate report so let's see if this works i wonder if it's going to work here and not the web tool i wonder where that is says it's computing our score so hopefully this will work if a site takes more than one second to become interactive users lose attention in their perception of completing the page there we go so it's still still working it went away still still thinking about it i wonder what it's doing here you don't see all this stuff happening on the web tool it just kind of works walmart's oh there's all these cool little like things but they go by too quickly okay so here we go the performance score says it's an 80. so that's super interesting i feel like that's way better chrome extensions negatively affected the page load performance okay so that could be a multitude of things maybe like hoverify or some of the other plugins that i have accessibility is 90 best practices is 80 seo i kind of feel like this performance score is not actually the same as what it would be on um the you know web tool because our score before was what was it page speed mobile before it was a 23 so if hosting took it from a 23 to an 80. that'd be pretty incredible it might be okay so we're going to go ahead and close this out now i want to jump into adding perf matters so this is the plugin that i think is going to have the biggest impact this plug-in i have written an article about on facebook and on my website i've used it on quite a few client sites already all oxygen sites including the premise log site to great effect and i was kind of concerned on the premise log site that it would impact the checkouts for the course but uh so far it's actually made no difference and i even did a checkout myself you know on a different system to make sure that that wasn't causing an issue so perf matters is a yet another performance plug-in yes i know but the thing is i want a performance plug-in that is super simple to configure and so oh hey kyle what's up dude welcome back or welcome i should say i know i thought you're gonna be on vacation today so kyle says definitely had hosting boost scores like that honestly it's pretty amazing i just want the damn web tool here to run because that will give us you know a really representative um all things considered it would be the same so i'm looking forward to that what i want out of a performance plugin is super easy to configure i want it to give me you know 90 95 performance in exchange for very little configuration and something like asset cleanup pro is really great but the thing that i find is there's just so much configuration you can do with that that it's just too much for me i just don't bother with it so we have perf matters installed so what you would do is of course just go to settings and perf matters and there's not a whole lot to really digest here it's pretty simple at first you kind of think oh my gosh there's so much stuff here but there's really not so i think i'm going to do what i would consider probably pretty typical for most people so emojis dash icons on the front end you don't need that xml rpc jquery migrate we typically don't need so i'm going to turn it on and we'll see if it breaks the site wlm manifest windows live writer definitely don't need that real simple discovery link tag quite honestly i don't know what that is the above link is used by blog clients if you edit your site from your browser you don't need this it's also used by some third-party applications sound like we don't need this short link link tag okay so we probably do need this because the permalinks on this site are not set as post names so i'm going to disable rss self pingbacks i'll leave this other stuff if you don't need comments you can turn those off i do then blankfavicon would mean you know like obviously your browser favicon right here if for whatever reason it goes away then it puts in a default one or just a blank favicon rather than the wordpress one coming back in which is pretty handy because i've definitely had that you know that message from clients it's like what's that w in my site so there's that so that's all we're going to switch on the general tab so we just turned on a bunch of little toggles probably not going to make that big of a difference at this point next up we're going to go to assets so this script manager is very similar to advanced what is it called advanced script manager whatever whatever the one that i just said was the one that's on this site asset cleanup pro taylor sup dude happy friday so i wanted to give a shout out to taylor so this this uh stream you know optimizing uh um subscriber sites was his idea so he's my idea man these days i really appreciate you taylor welcome to the party dude uh let's see here so if you're watching please consider dropping a like on the stream it does help thank you very very much uh so the script manager is very similar to asset cleanup pro it's kind of a front-end tool so when you switch it on it really makes no difference i will go ahead and switch it on and we can take a look in just a little bit at how it works very similar to asset cleanup pro except you can do it on the front end in a visual interface which is pretty sweet yeah drop those custom emojis let's go so then the next thing you're probably going to care about the or you know one of the things that will probably have the biggest impact is this defer javascript so this is going to add a defer tag to most javascript unless you stick it in the exclude from deferral so one thing you might want to do if you have stripe on your site is just add like stripe.js because that actually runs across your site for for uh fraud prevention so if you're really concerned with checkouts you could add the js here for stripe and then that way you can make sure you don't excuse me how many checkout issues like i said i actually didn't even do this on the premise lug site and the checkouts all work perfectly fine uh hi the only way to restrict plugins to load in all pages yeah i mean you can do it by custom code but with these plugins it's just obviously way way easier uh include jquery is something that you can turn on this is definitely a toggle will test so i'm gonna leave that off for the moment and we're gonna see if it makes any impact now the next one is delay javascript so this is a really interesting one so if your site is not heavily dependent two months let's go taylor yeah buddy uh so delay means that it's not going to load the javascript until the user interacts with the page so i was having a problem on a client site where they have this little chat widget that comes from a third-party tool they use not facebook or anything like that it's it's a different business application but it was loading stuff from aws and uh page speed insights was throwing an error no matter what i did i couldn't get it to the page speed score on mobile to go higher than like 50 and then once i turned on delay what ends up happening is when the page loads and you don't you know move your mouse or interact with the page the little chat widget doesn't pop up as soon as you move the mouse then it pops up which is so cool because you're going to need to move your mouse down there anyway or scroll to you know get it to pop up um and so that was awesome because then our page speed score jumped to like 84 or something like that so this delay is definitely something worth playing with now the thing is you could change it to delay all scripts which you can definitely test or you can delay specific specified scripts that example i just mentioned with the client i actually changed it to all scripts there's no check out you know no paid functionality on their site so that was actually really easy to do and almost everything was built inside of oxygen so there was really no worry there what i think i'll do right now is leave delay javascript off so we can go ahead and test that in a little bit so we will just save our changes here so this one is super easy all we did was just defer javascript on and that's it we'll look at the script manager in a little bit now preloading is a really cool feature so the instant page option is awesome i definitely recognize that that the instant page functionality probably has an impact on bandwidth but what's cool about this is as you hover over a link it's already pre-fetching that page for you in the back end so when you click the link it's so fast it's like scary fast because it's already done the loading you're contemplating you know maybe where you want the uh the where you want to go on the site what link you want to click and by the time you've decided that the page has already loaded and you just hopped right into it which is amazing oh no luke and taylor are here we got double trouble y'all so the instant page option is super super cool now preloading is another thing that's really useful if you have like some fonts that are preventing the page from loading or if you're getting that um that kind of flash of fonts you can definitely use this to preload or if there's a script like i mentioned that little chat bot that you need to have pop up before or if it's you know giving you the render blocking resources error then this is something you can do there's tons of different types here you can do scripts and all kinds of stuff so that one's really handy google wants pop-ups after scrolling some content or after more than 10 seconds yeah i should have said um that little chat widget i'm talking about is actually just a tiny little button in the lower corner so it's not a modal or a pop-up chris says morning from portland what's up dude welcome glad to have you i know it's early there for you still or actually i guess portland maine or portland oregon that would be opposite ends of the country pre-connect is very similar this is not actually something i've had to use just yet but this one allows browsers to set up early connections for an http request so there you go oregon nice dude sahil welcome i'm doing well how are you and then dns prefetch i actually haven't even used resolves domain names before a user clicks that's kind of crazy i imagine if you're going to like a third party site you could have it do that which would be kind of neat so really all we're going to change here is the instant page so i'm going to save that and what we'll do real quick is actually just go refresh on the front end and once it once it finally refreshes then we'll see if uh the the instant page has an impact so if i hover over this and let's say i'm like uh i don't know which one i want to go to let's go here oh no it's not as fast as it should be that's that's not that's not too bad we can get this better we can definitely make this better so yeah that that wasn't too bad there is tons of images on this page so we'll see what we can do here we'll come back to that instant page because i think it can be better so next up is the lady late lady lazy loading functionality so lazy loading is built into this so you can do images you can do iframes and videos and then this is super cool so this actually changes the youtube video element to a thumbnail of the youtube link you know that it automatically pulls in for you once you click it it brings the youtube player back in so youtube is one thing that on the premise log site specifically i had a bunch of errors related to page speed on and this is going to be really really cool so that actually fixed it that that you'll notice on the home page of the premise log site is really effective you can also exclude from lazy loading you can just paste the images in there and that will work this threshold thing is ex it accepts both pixels and percentages so that allows you to configure uh how much before the viewport it should actually load so you can kind of prevent images from popping in you know in uh like in your face essentially so i've been changing this to 25 and then the other thing that's awesome is add missing image dimensions so if we could get page speed insights to work sometimes you'll get that error message in here that says uh you know maybe it's in here no evidently not let's see [Music] is it in here uh yeah here we go so this is the one images have explicit height and width so in oxygen especially in a repeater even if you go set the images sometimes you'll still get this error message and what this does is it basically forces that to be fixed for you the downside is that there are some instances where images will kind of stretch and distort so you have to go make sure that you do have the images set in terms of height and width in the oxygen interface but we'll save that and kind of see what this does and then next up you have the font so you can actually disable your google fonts if you want you can also locally host your google fonts but this isn't my preferred way to do it i think this is totally viable if you want to do it this way you certainly can but i just prefer specifically for us oxygen folks the matthias altman you know locally hosting font solution which we'll do in a little bit so you also have a cdn so this would be kind of a third party cdn they don't provide one for you but if you have cloudflare or something like that you can pop that in and then you can also add your google analytics and some other insights like you know monster insights and amp that's not something i've done but might actually switch to i really like this plugin and so far we've used it on quite a few different client sites so we have kind of our general setup here what i want to do before we try to test in pagespeed insights is go ahead and use matthias altman's local hosting fonts and see if we can make any impact there so uh let's see it is altman there we go i'm just going to go straight to this so i have a full tutorial on this if you guys have seen it before this is going to be kind of a refresher but essentially this is just a code snippet that finds locally hosted google fonts and then it adds them to the oxygen builder interface for you so you don't have to worry about it um essentially we are going to go to let's see there is a web font loader tool so here in his article you can see there's this link and on his website he has this link if it will load hopefully this is not my fault there we go you would just essentially search for the name i don't know what the fonts are called on the site but if you just search the google font lotto then you can go ahead and download the entire file right here which is super cool let's go ahead and take a look at what some of these fonts are in fact i'm going to use hoverify i don't know if you guys can see there we go so we have montserrat then barlow is that our only two here so barlow monserrat uh let's go check another page just to be sure i'm gonna go back to the home page we definitely still have room for improvement taylor says about to start driving have a good weekend yeah dude thanks you too hope everybody has some fun plans for the weekend uh there's still still plenty more still plenty more improvement to be had on the page speed front but also one thing to consider is that i'm obviously in the us and the server this is hosted on is in frankfurt so it's a long way for me to connect to this site so that could be having an impact as well tobias says only these two fonts okay perfect so what we're going to do is search for barlow and then i will download this guy and then we have monsterat which i bet i probably already have downloaded and i do yep you can see i get the one right there so what i need to do here is just extract these fonts and because this is outside of my browser it's not going to show this to you but what i'll do here is close out of this then we actually need the script itself uh i always forget where it is so this is the code snippet itself we could pop this in advanced scripts uh which we are going to do i've actually not imported one to advanced scripts before i've always just used code snippets um so we just downloaded his script and then let's go to where is it tools advanced scripts and then how do you import is it this drop exported json files here alright so we're going to take this and pop it right there oxygen custom fonts so there we go there's nothing you need to do with this you actually just import it you just save it and then you're done with the code snippet portion so then the next thing you would need to do is actually get those font files that you had into your website so typically i would do this with ftp you won't be able to see the ftp so i'm going to do it a way that i typically am not super comfortable with which is just getting a file manager plug-in if you use one of these i definitely recommend you disable it as soon as you're done because they i feel like they have they basically open up a giant gaping hole in your security on your site so just keep that in mind but this will be nice and easy once we can actually get to it activate i think i clicked it i think we'll see come on now while we're waiting does anybody have fun plans for the weekend i'm gonna be just chilling at home with my son not a whole lot going on all right then uh now we have the wp file manager so we can go inside here and then we need to browse to the font directory so we're going to go wp content uploads and then there's a folder in here called fonts and you just need to drag your fonts into this folder it's going to automatically sort them and organize them for you so how you do it is not all that relevant so what i'll do is go barlow then latin and we're going to go with this so i'm just going to drag the font files right in there i don't even need to organize them because the script automatically detects them and sorts them for you which is so cool okay and then i'll go with latin again hopefully the latin font is correct i don't know if it's latin extended for any kind of um you know german characters but i think i think we'll be solid here hins night saturday i should know what that word means amanda but i actually don't what is a hin's night hey uh edgardo nice to see you stratus yes i do he's nine years old growing like a little weed okay so now we have the fonts installed and what we're gonna do is go actually first of all i'm gonna go disable this uh this wp file manager plugin because like i said i don't want this on the site so we're going to close out of that and get it gone and then we're going to go with oxygen and templates and we need to go change our global fonts real quick so uh let me try to find there it is right there main template we'll edit this with oxygen bachelorette gotcha okay i i figured that's kind of what it was something along those lines that sounds fun hopefully you guys have a great time hope the weather is good 3.9 beta 1 is available you're right it's very similar to the alpha except it should be a lot more stable getting pretty close to a release candidate i would hope so we can actually use it on live sites which would be awesome i'm definitely looking forward to that we got 34 people watching so thank you guys hope everybody's having a good day oh also it's gonna the 3.9 alpha improves page load speed for the the um oxygen editor itself which is cool and then drag and drop is supposed to be better so we're going to go with global styles we're going to go with fonts and then we have monsterat and we have barlow the thing is with the way you tell the local font is by it being blue the name of the font being blue so i don't actually have that did i i haven't used advanced scripts that much i wonder if perhaps i didn't actually activate the script that is entirely possible uh where is it oxygen custom fonts oh is it in here twice did i accidentally load it twice or did maybe he already had it yeah i did i did have it in here and i just didn't turn it on okay so that's new i didn't know so i'm gonna refresh oxygen again sorry about that so we haven't even done another page speed scan yet i'm hoping once we get this local font installed we can rerun it and maybe uh the page speed tool will actually work and then we can go ahead and uh start knocking out some more problems i anticipate it will run but i don't want to speak too soon yeah i need to start using advanced scripts because i bought it but um it's just not a tool that i've gotten out of the oh tobias already had it i noticed yeah now that it's in there twice but at least i got to show how it works so we're going to go with again settings global styles fonts and now you can see when the font is in blue instead of in white those are the local fonts so it's just super super easy we're going to just change this display font to monsterat and then the text font to barlow and it's not going to change anything because the you know the fonts are exactly the same but i thought i thought it made it blue right here evidently not so we will save this and then i'm going to get out of oxygen entirely and let's go ahead and try to run the page speed scan again so i'm going to take this url we are going to go back up here i'll just paste it in again and then analyze please work uh well i'm gonna close my eyes somebody tell me if it works or not ah please i'm peeking please work 78 79 80. oh unable to reliably load the page you requested what about this is not working properly uh why would it just not work so weird okay well let's do this let's go with our assets tab and then before we do the delay javascript i'm going to try to rerun the gt metrics performance tool and see if this will actually run and see if this is making any impact maybe there's something else yeah it could be cloudway's domain problem but i don't think so maybe i need to attach a domain to this i think i probably have a demo domain i could use that's actually a good idea okay let's do that so i am going to make a sub domain on the premise leg site real quick uh yeah lighthouse and inspector does run so i bet it is probably a domain issue good call on that one okay give me just a second here i'm gonna go make a subdomain let's see the interface is a little different so we're gonna go with tobias and then uh what is our there's not really a whole lot that's changed there um here is our ap a true elijah yeah good call yep i'm gonna stop the domain thing is yeah you're right you're right so with that in mind gt metrics ran but obviously it's not it's not that improved and in fact this metric went up um i feel like what i'm going to do is let's go ahead and just turn on delay javascript and i'm going to turn on delay all scripts and see what happens i think that's going to help so what i'm going to do here is i'm going to go with a hard reload and then i'm not going to move the mouse and let's see if it's faster so i've reloaded it no it doesn't really feel faster i mean it works so there's some sliders here i wonder if those are third-party components is this oxy extras i wonder if it's one of those yeah interesting so i don't think the delay javascript is going to have any impact quite honestly i am going to rerun it but um trying to think of what else it could be it's got to be a plug-in conflict because it ran perfectly fine and obviously gave us a hundred so i don't think it's the domain maybe it's one of the third-party plug-ins maybe there's some weird conflict going on i've never i've honestly never had the page speeds insight page speed insights tool fail more than once i've just reran it immediately and it gave me a score so yeah gt metrics waterfall just says well it's very clear there's one component of this that's taking forever oh sorry i keep scrolling i'm trying to get back to where it was this says nine seconds but those milliseconds don't add up to nine seconds hmm is it dns i wonder if it's oh are we about to get a score 99 please don't fail please don't fail okay there we go so there is our first uh successful test in a while um so let me look at my thing i'm pretty sure our score was at 24 if i remember correctly from before it was page speed mobile before was a 23. so let me compare some of these numbers so first content full paint has gone down it was 3.2 now it's 2.9 our time to interactive is now 6.1 and it was 10.3 so then speed index is essentially the same it's 19 before total blocking time is down from 6 000 milliseconds to 2800 um cumulative layout shift is the same large contentful paint is down just a little bit but we still have reduce initial server response time why would that be it's on a decent i mean it's only a two gig server but it should be fast there's nothing else on this and then it's taking nine seconds that's crazy i don't believe that so what would be blocking this let's use the um script manager real quick and see if it tells us anything that's loading on this home page that might be part of the problem because i wonder if we could we could delay we already have delay javascript on so we have oxy ninja we have imageify fluent forms that's a good thought amanda yep oxyextras we have seo press oxygen we have some other scripts so here's a cdn we're pulling some js in for some lightbox stuff and then the this right here so this js is also third party so i i kind of feel like it's not the lightbox one i kind of feel like it's probably this one so i'm just going to turn those off i'm assuming this says confirm or save yeah okay cool no disable location selected um overall is that everything i'm assuming that's everywhere uh let's see i feel silly having to translate this but i'm gonna do it oh no i'm not japanese english all over okay so we're gonna have those disabled all over i think this is probably going to break the site but let's take a look and see might not make much of a difference oh now it doesn't even want to connect thank you mark okay so the site does work but still took a while to load so i feel like maybe that's not the problem now i don't need another extension already got enough of those okay so we're still having the same kind of uh super long load here why does this just take so long it's got to be a plug-in okay so what i want to do i'm going to go ahead and disable some of these plugins let's just go with like maybe one or two at a time so i kind of don't think it's fluent forms but just to be just to be clear i'm going to disable these three so we got fluent forms disabled i'm going to hard reload and i feel like it should already have been responding to a hard reload by now seems uh seems sort of faster i'm gonna leave them disabled so we're gonna go with happy files uh doubt it's happy files because that shouldn't be doing anything on the front end i hate to test these one by one because that's going to take us a while but i kind of feel like we have to sort of rule it out okay so happy files definitely wasn't it i wanted to test it just to be clear that made no real difference hydrogen pack we're going to deactivate that bad boy again i highly doubt it's hydrogen pack because that's an oxygen builder thing but you never know maybe something crazy is going on again nope no real impact this is exactly what i would be doing on a real site if i was having this problem i'm going to go with something that would actually have an impact on the front end let's go with oxi extras i kind of doubt it because obviously that plug-in is great but we'll just see here no oh uh let's see so are those sliders oxy extras i think yeah okay so there it is there are there are some things that are broken on the site now um so we'll come back to that in a moment seo press i feel like probably shouldn't do it let's see if maybe anything has changed so reduce initial server response time was 9.6 seconds so we have a few plugins disabled i want to see if anything changes it's got to be one of those third-party javascript libraries i would think i also wonder where that script is loading yeah 2-0 i was thinking the same thing once again it timed out so it's got to be some other script custom image size we have excerpt foosball.d api you think it's seo press to buy us okay it's your site i'm going to give it a shot then let me go come down here i'm going to disable seo press we're going to deactivate refresh oh dude yeah look at how fast that was i'm going to hard reef i'm gonna hard reload in three two one yeah that's it seo press wow so let's try to rerun this scan that's wild if that's the case people people love seo press right i don't use it personally but i know aren't people like always going on about how good it is look at that 84 now the test runs and our numbers are honestly really good 95 on desktop and 84 on mobile that is wild dude there we go that's so so what is what is it about seo press that's not working that doesn't make any sense rank math yeah that's another one i feel like people love okay so so um tobias you went ahead and disabled that plugin on the actual live site so now what i want to do is go back to page speed insights yeah elijah i did not either that's really wild so we're gonna compare what the live site looks like with everything else exactly the same no none of the changes that we've done on this staging site tobias went ahead and disabled the plugin i believe he said i don't know if you turned it back on i want to double check real quick just to see if we get a reliable page speed score and yep okay it's disabled damn dude look at that so we only have a very very minor change well i should say it's better it's definitely better but look at the comparison so this is the live site with just seo press disabled and then it's at 75 so first contentful paint's 2.9 total blocking time is only 100 milliseconds we were at 9000 before and then time to interactive is 4.5 so then on our demo site with all these other changes there's still some things we need to go back first content full paints 2.9 time to interactive 2.9 total blocking time is zero milliseconds still getting a warning about reduce initial server response time but i feel like with the combination of like cloudflare and a couple other things you could definitely make that go get better let's see so we also have the fonts here so we actually didn't disable the fonts in our install that was one thing i forgot to do so you can of course in perf matters like i already showed you guys disable your google fonts in there but the way that i've been doing it is going to our settings and then our uh where the hell is it uh bloat eliminator oh there we go if i can actually click it and then you can go with disable google fonts and save because of course now they are loaded locally and then uh we would go with yeah cache yep good call jaden i could enable the cloudways varnish cache and see if that makes any impact so we should be able to save 780 milliseconds according to this now that our fonts are disabled so if we re-analyze our test server we still have a few things to turn back on and here i am uh blaming it on your uh your foosball api i was thinking tobias that's my that might be what it was but turns out it's not so 93 dude that was the only thing we disabled was google fonts are you kidding me that's unreal that is ridiculous so we still have 1700 milliseconds for reduced server response time so we can fix that but 93 on mobile and 98 on desktop well actually let's go get a more realistic uh situation here so we need to turn back on fluent forms we need to turn back on happy files hydrogen pack and oxy extras still have a couple other things uh yes i did flush cache in fact there is no caching turned on on this server this is this server has nothing else on it except this site all in one wp we don't need that asset cleanup we've had that disabled the whole time anything else i'm forgetting here seopress is still disabled uh what else did we i forget wasn't there something else i did trying to test this let's go take a look at perf matters um assets we have defer javascript and delay delay is definitely something you need to test because i also turned on the beta delay all scripts preloading enable instant page now we can actually get the preload instant page working because it's going to be screaming fast the other thing i wanted to mention real quick to everybody watching first of all thank you guys we have 35 people watching if you don't already have perf matters there is a link in the description for you to grab that it's an affiliate link but it does give me a small kickback i very much appreciate it and if you haven't already liked the stream please do amanda lucas says all scripts off uh sorry what do you mean i maybe i missed something all scripts did you mean in um advanced scripts uh did i turn off anything else gsap is off oh oh um on the home page i did go disable two scripts in the perf matters uh script functionality you did yeah yeah yeah good call so we'll save those hopefully those don't make that big of an impact uh is this exit turns out i know german you guys didn't know that did you okay so good call amanda thank you for that help so we got those scripts turned back on so everything should be just about functional on the home page now yeah i don't see any more errors so now let's go retest so we had 93 and 98 analyze i wonder if it's going to go up or down from that 93 i suspect slightly down yes jaden i did i did remove the ftp plugin i never ever leave those on the sites i only use it temporarily and then i immediately delete it michael what's up welcome to the party 91 okay i'm not mad at that 91 is still absolutely exceptional so we have 98 on desktop and we have 91 on uh on mobile so here just to compare let me see if i can pull up uh can i put this in a tab yeah all right so let's look at this this is the screenshot from before i didn't do a full page oh yeah i did hold on one second sorry so doo doo doo doo doo all right so here we go uh this was the test on the live site on the existing server so here's kind of the improvements that we've made so we started off on mobile on a 23 score time to interactive was 10 seconds total blocking time 6 000 milliseconds and cls was a 0.01 and now we have time to interactive 2.7 cls is ever so slightly higher blocking time 130 milliseconds but we have a score of 91. so let's go hard reload real quick and see how fast it is now bam look at that it's actually a functional site now wow now the other thing i wanted to show you guys was the instant load uh functionality so let me go back over here to perf matters just to make sure you guys know what i'm talking about so we have under pre-loading we have the enable instant page function so this is basically pre-fetching a page when you hover over it so if we go to something like this you're like hey i think i want to go to this page look at how fast that is oh whoo so good it's actually functional oh so uh there is seo press breadcrumbs there that uh aren't working obviously because we disabled that plugin looks pretty good console errors do we have any negative no console errors would you look at that if i load the home page still no console errors let's go that's awesome uh also let's rerun our gt metrics scan real quick so i want to take a full page screenshot of this real quick i'm going to go to responsive capture full size screenshot so now we have that and then i want to rerun this test so we had a i'm just going to keep these numbers in mind 37 and 92. we'll see how this works this has actually been really really fun this was kind of uh an interesting challenge i kind of expected it to be turning on some toggles and it would just work but it's working really really well uh jaden the live site is fc conexpeld.de pop it in chat so you can take a look yeah good call amanda uh where did gt metrics go that was our thing here it is wow look at that it's all green it's all pretty in green oh my gosh so there we go so it's only at 1.5 seconds now time to first bite is still not super great but i mean it's obviously you know a thousand times better than it was before um so to compare i have the gt metrics screenshot that i did on the current live server so there's the numbers 41 and 92 contentful paint was 9.9 seconds blocking time 169 and cls of 0.02 now we have a zero millisecond splocking time cls is still the same but we have a 90 on performance so it's about as good as it gets but yes i agree with everyone who has said we should go ahead and test turning uh seo press back on time to first bite is gonna come down to server and uh caching so we can turn on varnish in just a little bit and see if we can fix that but i would also actually i would have put this on a vulture high frequency server but the difference is that the the server location wasn't available in frankfurt for high frequency which is what i wanted because of course this is a german football club so i'm going to turn on seo press and seo press pro and it probably will detonate our speeds so i'm going to close these tabs i'm going to reactivate these two amanda have you had problems with load times on any of your sites with seo press i'm really curious to know now all right guys so here let's check this out we have it enabled on the front end yeah look at that it would have already loaded by now it would have been done already so seo press is definitely the problem i'll rerun the scan real quick and see if we can get it to to bug out again so analyze that kind of crazy oh wow amanda that's crazy so yeah you'll definitely have to check that all right let's see if let's see if the scan works i have a feeling it's not going to there wow look at that dude it can't even run that's crazy yeah that's a good uh thought stratus we can actually check the plug-in settings here this is not a plug-in i'm particularly familiar with uh yeah i don't know what any of this stuff means i highly doubt there's anything in here that would just bork the site as hard as this has that is wild dude 10 seconds down to like barely two that's a monumental increase really wild okay well i think we've solved it so um actually you know what one more thing i want to do oh 404 monitoring is that what it is where's where is that advanced i don't know where 404 monitoring is if you can tell me where that is is it pro 404 enable 404 monitoring save oh i can just disable the whole thing okay there we go save i'm going to leave redirects alone because i want to know if it's this 404 monitoring thing so we've changed nothing else let's try to rerun we'll see if that has any impact it would be kind of wild if it does i wonder if it's 404 if it's a problem with maybe oxygen maybe it doesn't like it with oxygen for some reason but surely other people okay so that's not it it failed again and then uh with the 404 off i'm gonna refresh hard reload yeah that's not it definitely not uh one other thing i wanted to test was if we disable perf matters and let me let me do two things real quick here so i'm going to go ahead and disable seo press entirely deactivate so those are now deactivated right yes so seo press is off so what i wanted to do now was go to perf matters i'm going to go to tools i am going to export the plugin settings just in case then i'm actually going to go disable perf matters and let's rerun the scan so we're going to deactivate perf matters is now off and let's rerun the scan to see how big of an impact it actually made if anything or if our problems and our performance gain came uniquely down to to disabling seo press damn this has been a good stream this is awesome really enjoying that okay so it does actually make a substantial impact so it was at 65 on mobile and we took it all the way up to high 90 or well low 90s i should say desktop it really doesn't make any difference for um because it's already just so good but desktop is at 65. so yeah it still does make a very substantial impact so i would highly recommend you use perf matters because like i said i am going to do this on every single site okay so just deactivating it doesn't actually change your uh your settings which is good one more time just because i love seeing that pretty green i'm going to rerun it again yeah good call we did local localize the fonts you were absolutely right create business email use google business use g suite it's the best one there is there's no doubt all right so there we go went from 65 to 90 with perf matters so i am very very happy with that so what do you guys think will you use this plugin is this something you're going to go check out do you use seo press are you gonna see what this is um glad to see all this on stream yeah dude me too this actually worked out beautifully this was like a perfect learning experience totally uh yeah i feel like there's something that seopress could do to fix this because whatever it is shouldn't be shouldn't be breaking the site for nine seconds but it is it is concerning um i've always used the uh uh wp mu dev what do you call it smart crawl and uh i never have i don't have this problem but then again i don't have a 90 on my agency site i think it's like 84 or something like that still decent but not that great the other question is i would love to know if a if a high frequency server or a faster server would make a better impact because we still have this reduce initial server response time of two seconds which in my opinion is way too high i would want it to be substantially more than that we still have serve images and next gen formats there's only two of them so you could probably be changing these to webp or something like that we do have a couple render blocking resources what are these so this is oxygen css caching is there do we have css caching on in oxygen settings uh yes okay interesting properly size images there is apparently an image that's too big for its spot oh yeah try with varnish good call let me turn that on so we're going to go with application varnish on this is typically something i keep off on any uh e-commerce sites but on most just standard sites i do turn it on it is kind of annoying when you're working in oxygen sometimes because things just like don't pop up on the front end but you come turn it off it works then you can come turn it back on amanda definitely reach out to me let me know what you find let me know what you find on the results with your your own testing so let's refresh this real quick that was a hard reload so now i'm going to just go to a different random page and then back to the home page so there we go now it's working and i assume we're probably going to need to run the scan twice now the varnish caching is on so we'll we'll do it twice just to be sure vikas says when cache is enabled time to first byte and server response time will drop okay sweet we'll definitely check that out while we're waiting for this please drop a like on the stream i appreciate every single one of you watching holy crap it's a 96 oh my gosh that's crazy so yeah that's down you're right it dropped nearly what was it like 800 milliseconds off that is wild dude 96 and 98 holy crap that's freaking insane i'm gonna run it one more time so we can take a kind of an average so 96 and 98 run it again and then let's go run gt metrics on this one more time i want to see what they have to say this is sick i i love this stream i'm gonna do another one of these this is awesome hopefully the other ones go as uh you know smoothly as this but the challenge for this has been super fun preload lcp and you'll see even better results let's see here i mean i don't know how much better it can get it's 96 and 98 that's that's wild i would be just so happy with that so there's a 90 and a 97 i'm assuming there's going to be some variance in uh your server response time yeah so i'm not sure exactly what vikas means by pre-load lcp uh so like are you talking about in perf matters can you do something with the preload there tobias says so fast thank you you're so welcome dude really appreciate you thanks for reaching out and and uh let us letting us use your site on stream so in here is there a way to find what is the uh lcp he means preload of the banner image or the largest image ah so like essentially are you talking about like this image and its background uh oh this what is that i don't know what this is oh oh oh okay okay but it's saying it's the tagline so do i need to pre-load the image itself is it this am i going to take that image and preload this is that what it's saying where did it go because it just has a little red bar i can't really tell what that is can you can you uh preload an entire div like that i'll see what vikkis has to say thanks for your help dude it's been awesome uh i want to check that out see if we can get that preload to work and see if we can get the the response time and the lcp down a little bit and then we'll go from there what was the lcp three seconds yeah it's the bottom of the hero oh like all this stuff the tagline okay this right here so then what exactly do you do with that fck match data so something about this in perf matters it's not a document right but like it's not a it's not a url source so what exactly do you do with it then try preloading that font don't we already have that though what fun is it it's barlow we already have that local i mean honestly it's it's so good like i'm not even worried about it uh i use eth s3 plug into the images the lcp is probably the background image google doesn't always give you the right one in lighthouse okay well why don't we try that real quick i want to i want to try that i have the image right here so if we just go slash wp content and then our preload is going to be an image so do i need the full url or can i do a relative i wonder uh i'm gonna just try it as a relative url i wonder if that breaks anything nope seems all right we'll just scan it one more time and see what happens so vikkas you you clearly are a performance expert that's awesome or at least it seems like it this is so cool hope you guys have enjoyed this stream i certainly have so 92 lcp is down slightly but not actually that much uh so maybe i did it wrong but that is not something i would even worry about like i said at the very beginning of this stream for me this stuff is like if i can eke out 90 95 with very simple changes like we've done here that's exactly my goal i'm not going to sit here and try to you know get this to like 99 every single time i just think that's like completely insane and unrealistic maybe if you're addicted to page speed you could totally do that but um i just don't think that it's worth the time to try to get every single bit out of it yolmstead hopefully i'm saying that right so the only thing you have to be careful about is if they use a different image for mobile you can preloading an image that doesn't even appear yeah good call totally preload that font i want to see you achieve 100. well it's hosted locally right so it wouldn't make that big of a difference um so am i just going to go with font and then it's slash wp content slash upload slash fonts slash uh what would it be can you do i don't remember the font directory exactly or what it was even called i'm assuming it's barlow what is it what font weight is this guy um barlow 800. so is it slash barlow 800 i forget bruno you're so welcome thanks for hanging out in the stream the whole time i'm gonna go look at what the exact font name was real quick it's barlow hyphen 800 dot wolf 2 or waff whatever i always say wolf it's waff woff two you need the full url okay uh so there's our preload for the font hopefully that font url is correct barlow 800 that's what i'm after right i believe so so preload let's see if this makes any difference any visible difference on the front end seems pretty screaming fast to me here we go this is going to be our last scan because uh this is getting to the obsessive portion of what i was just talking about so 92 and we're going to call it done after this 68 70 ah good call you can filter by fonts and see the direct url 74 what we can't end like that what happened what did we do wrong 98 i don't know what i did i'm deleting that i don't care i'm done we're gonna we're gonna end that and scan one more time i'm not ending on a 74. oh dude vikkas i should have rerun it again okay whatever i'm not too worried about it like i said let's see what let's see if we can pull off here give me the green give me the 90. that's all i want one more come on now it's like i yay there we go 93 let's go 96 on desktop i'm done we're calling that done so just to recap we started at a 23 on mobile then once we disabled seo press that brought us up to what was at 65 and then now with the perf matters optimizations we're all the way up to 93. so like i said if you haven't already used perf matters definitely click the link in the description below to take you there it's a fantastic plugin i think i paid 150 bucks i'm pretty sure that's what it costs for the or at the current time for um however many sites i can't remember if it's unlimited or like 100 or something but it was enough plenty plenty for me and our client stuff jayden you're right yeah right when you say last one it'll throw you for a curve you're totally right dude um bruno that's a good question i don't have any familiarity with s3 at all um i just have always used cloudways and it's just super easy and you know consistent so that was the most important thing to me that's why i just kind of stuck with it so nonetheless i hope you guys have a wonderful weekend thank you so much for uh for joining the stream today we're definitely gonna do more of these drop drop a thumbs up in chat if you guys want to see another one of these performance streams this was extremely fun this is probably my favorite stream to date that was really really fun really like interactive with everybody and i just genuinely appreciate every single one of you guys every single person here and anybody watching after the fact thank you so i'm gonna drop a thumbs up in chat because that was fun for me so i'm gonna totally do that you guys rock everyone have a wonderful weekend i'm signing off i am gonna go to lunch and uh really appreciate every single one of you like i said all right guys have a good weekend i'll see you later bye-bye

Channel: Permaslug

Views: 1,064

Keywords: perfmatters, optimize wordpress site, page load speed optimization plugins

Id: 8nkXAs54NWM

Length: 81min 2sec (4862 seconds)

Published: Fri Oct 08 2021