Skip to Content

Critical CSS in the Admin Bar

Logged in users can control the Critical CSS on the entire site, or on specific pages or posts via the WordPress admin bar.

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 want to learn more about Trellis and Critical CSS, check out this post here.

Checking the Status

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:

What is the Difference between Reset and Purge?

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.

When Do I want to Reset Critical CSS and when do I want to Purge?

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.

When do I use the Page settings and when do I use the All settings?

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.

NOTE: For faster troubleshooting on individual pages, use the Reset/Purge Page Critical CSS options before the Reset/Purge All Critical CSS options.

Reset Page Critical CSS

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.)

Reset All Critical CSS

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.

Purge Page Critical CSS

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.

Purge All Critical CSS

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.