Asset Cleanup Pro
Asset Cleanup Pro is a WordPress plugin that is an optimisation toolbox. It contains a lot of features that will allow you to optimise your website down to the tiniest level. There are similar tools out there that are easier to use like Hummingbird or Autoptimize but none of them have the functionality that Asset Cleanup Pro has.
There are a plethora of options that I will go into here. I won’t give an actual user guide, instead there is a good video guide at the bottom of this page that shows you the main features. You can also read the Asset Cleanup User Documentation so there is no point in rewriting it. However, I will give you a written overview of functions and what to do to speed up your website.
The main thing is to know that you can set sitewide optimisations in one click, and optimise programs on a page by page basis. This is where it comes into it’s own. You can unload scripts you are not using on certain pages, thus reducing overall page weight.
When optimising, it is best to do it in Chrome Incognito Mode and clear your caches with every change. This is so you see the most up to date versions of your website in your browser. Also don’t forget to check your website when logged out of WordPress. The cache sometimes only comes into effect when you are fully logged out. If Asset Cleanup Pro is caching something, and you do not see it, you may not realize some code has broken.
Take A Good Look At Your Website
The first thing to do is to take a logical look at it. Are there any particular features you want to keep, or leave out? Are there any plugins running on a page that do not need to be there?
GIVE ME AN EXAMPLE
Contact forms are a common one. Many people have them in the footer or dotted around all over the place. Do you really need this? If someone was to contact you, that would go to the contact page. It’s very rare that anyone would use a contact form in the footer, so why have it there?
Contact form scripts are pretty heavy – generally 50kb-80kb and ladened with CSS. Now that little form in your footer is forcing the page to load up those scripts on every page load. Would it not be better to have your contact forms on one logical page, and only load up the contact scripts on that one page?
This is the sort of thing optimisation is about. With Asset Cleanup Pro you can go to your ‘contact us’ page, and unload the contact form scripts sitewide except for that one page. You have now saved 50-80kb in page weight by rearranging your contact forms to be more logical.
CAN I DO THIS WITH ALL SCRIPTS?
Yes, pretty much. It’s also very handy with branding. Often pagespeed means stripping your website back a little. But your brand may depend on the look and features you have on your website. So think about the structure of your website with branding in mind. Create pages that are more basic like this very page, and then create ones that have your branding all over it like my Home Page.
As long as your landing pages are optimised, that is really all that matters. Never sacrifice branding for pagespeed. It just makes your website look awful as you strip it further and further down. Getting over 90% on Google Insights is fairly easy on desktop, but on mobile it is a different story. The criteria is much stricter as the data is reliant on simulated 4G network speeds. Don’t obsess by it. As long as it loads quickly, and has a mobile score in the 70’s all will be well. Just so you know, the global average score at the time of writing is 38% on mobile.
Deferring & Preloading CSS / JS
Deferring code means to load a piece of code later in the process. Preloading, or Async means to load it at the earliest opportunity alongside other files. With asynchronous loading, the browser will process the files in tandem with other files to avoid any render blocking. Deferring it won’t load it at all until the end of the load process.
To get a good pagespeed score and fast loading times, you need to defer the loading of scripts that are not needed right away. What you focus on is ‘above the fold’ content. That is to say what you see when you first load up the page. You don’t need to load anything in the footer or images further down the page – only the content at the top.
This is where it can get confusing because it’s not always what you see that must be loaded. For example, you may have certain JS routines that have dependencies on another file. This means the ‘parent’ JS file must be loaded in order for the child JS subroutine to work. A common one that comes up in the Google Insights reports is the JQUERY file. This is a framework file that a lot of the other JS files depend on to work. You can try unloading it, but you will more than likely get errors. My advice is to keep that one loaded and save yourself many headaches. You can still get high scores with it being loaded.
Preloading has similar issues. It’s great that the files are loaded as non render blocking, but the key here is that the files download in tandem with other files. This is especially true with JS files and it can cause a few problems. This again, is because of dependencies. If a parent JS file has not finished downloading before it’s child script has started downloading, the child script cannot function causing errors.
The same can be said of CSS files, but its not going to cause core errors, rather layout issues. Most themes have a core ‘module’ file, and it contains most of the CSS code that are the building blocks of your website. This file should be kept loaded to avoid errors and layout shift problems, and it’s normally quite big. This is where critical CSS and preloading comes in, but we will go into that on the Rapidload page.
So the the thing to do is watch the video, then go in page by page and tick the boxes to either defer or preload the file from each page. If it’s something you don’t need to load at all, tick the box to unload it sitewide and it’ll be unloaded on all pages. Only do one or two codes at a time, clear cache and check it. If you do too many and it breaks, it then becomes a bit of detective work to see which one broke the website!
Unloading Core Features
At the start of the video you will notice the host is talking about taking out core WordPress features. Play particular attention to this because it is one attribute of Asset Cleanup Pro that you will not find elsewhere. It allows you to take out unused core code that can seriously reduce the weight of your website.
WordPress is so big that we rarely need anything like all it has to offer, so lets trim that down. Asset Cleanup Pro makes this process so easy as all you do is go into the plugin admin area, and little toggle switches turn features off and on. No coding required!
WHAT DOES EACH FEATURE DO?
With the font loading, we will go into that once we get to the OMGF page. Once we have finished downloading the fonts to the server, we can block all outgoing calls to Google Fonts via Asset Cleanup Pro. All you have to do is click advanced and tick the box. Don’t do it yet because it’ll only load default system fonts which look terrible!
A QUICK TIP ABOUT FONTS
In the theme options, use as few font types as possible. You can use different font-weights for headings etc but don’t use differing types. Font style files are large, and choosing one solid font not only looks consistent, but it really aids speed.
Most people can disable the XML-RPC Pingback service. This also closes some doors for attacks on your website. You won’t be able to disable if you use external blogging services, Jetpack or have an app connected to your site. However if you don’t have any of this, disable it.
Comments are pretty self explanatory. If you don’t use them, disable it. If you do, keep it loaded. The same thing can be said for EMOJI’s & Dashicons. If you use a pagebuilder like Elementor or WP-Bakery, also disable Gutenberg. This loads up quite a bit of code that is not needed. Your pagebuilder will handle it.
With the HTML source code cleanup, you can pretty much take them all off. There are instructions on the page so do read them to be sure you are not using any of the features.
If you are using Kinsta or indeed any other web host with Cloudflare, you do not enable the CDN serving. The CDN handles it already and it will cause errors if you enable it. If you are using a different CDN, put your CDN address in here. This will help Asset Cleanup Pro serve files from the correct location in your setup.
Optimize Over Time
You can come back and optimise with Asset Cleanup Pro at any time. It’s good to test optimisations in sessions so once you have certain things working, you can stop work and come back to it later. Each time you add a new plugin you can just go in and optimise that particular plugin in the way you want it to load.
Asset Cleanup Pro itself does not take too much time getting used to. What can be confusing is all this defer / preload business. One wrong move can break the functionality so always do it in small chunks so you can easily remember any changed you just made.
Once you are happy with your progress, move on to the next stage.