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 → Advanced menu 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.
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” and under **Critical CSS **the message says “Trellis Critical CSS has not encountered issues!”, Critical CSS is likely already being generated for your posts and pages.
Try clearing your cache from your plugin or server and check the status of your post while logged in again.
If you see any errors on this page, or if you don’t see your pages have a Critical CSS status of Success, please reach out to email@example.com and we will be more than happy to take a look.