Critical CSS is an important feature with Trellis, however it's also a very powerful tool that can lead to some unexpected style changes. While it's not common for this to negatively affect the display of your site, Trellis has some available settings that could help. So Trellis has included two features under the Critical CSS section of your Trellis settings.

Due to the complex nature of how Critical CSS functions, it's important to only use these settings if you're comfortable with HTML and CSS. There's a distinct possibility that a given issue you are experiencing has nothing to do with Critical CSS. This means that making a correct diagnosis and choosing appropriate CSS selectors can be challenging, so we only recommend adjusting these settings if you're technically adept.

It's possible for styles to be missing if they are being added by JavaScript after a page has loaded. This method of inserting styles can trick Trellis’s Critical CSS into thinking these styles shouldn't exist on your post or page. If you notice that CSS styles are missing on a post or page after critical CSS has generated, this can be resolved by adding CSS selectors to Force Non-Critical CSS.

If you notice a layout shift after first scrolling down a post, this could be resolved by adding CSS selectors to Force Critical CSS. This sudden layout shift could be happening because Trellis loads additional CSS after the first interaction on a post or page. Adding CSS selectors for these styles to Force Critical CSS may help prevent this shift from happening.

If you do add CSS selectors to these settings, it's possible there could be an impact on site speed. We recommend running some of your posts through Google PageSpeed Insights to see if your adjustment has had a dramatic effect on site speed or if Google references any new opportunities or diagnostics as a result of your adjustment.