What are load exceptions?

Method #1 (Make exception per page)

There are cases when you want to unload an asset on a specific page type or site-wide (on all pages). For instance, you might use a Contact Form script/plugin that is loading everywhere, but you need it to load only on the /contact/ page.

That’s where “Load it on this page” is useful.

Case Scenario

The popular plugin called “Contact Form 7” is enabled on your website and it loads (at the time of writing: 10 October 2018), 2 files:

  • /wp-content/plugins/contact-form-7/includes/css/styles.css
  • /wp-content/plugins/contact-form-7/includes/js/scripts.js

If you need this only on /contact/ for instance, it’s recommended to unload them on all the other pages. Even if you combine them into other CSS/JS files, you still end up with larger files to download and we want your website to be as lightweight as possible so visitors will have a faster loading experience.

To do that, edit the “Contact” page, and select “Unload Everywhere” for “contact-form-7” handle for both CSS and JavaScript. Then, make sure each of them has “Load it on this page”. Click “Update” and the styles and JavaScript will only load on the “Contact” page 😉

If you happen to have other pages where you will implement a contact form, then edit those pages and apply the same “Load it on this page” rule.

Note: “Load it on this page” rule is only relevant when you use a bulk unload rule (e.g. everywhere, for all product pages, etc.). If you do not use any unload rules, the asset is loaded anyway on the page, by default.

Method #2 (Make exception if the request URI within the URL matches a RegEx)

This feature is available in the Pro version starting from v1.1.4.9

There are cases when you want to unload an asset everywhere (site-wide), but keep it loaded on a few pages or a group of pages. That’s where “Load it for URLs with request URI matching this RegEx” is useful.

Case Scenario #1

You’re using WooCommerce and you know a certain CSS/JS file is needed only on the product page. To do that, you tick the “Unload site-wide (everywhere)” checkbox and “Load it for URLs with request URI matching this RegEx:”. In the input, you can just type “#/product/#” (a string is enough, no regular expression needed in this case).

Any URL (request URI to be more precise which is anything after the hostname) that contains “/product/” will load the CSS/JS file. Anywhere else, it will be unloaded. For instance, it could be a jQuery plugin that is needed for a lightbox gallery only shown on the single product page. Or a CSS file that is needed to style the customer reviews shown only on the product page, etc.

Case Scenario #2

You’re using a plugin that generates surveys and you know that the URL will always contain words like “survey”. However, you also need that plugin on a few other pages such as “Contact”, “Feature request”, “Book a reservation”. You want to exclude all the plugin’s files everywhere (site-wide), but you need the files to be loaded (as an exception) on the pages that were just mentioned.

You first tick “Unload site-wide (everywhere)” and “Load it for URLs with request URI matching this RegEx:” checkboxes, then the input value for the later choice will be “#(-survey/|/contact/|feature-request|book-a-reservation)#“. In this scenario, it would be any page’s URL that contains “-survey/” (it could be the ending of each URL having a survey form), “/contact/“, “feature-request“, and “book-a-reservation“).

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 examples, if your URL is like https://mydomainnamehere.com/product/shoes-12-size/ the request URI would be /product/shoes-12-size/. 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:

  • #/product/(.*)-size-12# – matches URLs like /product/nike-size-12, /product/adidas-size-12, /product/puma-size-12#, etc.
  • #/clothes/(.*)/children/# – matches URLs like /clothes/jackets/children/, /clothes/shirts/children/, etc.

If you have articles such as https://yourdomainnamehere.com/product/slug-here/ (WooCommerce product page) and https://yourdomainnamehere.com/add-my-product/ (WordPress standard page) and you want to be sure that only /product/slug-here/ types are matched, you can specify that you want the request URI to start with /product/, thus /add-my-product/ will ot be matched here’s how you can do it:
#^/product/# – the ^ will clearly instruct the script that the request URI should start with /product

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/product/slug-here/ will be matched, but https://yourdomainnamehere.com/product/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 #(-survey/|/contact/|feature-request|book-a-reservation)#, #/product/# will often be enough. Asset CleanUp uses preg_match function() to validate (true or false) the input.

Was this post helpful?