Inline stylesheets

Inlining stylesheets convert your external stylesheets (.css files) and add the content directly in the HTML. By inlining, the browser can immediately start rendering while receiving the HTML, without waiting for CSS files to download.

Inlining styles also fixes the "Remove render-blocking resources" warning from Google PageSpeed Insights, LightHouse and similar testing tools.

Exclude stylesheets from inlining

If any of the stylesheets (.css file) are not required for the initial render, it's better to exclude them from inlining and load them asynchronously (without render-blocking). This will also help in reducing the HTML size and improving TTFB.

You can add keywords (separated by a newline or space) found in the CSS file URL to exclude them.

For example, to exclude https://example.com/wp-content/plugins/comments/style.css, you can add "/plugins/comments/", or "/comments/" or "style.css".

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.