Optimizing CSS Loading

Fixes: FCP, LCP, TTI

The CSS is a render blocking resource, so the key here is to optimize CSS by including critical CSS as an inline style element on the web page which is needed above the fold. This makes critical CSS a top priority styles and when page rendered these styles get applied to a web page as fast as possible. This is very important for better FCP and showing content to users as quickly as possible.

There are a few things you can do to generate critical CSS, few of which are: 

• Jetpack Boost plugin for WordPress.
• Critical CSS Generator by AddyOsmani
• The Official AMP for WordPress plugin (this uses CSS tree shaking as well to keep CSS under < 75kb for each page)