To see if the Critical CSS is present on a given post or page you’ll want to check the Critical CSS Status. If you’re wanting to learn more about Trellis and Critical CSS, check out this post here.

The Critical CSS Status will display in the admin bar if you are logged in and viewing a post or page.

There are 5 possible statuses:

Reset Critical CSS allows you to manually send a request to the Trellis Services API to rebuild your optimized CSS. With this setting, your old optimized CSS files will still serve on the site and remain in your hosted folders until they are replaced by the newly optimized files.

Purge Critical CSS will also send a request to the Trellis Services API to rebuild the optimized CSS files, but it removes the optimized CSS files from your hosted folders. No optimized CSS will be served until the critical and uncritical CSS have been rebuilt. This option is good if you have a display issue, as removing the optimized CSS will remove the display issue as well.

Reset Critical CSS if you’re not as concerned with the display changes you have made and are more concerned with page speed being affected.

Purge Critical CSS if you have made display changes to a post or page and need to see the changes applied on the front end (example: changing the colors of a WordPress button block) or if there’s a display issue on your site.

In short; if you have made display changes to a single page then use the page settings. If you have made display changes to your whole site, then use the All settings.

A logged-in user can begin the process of building Critical CSS manually by clicking Reset Page CSS, under Manage Trellis JS/CSS in the admin bar.

‼️ The process will begin automatically when a user visits the post or page while not logged in.‼️

If you don't see the Reset Critical CSS options in the dropdown menu, this is because the "Enable Stale CSS While Revalidating" setting is disabled. (This setting should be enabled unless you have had a consistent problem with one or more plugins and Critical CSS when updating those plugins.)

If you recently made changes to display elements on your site and want to ensure those elements are being optimized by Trellis' Critical CSS, selecting Reset All Critical CSS will tell Trellis to re-generate your updated pages. After changes, if all of your posts have a Critical CSS - None status, clicking on this will kick start the process.

You can test if your Critical CSS is working as expected by selecting Purge Page CSS on a page that has a Critical CSS - Success status message.

After you purge the page CSS of a given post, refresh the page and you should see the status change from Critical CSS - Success to Critical CSS - None.

Now open an incognito window and visit that same page.

Finally, while logged into WordPress, refresh this same post or page and you should see the Critical CSS status change from None to Pending, Processing, and eventually Success.

Note: You likely won't need to purge your whole site's Critical CSS unless there was a Critical CSS Error, display issue, or page speed issue that you were able to resolve.

Once you have Purged All Critical CSS from your site, each post or page that is visited by a non-logged in user will be queued for a new Critical CSS file to be generated. This can briefly impact page speed scores until Critical CSS is rebuilt.

It may take time to rebuild Critical CSS site-wide, but once you see the Critical CSS - Success status, then your post's and page’s Critical CSS has been rebuilt and is up to date.

‼️ Don’t forget to clear your site cache to serve these up to date files to site visitors.

If you're looking for an in depth look at how Trellis Critical CSS works, check out this high-level overview.