The MinimalCSS plugin supports all the post types and taxonomies used on your website, including custom post types. To keep the CSS file sizes to a minimum, a separate CSS file is generated for each post type. Selecting a post type from the dropdown will refresh the page and display the published content corresponding to the select post type.

You will need to generate the MinimalCSS file for each post type and taxonomy separately.

Note: The dropdown list will include only custom post types that have published posts.

When generating the Minimal CSS files, there are 2 ways to go about it:

Individually: Click on the “wand” icon corresponding to the item you want to optimize. This method will only generate the minimalCSS file for the selected item.

In Bulk: Select all the items you want to optimize by clicking on the corresponding checkbox in each row.  When you’re done making your selections, use the “Bulk Actions” dropdown menu to select the “Generate MinimalCSS” option.  The plugin will create a scheduled job that will iterate through all the selected items.  Individual CSS files are created for each item.

TIP: If you modify CSS that only affects specific pages, you can generate the new minimal CSS only for the affected pages without having to do this for all the pages.

Note: You only need to generate the minimal CSS files for post types and taxonomies which correspond to actual pages on your website.  For example, the WooCommerce Product post type corresponds to product pages on your website.  However, some custom post types (e.g. testimonials, team members, food menu items) might only exist as widgets on other pages.  In those case, you don’t need to generate the minimal CSS files for those post types, even though they appear in the dropdown.

How to tell if a post type or taxonomy requires the MinimalCSS file?  

After selecting the post type or taxonomy from the dropdown, click on one of the titles of one of the items.  This will open a page showing the item as it might appear to your visitors.  If this is, in fact, a page that you show on your website, then this post type can benefit from generating the MinimalCSS file.

Include Extra HTML

This toggle can be used to include or exclude the Extra HTML file from individual MinimalCSS runs.  If this option is selected when the MinimalCSS is generated, the plugin will remember this setting for future runs.

TIP:  You only need to select this option for pages that require the Extra HTML code to run correctly.  For example, if a page has a popup (lead form, gallery, video popups), the HTML is usually dynamically inserted or triggered only through user interaction.  When MinimalCSS visits the page, that code is not triggered.  That’s why the Extra HTML option is needed to instruct MinimalCSS to include the necessary CSS for that feature.

For more information about the Extra HTML feature, click here.

Image Preload

For pages that include images about the fold, you can select those images manually to be added to the preload directive.  Preloading images helps improve loading.  You can select one or multiple images (e.g. for hero sliders).

TIP: With the addition of the automatic image preloading feature, this option is recommended primarily for background images.