Trellis and Critical CSS

Learn about Critical CSS and why it's important for site speed and Core Web Vitals.

You may have heard the term “Critical CSS” used when researching or using Trellis, but you may not have known exactly what it is or why it is so important.

What is Critical CSS?

Critical CSS grabs the “critical styles” (in other words, the styling code for all of the elements within the first screen view), and loads them as an inline stylesheet.

This reduces the number of network requests needed when the page loads and reduces the amount of code needed to render the Initial Paint. In other words, it makes your initial page load much faster by loading only what you need when you need it, and nothing more.

How is it generated?

Trellis generates a .css file automatically after a reader visits a post. This is stored in your hosted folders ( /wp-content/mvt-critical/1 ) and loads in as an internal stylesheet when the page loads.

All of the other CSS style code for elements below the first screen view get compiled into a “Secondary” or “Un-Critical CSS” file. This is also stored in your hosted folders but is served after the initial page load. This results in the initial screen view generating much more quickly, as the site will only load the most important CSS styles first. This not only boosts site speed but can also help with Core Web Vital scores.

To Start Using Critical CSS

This setting is enabled by default when you install Trellis. If you want to be sure you’re taking advantage of this optimization feature, navigate to the Appearance → Mediavine Trellis → Critical CSS and check “Enable Critical CSS“. Then hit save.

How do I know if a post or page has Critical CSS?

To see if a post or page has Critical CSS, you can navigate to that page while logged into WordPress. In the Admin Bar the Critical CSS Status will say Critical CSS – Success.

To learn more about the Critical CSS in the Admin Bar, check out this help article.

With Critical CSS enabled, I’m seeing some display issues. Is this caused by Critical CSS?

If you notice that a particular post or section of your content across all posts is not displaying properly, you can see if Critical CSS is playing a part by add ?mvt_flags=disable_critical_css to the end of the url and loading the page again. If you notice that the issue persists, then it is not related to Critical CSS. However, if the issue goes away, then it’s possible that there is a conflict with Critical CSS.

If it’s only on a single post or page, you can go into your WordPress editor and disable Critical CSS for that particular post/page. However, if the issue is present across a large number of posts, you can reference the Force Critical and Force Non-Critical settings to resolve the issue.

I am not seeing Critical CSS on a post or page. Why?

In order for Critical CSS to generate, the post has to be visited by a reader (a non-logged-in site visitor). Once the post or page is visited, it goes into a queue, and after processing, Critical CSS will be applied to the post.

For more details on the status of Critical CSS on a particular post or page, our help doc on the admin bar can elaborate on all of the status displays and options for refreshing Critical CSS.