CSS Optimizer “Limit To” and “Exclude”

This article explains the Limit to pages or posts function and Exclude pages or posts function in CSS Optimizer and how to use it.

Limit to / Exclude

By default, CSS Optimizer will run on all front-end pages of your website. Using either Limit to pages or posts or Exclude pages or posts, you can tell CSS Optimizer to run on selected pages only.

Which should I use?

Since the two functions are inherently in conflict with each other, you can only use one at a time. As a guide, if you have a small number of pages you want CSS Optimizer to run on then use Limit to pages or posts. If you have a small number of pages you don’t want CSS Optimizer to run on then use Exclude pages or posts.

To choose a function simply enter a value into the its field. As soon as a value is entered, you will not be able to enter any values into the other function.

When the Limit to field contains a value(s). Exclude is disabled.

To reset and choose the other function, just clear all the values and click on an empty space.

Values cleared. Both fields are available.

How to select pages / posts

Limit to and Exclude are versatile functions that can take a list of different types of values like:

1. Magic strings enclosed in square brackets. Example: [Home]
2. Any portion of a URL or URL slug. Example: 2021/09/20/hello-world
3. Page ID. Example: id=2

Note, when using the second type (any portion of a URL) it will affect any URL containing the entered value. For example, sample-page will affect pages with URLs like /sample-page, /sample-page-1, /example/1-sample-page, etc.

You can enter a list of values by typing each value in a new line.

Examples

1. Magic strings

In this example, we will set CSS Optimizer to only run on the home page. To do this we will use the Limit to pages or posts function and select the home page with Magic string value.

1. Go to CSS Optimizer Options page.
2. In the Limit to pages or posts field, enter the magic string enclosed in square brackets. For our example, it is [Home].
   

   Magic string enclosed in square brackets.

3. Click on Save Changes.

To verify, let’s check the source of the home page.

Page source of the home page.

We can see the .purge.css file that shows CSS Optimizer is running on this page.

Let’s check the source of a page other than the home page. Like the blog page.

Page source of the blog page.

We can see the .purge.css file has changed back to .css file. CSS Optimizer is not running on this blog page. Now we are sure that CSS Optimizer is only running on the home page.

2. Any portion of a URL

In this example, we will set CSS Optimizer to only run on the blog post titled Hello World. We will use Limit to pages or posts function and select the page using a portion of the page’s URL.

1. Open the page to be selected.
2. Copy a part of the URL.
   

   Copy a part of the URL.

3. Go to CSS Optimizer Options page.
4. In the Limit to pages or posts field, paste the URL.
   

   Paste URL into Limit to field.

5. Click on Save Changes.

Now CSS Optimizer will only run on page’s with a URL that contains the words 2021/09/20/hello-world.

Alternatively, you can use a URL slug. Here’s how to find it:

1. Find the post/page in Wordpress and click edit.
   

   Open the post in Wordpress editor.

2. In the Permalink section, look for URL slug.
   

   Permalink > URL slug.

3. Copy and paste the URL slug in a new line.
   

   Paste URL slug into Limit to field.

For this example, I have pasted the URL slug into the Exclude pages or posts field. This tells CSS Optimizer to run on all front-end pages except for pages with a URL containing the word “sample-page”.

3. Page ID

In this example, we will set CSS Optimizer to not run on specific pages. To do this, we will find the page ID then enter them into Exclude pages or posts field.

1. Find the post/page in Wordpress and click edit.
   

   Open the page in Wordpress editor.

2. Find the page ID from the URL of the edit page/post. In our example, it is 2.
   

   Find the page ID.

3. Go to CSS Optimizer Options page.
4. In Exclude pages or posts field, type “id=“ followed by the page ID. In our example, it is “id=2”
   

   Enter the page ID into the Exclude field.

5. Click on Save Changes.

Now, CSS Optimizer will run on all pages except for the page/post with the page ID of 2.