Reasons not to in-line critical css

Hi, I’m considering in-lining my critical above the fold css. The css will be in-lined only for my homepage which is the main point my visitors are accessing my site. My goal here is page load speed. What are potential drawbacks for doing this? Below are some points to consider with regard to my requirements:

For my site, first time visitors are more important than return visitors.
My page has an SSL and along with my server is HTTPS/2 enabled.

Here is the page.

Where did you get the impression that it would improve page load speed?

  • You’ll find it harder to maintain -
    where you can change just one class, you’d have to change it on each and every instance on the page (imagine if you have a class called 20 times that you need to change individual occurrences),
  • Increased page size - this will partially offset your additional “load” of the css file
  • Loss of responsiveness - if you’ve got inline styles, it’s much harder to keep responsiveness

Here’s an interesting read - it talks about react, but it’s really about inline and external css performance comparison. If you read the article, you’ll find that the external css does perform better, but even with a HUGE table, the performance is in milliseconds. So even if you’re page would perform better with inline, the difference is still going to be in milliseconds, and the work to maintain it will outweigh any performance benefit you “might” get doesn’t make sense. It takes a LOT of milliseconds to pay for a half hour of developer time who has to go to each inline instance to change it (and don’t mention replace all - any developer who’s been in business long enough has been bitten by a replace all change error)

4 Likes

I have read a number of sources including here, that it can improve performance. Also, Im just in-lining my above the fold content on one page, I wont be changing any classes. I guess your point about only milliseconds of performance boost is a good argument just in itself.

Thank you for your perspective!

I’d argue that’s a poor article - all the sources used as the baseline of the assumption are from 2012 and before. :scream:

Ugh. I just realized they’re using “inline” style as putting all the stylings in the header instead of an external style sheet

My assumption was you meant inline style as in

<div style="font-size: 1em; color: red">This is red text</div>

OK, I can kinda see what he’s talking about, but the points about maintenance still apply. If you have common “above the fold” css styles, having them in two different places will still be a maintenance nightmare. Guarantee you’ll run into an instance where you’ll remember to change one place but not the other…

And I’d still argue that the performance hit isn’t worth the effort. You’d get better returns on optimizing javascript (or better yet, getting rid of javascript when it’s not needed, or css is more appropriate)

I found this on the network analysis through Chrome. Look at all the css/js files you’re loading that you don’t need

3 Likes

A workaround for that is to have the css as a PHP include (or W/E server-side lang), so it is an external css file as normal.
I have used a little bit of css in the head this way, but only for little bits that are unique to an individual page. Though I am considering bunging the whole lot in the global css file, as then it will get cached (so can be faster) and it’s not a huge weight of code to add to the file.

2 Likes

This is a WordPress site. When you say loading a bunch of stuff I don’t need, do you mean to for above the fold visibility or for the page entirely? I do know there is some JS and CSS that are not needed above the fold that are loading. I’ve tried to differ those unnecessary items to but to no avail.

Also, where in the Chrome Network analysis did you fine the items I don’t need. Im not sure which way to view the Network to see what I don’t need versus just displaying everything.

Click on the arrows, they expand to show what’s used and what isn’t.

Im not sure which arrows to which you refer.

https://snag.gy/WqIXQD.jpg

Sorry, I mean under audit

2 Likes

Oh got it, thank you!

Inline CSS is a security issue - you should use CSP headers to disable them so as to close the associated security holes.

1 Like

Quite some time ago tried the Google recommendations of inline CSS and was not impressed. I now endeavour to use the AmpProject technique which has been adopted by many large organisations. It is not straight forward to convert existing scripts but well worth the effort.

1 Like

Yes, it is better to inline those styles since the styling won’t rely on a HTTP request.
You can then lazy load the styles sheet so it is cached for users visiting other pages of your sites.

PS: I hope I understand your question properly and that you are talking about inlining CSS rules versus styling the page using the style attribute — as it seems a few replies you received reference that.

1 Like

once you apply the correct CSP security header then inline CSS will be disabled to prevent injection.

3 Likes

I assume you mean “embedded” css, i.e. as using the style tag in the html header, not the inline style attribute.

Correct. I should have worded it more clearly.

I’d guess that if the OP is asking about inlining his CSS then he’s not planning to set CSP security header, don’t you think?
Or if he does, then I’m sure he knows that he can always enable style by adding unsafe-inline as an allowed source in a style-src directive—his choice.

1 Like

I’m actually just trying to understand csp headers. I don’t have any experience using them. I’ll decide after I learn how to use them.

presumably the OP is going to leave a whole lot of security holes in their code some of which those headers would resolve.

The presumably was a bit of a dig wasn’t it? Not sure why that was necessary. I am simply trying to understand how the csp headers work. My decision is whether or not to include critical css in the head, if I do, of course ill use the headers.