Performance hit of Inline CSS

admin管理员组

文章数量:1420659

I would like an opinion. Does inline CSS hurt website speed performance?

Because even though I write all my custom CSS in the theme customization page Custom CSS section, still in some speed tests it detects inline CSS.

So in other words my question will be: For website performance, do I need to move my Custom CSS to an actual theme file, for example styles1.css?

I would like an opinion. Does inline CSS hurt website speed performance?

Because even though I write all my custom CSS in the theme customization page Custom CSS section, still in some speed tests it detects inline CSS.

So in other words my question will be: For website performance, do I need to move my Custom CSS to an actual theme file, for example styles1.css?

• css
• performance

Share Improve this question edited Jul 11, 2019 at 5:02 harvey 21511 gold badge44 silver badges1313 bronze badges asked Jul 10, 2019 at 19:23 haciawohaciawo 111 bronze badge 0

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Theme customization pages usually dump those css customizations into a <style></style> block directly in the page head, which counts as inline styles. Some plugins will drop styles there too.

Anytime you use third-party plugins, or themes, it's inevitable that you will run into some inline issues. There's a balancing act of cost - is the cost to develop your own worth it? Or is the cost of performance scores low enough to offset that?

How much it hurts I think depends from site to site. I don't know that the front end user would notice as much as an algorithm like google's lighthouse does.

For kicks and giggles, you could scan your site before moving the css, and then scan it after you put it into its own file to see how much of a change it is.

本文标签： Performance hit of Inline CSS