Ways CSS is applied to the page

[LeaVerou]

I'd like to see how CSS is applied to a page: style attribute, <style> element and/or the <link> element. Besides <link>, I'd expect numbers to be quite high on <style> elements mostly due to the critical CSS recommended practice.

(by @catalinred)

Added by @LeaVerou: It would also be interesting to measure how much inline CSS (style attribute) is used on pages.

[Crissov]

This would be even more interesting for SVG.

[LeaVerou]

@Crissov I believe this is the domain of the Media chapter, you may want to suggest it there!

[LeaVerou]

So this is measured via the same custom metrics code that runs for #39 though it measures runtime style vs link, which may be different than downloaded if there’s JS that inlines certain stylesheets. Not sure which one we want to measure but I’d be inclined to go with the metric we already have.

[rviscomi]

@LeaVerou what are the stats for this metric: % of pages that use the style attr, % of pages that use the <style> element, etc? And how do you see #39 fitting in?

[LeaVerou]

@rviscomi #39 is a completely unrelated stat, it was just convenient to measure this in the same code.
I suspect % of pages that use inline vs remote wouldn't be terribly interesting, since most pages use both. We could report average (or median) % of remote vs inline stylesheets. What do you think?