What are CSS/JS unload rules?

An unload rule is the action that prevents a specific asset (CSS/JavaScript file) from loading on a certain page, a group of pages or site-wide (everywhere, on all pages of the website).

These include:

  • Unload on this page (applies only on the post/page that you’re editing)
  • Unload everywhere (site-wide unload of an asset)
  • Unload on All Pages of [any post type here] post type (post, page, product, download etc.)
  • Unload on All Pages of [taxonomy type here] taxonomy type (category, tag, product_cat, download_category etc.)
  • Unload on All Author Pages (this will unload the asset on all pages such as /author/john/, /author/michael/, /author/jane/ and so on)
  • 404 Not Found Page – it unloads the chosen asset to any URL that is not found (/product/product-slug-no-longer-existent, /store/custom=old-page etc.). The number of 404 pages you can have is unlimited. Any rule set on one 404 Not Found URL will apply to any other 404 Not Found URL, since the same 404.php file within the theme is triggered all the time.
  • Search Results Pages – it unloads the chosen asset for any URL that has the following format: www.yoursitehere.com/?s=[any_search_keyword]
  • Date Pages – it applies to any date archive page (/2018/10/, /2017/07/ etc.)
  • Unload CSS/JS for URLs with request URI matching a specific RegEx

Case Scenario #1

For instance, you might use Contact Form 7 that loads its files on all pages of your website and you want to reduce the bloat by making it load those files only on the “Contact” page (most common) or on any other page where you have implemented the forms (sometimes, you might need them to load everywhere, if, for instance, you have a small contact form at the bottom of your page, in the footer, so you need to be careful when applying the unload rule).

To do this, go to the “Contact” page, access its assets by editing the page via the Dashboard or at the bottom of the page (front-end) if you have enabled “Manage in the Front-end” option in “Settings” – “Plugin usage preferences”. Locate the CSS & JS files loaded by Contact Form 7 and choose for both of them “Unload site-wide (everywhere) * bulk unload” and “Load it on this page” (make an exception) like in the print screen below:

Case Scenario #2

* Unloading assets in category (taxonomy) pages are available in the Pro version of the plugin.

You have a blog that uses sliders, popups, Instagram widgets and so on, but none of this is used on any “category” page which is meant to show you the list of posts (e.g. 5 per page) belonging to that category. You can unload everything you do not need there in any “category” page by going to “Posts” -> “Categories” -> Click on any of the category titles and in the management asset list choose “Unload on All Pages of category taxonomy type * bulk unload”. In the print screen below, Gutenberg’s CSS library is chosen for unloading as it’s never used on a category page:

Case Scenario #3 (Unload by RegEx)

* The option to “Unload CSS/JS for URLs with request URI matching a specific RegEx” is available in the Pro version of Asset CleanUp, starting from v1.1.5.0.

This unloading option (based on a RegEx) is recommended when the other existing options can not provide you the efficiency you need. It can be used as an extra option to existing unloading rules for that particular asset. For instance, you might have category URLs where there are posts displayed that will never output a specific shortcode that has a CSS stylesheet behind it, which would be used on another category URLs.

You could use the power of regular expressions and if there’s a match in the request URI, then the targeted asset will be unloaded. If, for instance, taking the example that was just provided, you will want to have the CSS file unloaded on 3 specific categories, then you can do that by applying a rule like the following:
#(/category/cat-one/|/category/cat-two/|/category/cat-three/)# – “cat-one”, “cat-two” and “cat-three” being the actual slugs of the category titles.

If it’s easier, there’s also the option to add several rules for the same purpose (one per line) in the text-area like in the following example:
#/category/cat-one/#
#/category/cat-two/#
#/category/cat-three/#

This also depends on the situation. If you’re very comfortable writing one RegEx rule, it’s better than having 10 rules one per line and having to change all in case the slug of the “category” (in this example) will change. However, slugs aren’t often changed for most websites, and using multiple rules per line is at your own discretion.

While “category” is the standard slug, you might have a different slug on your website, especially if it’s not in English.

Note: Asset CleanUp is not checking for the domain name, but the request URI (for the techies it’s the $_SERVER[‘REQUEST_URI’] value in PHP). For example, if your URL is like https://mydomainnamehere.com/category-title/cat-name-slug-here/ the request URI would be /category-title/cat-name-slug-here/. As you noticed, the protocol and the hostname aren’t checked. This is keeping things simple and relative and it’s useful especially if you’re moving data (via the “Import & Export” feature in “Tools”) from a staging environment to the live website.

Other Regular Expression examples:

  • #/parent-page-title/(.*)/# – matches URLs like /parent-page-title/child-page-one-slug/, /parent-page-title/child-page-two-slug/, /parent-page-title/child-page-another-slug/, etc. – useful to match all child pages from a parent page
  • #/books/top-10-# – matches URLs like /books/top-10-sci-fi/, /books/top-10-action-and-adventure/, /books/top-10-drama/ etc.

If you have pages such as https://yourdomainnamehere.com/course/how-to-lose-weight/ and https://yourdomainnamehere.com/register-for-a-course/ and you want to be sure that only pages that start with /course/ are matched, you can specify that you want the request URI to start with /course/, thus /register-for-a-course/ will not be matched here’s how you can do it:
#^/course/# – the ^ will clearly instruct the script that the request URI should start with /course/

If you want to match the ending of a URL (not as effective because you might have query strings appended to the URL), you can use something like ($ sign):
#-here/$# – in our examples https://yourdomainnamehere.com/page-title/slug-here/ will be matched, but https://yourdomainnamehere.com/page-title/slug-here/?param1=value1&param2=value2 will not be.

The # sign from the beginning and end of the input is a delimiter and for full flexibility over your preference of using the regular expressions, the delimiters are not appended by default. You might want to use something like /best/i (with forward slash as many regular expressions are written like this) which would match “best” and “BEST” (case insensitive), etc

To keep things very simple, consider using #.

Note: Most of the time, you don’t need to use complex regular expressions at all. Strings like #(/category/cat-one/|/category/cat-two/|/category/cat-three/)#, #/parent-page/# will often be enough. Asset CleanUp uses preg_match function() to validate (true or false) the input.

Was this post helpful?