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 your post, this is stored in your hosted folders ( /wp-content/mvt-critical/1 ) and loads in as an inline 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, which 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 your Core Web Vital scores.
To Start Using Critical CSS
To take advantage of this optimization feature, navigate to Appearance → Mediavine Trellis → Advanced and check "Enable Critical CSS". Then hit save. This setting is enabled by default when you install Trellis.
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.
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.
If you are concerned that there may be an error preventing Critical CSS from working, you can go to Appearance → Mediavine Trellis → Issues. This page will show a list of posts that are queued up for Critical CSS to be generated, or they will show a post or list of posts with warnings if something is preventing Critical CSS from working properly.
If you see No Issues Found, Critical CSS is likely already generated for your posts and pages. Try clearing your cache from your plugin or server and check your post in an incognito window again.
If you see any errors on this page or feel that a post has been viewed several times & your cache is cleared but still don't see Critical CSS, please reach out to firstname.lastname@example.org and we will be more than happy to take a look.