You may have heard the term "Critical CSS" used when researching/using Trellis, but you may not have known exactly what it is or why it is so important.
What is Critical CSS and how is it generated?
Critical CSS is a .css file that Trellis generates automatically after a reader visits your post, when the "Enable Critical CSS" setting is checked in the Advanced Settings area of Trellis.
This generated file includes all of the CSS that needs to be used in the first screenview of your post, and serves it before serving any of the other .css files, which means that the most important (critical) CSS is being served with priority.
All of the other CSS files used after the first screenview get compiled into a "Secondary" CSS file which gets served afterward. This results in the initial screenview generating much more quickly as the site will only load the most important .css files first, rather than loading all of the .css files at the same time.
This boosts site speed and helps with LCP (Largest Contentful Paint).
How do I know if a post/page has Critical CSS?
You can check to see if a post has Critical CSS by using DevTools in your Chrome Browser.
With DevTools open, navigate to the Network Tab, ensure that the file type is set to CSS, and then refresh the page. You should then see a list of .css files displaying under the "Name" section of the Devtools panel.
A post/page without Critical CSS will typically have several .css files showing up there.
A post/page with Critical CSS should typically only show the Secondary CSS file we mentioned earlier. If you mouse over that file, you should be able to see that the file path includes the folder "/mvt-critical".
In the future, we do have plans for a much easier way to detect the presence of Critical CSS on a post, so stay tuned for that!
I am not seeing Critical CSS on a post/page. Why?
In order for Critical CSS to generate, the post does have to be visited by a reader. Once the post or page is visited, it goes into a queue, and after processing the Critical CSS will be applied to the post.
To verify, you can visit the "Issues" tab in your Trellis settings to view a list of posts that have Critical CSS queued, which means that they are waiting to be visited by a reader before being applied.
If you feel that a post has been viewed several times but is still not serving Critical CSS, the "Issues" tab will also provide information about any potential errors. If you do see a file in the "Issues" tab that has error information in the "Actual Error" column, please reach out to firstname.lastname@example.org and we will be more than happy to take a look.