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.
How do I use these 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.
Force Non-Critical CSS -
Force 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.
One Last Consideration
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.