Trellis Critical CSS Settings Overview

As of version 0.17, Trellis has a dedicated settings page for Critical CSS. You can find these settings by logging into your WordPress site and navigating to Appearance → Mediavine Trellis → Critical CSS

Enable Critical CSS

(Default: Enabled)

You can learn all about Trellis Critical CSS, how it works, and how to troubleshoot it in this article.

NOTE: Critical CSS is automatically bypassed for logged-in users. If you have Critical CSS enabled, you should also check the display of the site while logged out or in an incognito browser window.

Purge All Critical CSS

This button will purge all existing Critical CSS that has been generated on the site. The Critical CSS will then regenerate as readers visit posts and pages. Because Critical CSS speeds up your site, purging all Critical could temporarily slow things down until it is regenerated.

Exclusions

This table shows posts/pages where Critical CSS has been disabled.

Entries are added to this table when the Disable Critical CSS control is selected while editing a post or page in the WordPress Editor (Classic and Block).

The table provides the name of the post or page (as a link), a description as to why Critical CSS was disabled, and a More Options button (three vertical dots). When a post or page’s Critical CSS is manually disabled, the description shows this and also includes information as to the date and time it was disabled along with the user who disabled it.

Clicking More Options shows an Enable Critical CSS button that reenables Critical CSS for the page/post. The next time a reader visits the page/post, Trellis will generate Critical CSS files.

Note: the following two sections are high-level troubleshooting settings that should only be used if you are comfortable with looking at your site’s HTML and locating valid CSS selectors. We recommend avoiding these settings and working with a developer if you’re unfamiliar with how to proceed.

Force Non-Critical CSS

This setting will include CSS styling for HTML elements that are rendered after page load. If you have elements from plugins or third-party scripts in the above-the-fold window, but their styles aren’t loading in properly, try adding the element’s selector here. Check out this high-level overview of the critical CSS functionality here.

Force Critical CSS

If you notice that some below-the-fold elements on the page are un-styled, or styled incorrectly, you can try adding the selectors to this setting. This will force the selector into Critical CSS, even if it only exists below the fold.