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.
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:
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.
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.
Method #2 (Make exception if the request URI within the URL matches a RegEx)
This feature is available in the Pro version starting from v220.127.116.11
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“).
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¶m2=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 #.