Asset Cleanup Pro

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 my Homepage, and then create ones that have your branding all over it like my About Us 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 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!

Changing the load order using Asset Cleanup Pro is one of the basics of optimising your website. However, it is the most time consuming stage in the pagespeed process. A good tip is to work with your plugins before tackling the theme files. This is because it is easy to see what plugins are being loaded on the page, and to judge whether you need the files or not. Some theme functions could be less obvious and it the theme files that often cause the most errors. You may not need to load something on the whole website, apart from one critical page – and it’s easy to miss an icon not loaded, or a carousel missing etc.

So What Should I Do?

As stated there are many stages to optimisation, and this is the first one. Luckily it is also the most complex. Once you have your plugins loaded only where they need to be and are happy that everything works, I would take a new site backup. Then do a pagespeed test to get a score, note it down, and jump to another stage that is bothering you on the Insights report. Maybe try the image optimisation or plugin organizer trick if you have heavy content loading on mobile.

Another little tip that is especially useful when deferring JS files is to right click on the Chrome window and click ‘Inspect’. This brings up a window that shows all of the code loading on your screen. Now refresh the web page. If you get a little red icon with a cross on it near the top of the Chrome code window, click it. This will tell you about any errors on the page. Look at what the error is and match it up to the file names on your page. Reset what you last did (or stop deferring JQUERY if you have tried that). Refresh the web page and see if the error has gone. If it has gone, you know not to defer that particular file.

Don’t try and do everything on one sitting. Ease yourself into it, do the plugins, then the theme itself once you are comfortable with the Asset Cleanup user interface.

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.

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.