If you're experiencing display issues, or optimization issues with your CSS, check out this high-level overview of how Trellis Critical CSS works.
NOTE: For faster troubleshooting, use the page options before regenerating Critical CSS site-wide.
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 your "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.
Purge Page Critical CSS
You can test if Critical CSS has been regenerated by selecting the Purge Page CSS on a given page, and by visiting that page in an incognito window.
If no critical CSS is visible in your Browser's Inspector → Network → CSS tab, then Critical CSS has been purged successfully. Check out this post with video to learn how to check if Critical CSS is on your post.
Trellis Critical CSS files are stored in the
wp-content/mvt-critical/1/ hosted folder. If you don't see any CSS file in the Network tab from this location, then you can be sure that Critical CSS has been purged for this page.
Purge All Critical CSS
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 affect page speed scores until Critical CSS is rebuilt and measured by Google Page Speed Insights.
You can see if the page is queued for processing, or if a page or post has run into an error back in your Mediavine Trellis→ Issues tab. It may take up to an hour to rebuild the page's Critical CSS, but once you see the Un-Critical CSS file in your Browser's Inspector → Network → CSS tab, then your post's Critical CSS has been rebuilt and is up to date.
Checking the Status
The status for a post's Critical CSS Generation is now shown in the admin bar of WordPress.
The status will display in the admin bar if you are logged in and viewing a post or page. Clicking the status will take you to the Mediavine Trellis → Issues tab.
There are 5 possible statuses:
Success: The page has generated critical CSS.
Error: The page had an error generating critical CSS. Visit the issues tab to see the affected page or pages. Depending on the error, you may need to Disable Critical CSS for this page, add plugin or page elements to the allowlist or force critical fields in the Advanced Menu, or reach out to email@example.com for more assistance.
Processing: The page is currently in the process of generating Critical CSS.
Pending: The page has been queued for regeneration of critical CSS.
None: The page has not attempted to generate critical CSS yet.