Asset Cleanup Elementor Speeds Elementor Sites Even More - Asset Cleanup Plugin Settings

in this tutorial we're going to speed up our site some more in the previous tutorial i compared four different optimization plugins on an elementor based website and the best one is the one i started with on this tutorial these results on the left are from that plug-in that won in the previous tutorial and it's the best settings for that plugin for an elementor website and the load times 2.1 seconds on mobile and 0.8 seconds on desktop so that's our starting point for speeding up our site we're going to use the asset cleanup plugin to improve our mobile to 1.8 seconds and desktop to 0.6 seconds you might be thinking that's not much of an improvement and you're right but at these speeds you can't improve too much anyway because already going so fast but we can improve a little bit i'm going to show you how you can do that using the asset cleanup plugin if you have any questions or comments please leave them down below this video i try to answer them the best i can my name is bjorn all passed in wp learning lab where we help you get better wordpress so you can earn more for yourself for your customers and for your business if you haven't done so yet click subscribe ring the bell so you don't miss new future videos and now let's speed up our websites in a video i published last week i compared four different speed optimization plugins on this website right here and the effect they would have on load time and this is a fully functioning live website and so the site has a full array of plugins it has bloated code from a page builder and we're able to get it to load in 0.8 seconds on desktop and 2.1 seconds on mobile and i think in the in the last video we actually did 0.7 seconds for desktop this is pretty close so we're going to see if we can get it even better in this video so we're going to keep this google page speed insights page open so we can reference it later we're going to head over to the website and there's normally an image at the top here this this pulls in the most recent image featured image but i didn't add one to this most recent post anyway there are actual posts this is the the page that we're testing and there's actual content here and it's an elementor template that i built this with you can see here edit with elementor so now we're going to add a plugin that will hopefully improve our speed even a little bit more let's go to plugins and then add new and let's look up asset cleanup this is the one we want right up here click on install now and then activate and if you're installing this on a live site you might want to back up your site first just in case something goes wrong because then you can revert back to the backup if you need help with that there's a tutorial on the card up above and the description down below to help you with that and the plugin is now installed let's go to plugins list let's just see how many we have so now with that one installed we have 33 plugins something to deactivate from the last tutorial we used sg optimizer wpfast's cache wp rocket and wp.oep lightspeed cache to to test our site speed and that's in the previous video like i said and with this many plugins we still hit 0.8 second load time on desktop 2.1 on mobile see if we can do better so this asks this asset cleanup plugin scans your pages to see which scripts are being loaded and you can turn off the ones you don't need you do have to know a little bit about what's going on in your website to be able to use this properly but hopefully as i go through this tutorial it'll be clear how you can use it and hopefully it'll help you speed up your site so first let's check out the settings for the plugin itself there's an asset cleanup button over here there are quite a few settings let's just go to general settings and here this first option is selected i don't know if this is all by default i turn this on this will show list of assets in a meta box on a post which we'll see in just a minute and you can choose which files to turn on and turn off so that's pretty handy all the rest here i leave as they are the way they're set and if we go to test mode if we turn this on this will make any changes you do only visible to you the one who's logged in it will not be visible to people who are visiting your site if you turn this off then all the settings will be switched over they'll be visible to people on the front end this will allow you to test your site as you go and identify things that break and do things differently if things break things commonly break when you're combining css and javascript or removing css and javascript based on the selections i'll show you in a minute so this will keep your front-end visitors safe from those breaking things and if you're finding this tutorial helpful click the like button because that helps this video show up for more people on youtube so we can spread the knowledge and help more people with this information so make sure you click like if you like this video i'm going to turn that off because i like to live dangerously the css minify i like to minify css but i already have the other plugin doing it so we're running the plugin that we used in the previous tutorial to speed up our site so that is doing minification for us so you could turn this on if you want to but then you have two plugins doing the same thing which is usually not a good idea but if you're not using a plug-in to minify css then do turn that on you can combine css into fewer files using that option you can make inline css files using this option inline css being css that's printed right to the page it's not extremely common but it does happen and this will put it into a file which will then load faster you can defer css from loading this is a pro version option this will just load it later once there's content on the page already then i'll load the css files in and you can cache css files as well we're turning this on and if you don't know what these are there's quite lengthy descriptions for each of them and the worst case scenario is you turn it on and then you go look at your site and something's not right and you come back in here you turn it off again and things should be back to normal so there's no real danger turn things on something breaks turn them off optimize javascript has the same settings we just went through for the css we're going to keep all these off because we have like i said the other plugin doing that for us we don't have a cdn installed at the moment that'll be in a future video and these unloads is where this plugin really shines what it's basically doing is it's unloading the files of certain things you don't want to use on a page or in this case on the entire site so if you don't use emojis on your site turn this on and that won't load them anywhere if you don't use ombeds on your site you can turn this on if you don't know what own beds are here's a list of situations where you'd want to keep this turned on like allowing users to embed your wordpress articles on their site this would not be a backlink this would be them embedding your blog post on their site or if you want to embed other websites articles youtube videos tweets things like that you want to turn this on so turn that on or off depending on on what meets your needs if you want more information click on this link here and there's a lot of information about it i'm going to turn off the dash icons this is basically wordpress's version of font awesome and this basically an icon library that wordpress has if you don't use gutenberg you can probably unload the gutenberg css block library disable jquery migrate site wide it says here as a wordpress 5.5 this file's no longer loaded so this option is not relevant anymore disable site wide reply this will unload the comment reply file so if you don't use comments on your site or you use something else like discus for your comments you can turn this off or just remove the wordpress's code for those comments update all settings and the reason you do this like for example the emojis site-wide the code will be added for emojis on every single page on your site even if that page is using them or not we're seeing examples of this later on when i go through an actual post and turn things off and on on that post you're going to see code for things that are not on that page but the code's still being loaded and that slows down your site that's why we're unloading them html source cleanup we can remove a lot of things from the html source code like the really simple discovery tag this is used to discover xml rpc on your site this would be for integrations like flickr and it's also used to print or sorry to post to your site via email if you use email to post i've never actually met anyone who does that so it's probably safe to turn this on to remove this piece of code but if you do need the code back just come and turn this off i'll turn that off i'll remove this what i usually do is just remove everything then i test my site to see if it's broken or not if it's not broken i just carry on if something is broken i'll come back and turn these off one by one turn one off save it go test the site turn another one off save it go test the site until this site is unbroken and then i'll know the one that i just most recently turned off is the one that's causing the problem then i just keep that one off it's that simple strip html comments i'm going to do that this is only on the front end so when the page loads it'll take the comments out comments are used by developers to describe the code it's not needed in the source code on the front end so you can take those out save all settings here we have the local fonts options this allows us to preload fonts so if you know which fonts you're loading then you can preload them place that gives you insight into that is google page speed insights if there are fonts that are causing problems oh here's some so these are fonts that are being loaded and they're slowing things down so i'm going to preload them just copy that url there it is right there and copy the second one and put it right there and there's two things to note this is for fonts ending in dot wolf.wolf2 and ttf which might qualify here and we want to have the url look like this so we started the wp content so let's erase the domain name and then save it and that is our font preloading the other option in here for apply font display css this is a pro option so we don't worry about that one at least not until we have the pro version the plugin for google fonts we have a bunch of options here that are very well described we're not using google fonts on this site but if you are using google fonts just read through these and turn on the ones that apply and the preload option is here as well with google fonts where you just copy the url in here if you're using google fonts disable xml rpc this is the thing we talked about a little bit earlier it allows you to integrate with flickr it allows people or allows you to post to your site via email i usually turn this off disable it completely it also allows you to access wordpress through the mobile app so if you're using the mobile app you do not want to disable this file but if you're not using the mobile app you can go ahead disable it and then if there's functionality missing for whatever reason you can come turn it back on to test if that's what's causing loss and functionality click on update settings when you're ready and there are a whole lot more options in these tabs up here we're not going to go through every single in detail because they are very clearly described i know you know how to read i know you can figure out what you're doing but there's one last thing i want to show you that is the plugins manager and this is what we're going to do in a second on the page itself a page that we're going to edit but you can do this site-wide from here so if you had amazon aawp installed like i do here and you're only using it on five pages you can just not load it on any page about those five you can set that in here whereas when you go page by page you have to turn it off page by page so this is a great time savings but it does require the pro version however if you go page by page it's not required so let's go and edit the home page and i'll show you how you can turn off or unload assets on the home page or on any page using the meta box inside the editor so we find a page we go to edit we do not use the elementor editor we just go into the regular editor and this is where we choose individual files to unload or basically not load when the page loads right now there are 49 plugin files being loaded on the home page 74 files if you include the core files from wordpress that's a lot of files loading all those takes time and by not loading them you can save time and each file is explained in detail in these sections here so this box right here is dark gray as i hover it goes dark gray this is all about just this one file as from the aawp plugin which has two files which it says here so it's the first one and then this is the second one if we are not using aawp on the home page we can turn it off if you're not sure you can go to the home page and check it out if you don't know what the file does you should go find that out first let's just view the home page and we will see that there's no amazon products being listed and that's what aawp does it makes nice comparison tables and product boxes for amazon products those are not present anywhere in the homepage on the sidebar not in the blog listings nowhere so i can click on check all and that will turn off all these so unload them on the page you can also choose unload site wide but then this plug-in wouldn't work anywhere site-wide and that kind of defeats the purpose of the plug-in i think why use a plug-in if you're just going to turn it off site-wide so we're just going to turn those two off see if we can shrink this one down no we got to go one by one we can shrink each of these individually though it's worth something the easy table of contents this adds a table of contents to our pages if i go into one of these pages like this one we see a table of contents right there but on the home page there's no table of contents and so on the home page which is what we're specifically working on we can check all to turn off the easy table of contents files i think you get the idea you go through all the plugins to see which ones just aren't necessary on that page and unload those and then if something breaks turn them back on figure out which one broke it and keep that one on but it's unlikely if you know plugins do and you know they're not present and not be used on that page it's unlikely to cause a problem there are 28 elementor files this is one of the reasons page builders like elementor slow down websites there's a lot of content there's a lot of code i have to keep all these on because i use an elementor template for the home page and i don't want to break it so i'm going to keep those on and this is just elementor free i believe although you know what these ones right here we have elementor post css i believe this is css specific to this post id which is this one is 2496. so that's the home page right there but 2500 that's not the home page i should be able to turn this one off so i'm gonna turn that one off and then css for 25.89 gonna turn that one off because that's not this page so there are some things you can turn off in elementor i haven't tested that yet but it should work and font awesome i don't use font awesome on the home page so let's turn that off and font awesome five and scroll down some more amazon not amazon elementor pro keep those two turned on are those three files turned on jet elements for elementor i'm using this for the featured image banner at the very top i'm going to keep that one turned on the latest post widget i use on posts themselves not on the home page so i can check all those to turn all those off and q2w3 this is for allowing things to follow you down the page so it makes elements sticky i usually use this in the sidebar so i have something on the sidebar that'll follow you down the page but i don't have that set up right now so i'm going to turn this off social warfare provides a social sharing icons i don't have those in the homepage to confirm i can go to the home page and see they're not there so i'm gonna turn that one off i think you get the idea you go through each of these you see if it's being used on the page if it's not being used on that page you unload them there's no wp form on the page unload it we are using astra i don't know which of these i could load and unload i could turn them on individually and test them but i'll just leave all those running and then wordpress uploads directory astra information i'm going to keep that core files not going to touch those third-party css and js like google fonts keep that in there keep that there i know i said we're using google fonts earlier but i think the astra theme which we are running uses google fonts but then it loads them through your website or something because our font urls were on our website they weren't at google anyway i'll leave those turned on tag manager leave that turned on hard coded styles and scripts this is pro only stuff you'll see a lock beside all these options it's not going to touch those i'm going to update the page i'm going to come back out here and refresh the page and cross my fingers that nothing broke and if nothing broke something broke see how it looks different a little squishy this is likely the css because it's a design issue so it's probably the css from elementor so let's turn that back on if we can find it almost there here it is not the font awesome but these ones the css styles that are for different post ids but appear to be affecting the home page let's turn those off refresh the page again and now we're back to how we were earlier so that's how you fix an issue if you do have any issues that arise now let's test the speed so i ran this test a couple times just to make sure the numbers are relatively steady and they're relatively steady at around 60-ish early 60s and around 1.6 or sorry 1.8 seconds for mobile load time compared to what was before which was a 54 and 2.1 seconds that could be within the margin of error like when you re-test sites they can fluctuate that much in speed but this is pretty steady where it is and according to the last video that previously this is pretty steady around these numbers as well for desktop before we use the asset cleanup plug-in we're at 95 and 0.8 second load time and now with the aztec cleanup we're at 94 and 0.6 second load time when you're loading at these speeds before we started we're loading at 0.8 seconds it's difficult to reduce that by a whole heck of a lot because that's really pretty fast but the asset cleanup plugin definitely helped because we can we can actually physically see what we're doing we're not loading those scripts and those scripts and css files have a certain size and that size takes a certain amount of time to load so if we're not loading those then the site loads faster it's pretty logical and that asset cleanup plug-in is really helpful when it comes to that and the pro version would be even more helpful because we can do more site-wide stuff but the pro version i don't even know how much it is let's go to pricing and not the best designed website 60 bucks canadian for a basic site it's probably like 50 bucks us or 45 or 40 something anyway it's not too expensive if you have the budget for it but even with the free version we're able to get some benefit if you haven't seen the previous tutorial where i compared four different site speed plugins to find out which one was the best which was the basis for the beginning of this tutorial check that one out right here we just published it recently and make sure you click subscribe ring the bell so you don't miss any future videos my name is bjorn arpas in wp learning lab until next time keep crushing and i will see you in the next video

Channel: WordPress Tutorials - WPLearningLab

Views: 23,203

Keywords: asset cleanup elementor, asset cleanup page speed booster setting, asset cleanup plugin settings, asset cleanup plugin tutorial, asset cleanup pro, asset cleanup wordpress, asset cleanup wordpress plugin, elementor speed up wordpress, speed up elementor, speed up elementor site, website speed, wordpress plugin to speed up website, wordpress speed, wordpress speed optimization, wp learning lab

Id: kcs85I3WU1Q

Length: 20min 0sec (1200 seconds)

Published: Mon Feb 15 2021