0

One way to improve web page load time is to inline its css - since css is render blocking. However, inlining css prevents the browser from caching it. Therefore, general recommendation is to inline only "small" css.

But what is considered to be "small"? I searched the web for some rule of thumb and couldn't find anything.

Is anyone aware of some performance testing results and what is the number (in bytes) telling when to inline (or not) css?

René
  • 6,006
  • 3
  • 22
  • 40
Illidan
  • 4,047
  • 3
  • 39
  • 49
  • You're getting very close to the topic of _performance budget_, so if you just look it up, there will possibly be dozens of decent articles. For example, there's a bit old, but still good overview of a strategy to set performance budget, by InVision: https://www.invisionapp.com/blog/setting-a-web-performance-budget/ – rishat Jan 10 '18 at 09:21
  • Well, this is highly subjective and there is no right answer, but generally the idea is that you define some arbitrary "fold" on your page, you figure out which components will appear "above the fold" and you inline the CSS just for those components. Obviously the size of the CSS will vary wildly based on the number of possible combinations of components and the weight of the CSS associated with each of them. – delinear Jan 10 '18 at 09:21
  • There's another article on precisely the topic of choosing the threshold: https://mathiasbynens.be/notes/inline-vs-separate-file. Even though opinionated, this article shows a technique to calculate, roughly, a threshold based on the max bundle size the web app can "afford". – rishat Jan 10 '18 at 09:24
  • Then, there is the limitation each browser-protocol combination puts upon the number of concurrently open connections (think HTTP requests to fetch external resources like stylesheets and JS files). It's normally 6 connections at once, see this Q&A: https://stackoverflow.com/questions/985431/max-parallel-http-connections-in-a-browser – rishat Jan 10 '18 at 09:28
  • And finally, there's an amazing article on browser networking. It explains a lot of what's happening when a user opens a page, beginning with TCP basics. It would help a lot to understand, for one, why code splitting has to be done very carefully. It's free to read in browser: https://hpbn.co – rishat Jan 10 '18 at 09:31
  • Not sure about a general consensus but maybe up to 10% of your total css file as inline. Where inline can also be replaced with http2 push. Also, don't bother to try this performance gain if anything above the fold requires a "framework" like bootstrap or foundation. – René Jan 10 '18 at 09:38

1 Answers1

0

I'd keep everything organized in multiple css files and <link> them in your section as normal, then let your CDN minify, consolidate and cache them.

But if you have a small chunk of CSS that's being used often and on every page, it makes sense to avoid the call to a file and just place that in the bottom of your <head> section.

For example, you could keep the CSS that controls the basic layout of the page inline.

But as for what the best practice is right now: things change all the time in this area, but it seems the best practice is to load all of your CSS in their own files. If you have CSS that needs to load first and isn't loading fast enough for some reason, you could then try inlining that portion of it.

If you're concerned about load times, minimize the use of JS and large images, that's really the only way to solve that.

FYI, CDN's don't just cache your script/style files, they also cache the pages (which includes everything in your <head> section).

mattroberts33
  • 260
  • 5
  • 19
  • Resource size alone doesn't matter as much as network latency. This, and browser's limitation on concurrent connections during each page load, make this problem more complex. In a hypothetical situation like this, when we only talk about CSS and pretend that no other resources exist or may be affected, it gets really interesting. In a real situation, though, I agree, optimizing-minimizing image and video assets is a top one page load time improvement tactic. – rishat Jan 10 '18 at 09:39
  • @RishatMuhametshin for sure, what really matters is just making efficient CSS... I don't see littering the document with style tags as being any help though. The only way to fix this is just making an efficient program and using a CDN to cache your site if that's an option. – mattroberts33 Jan 10 '18 at 09:45
  • @RishatMuhametshin: in the era of HTTP/2 concurrent connections is not an issue. No matter how much files you have - you download all of the in the same time (so, the total download time is determined by the largest file). – Illidan Jan 10 '18 at 11:01
  • @mattroberts33: please note that I was not asking about JS and images - only CSS. JS and images can be optimized in many various ways, such as asynchronios or\and differed loading. However, CSS cannot be differed or asynchronously loaded. Of cause, everything already minimized, compressed and served from CDN. After doing all of this, I looking to further optimize page loading. – Illidan Jan 10 '18 at 11:06
  • @Illidan For sure, it was more of an added tip. The only thing after that is to ensure your CSS is as efficient and optimized as possible at the written level. 'Small' CSS is also relative to the context of the application, and I do not know of any specific number for when you should inline or not. As far as best practices, that would be what I suggested in my answer - a CSS file can be cached separately from each web page that that inline style would have been loaded in so to separate the CSS is my answer. – mattroberts33 Jan 10 '18 at 11:28