When your CSS file gets large. Which is the case in most sites today thanks to frameworks like Bootstrap. Your page will wait for the CSS file to download, process and repaint. Inlining some of the CSS i.e. critical path CSS can give you lighting fast renders.

Also don't forget to strip your unused classes, which I'm embarrassed to admit, I did not start doing until recently

Then you need bandwidth to download the CSS that is embedded in the page.

Where as you if you cache the linked CSS file you only take the hit once but as you navigate around the site each time it'll be loaded from the cache.

Also, inlining CSS prevents its caching, so the first page load may be faster but subsequent ones will suffer from that if the amount of code is fairly large.

Yup. I work with a very large site and our entire CSS is about 25kb after gzip.

It’s a pointless micro-optimization.

Google Chrome Developers/Google Developers Youtube channel has great content on Frontend optimisations by Paul Irish and others. They teach you what to measure and how. You might want to check that if you are interested in Frontend Engineering.

When your site has a large audience, every microsecond counts. Especially when you don't have someone bankrolling for your traffic. Speed plays an important part for SEO and UX.

I’m quite familiar with Paul’s work. He’s not really saying anything new in those talks either. It’s good technical info but again - a pointless micro-optimization in most cases.

There are so many other, bigger, better, wins to focus on first.

Considering anything Google does as useful for the average developer - even at a reasonably large company - is like thinking pizza delivery guys should emulate UPS: it’s a misunderstanding of context.

25kb of CSS after compression?

That's a damn lot of CSS

That’s all possible css across the site. Average is much lower. Our global css is 3kb for example.

Critical Path CSS is not fairly large, its fairly small in most cases.

When you say "critical path" you just mean above-the-fold stuff?

Mostly yes. This has more information https://developers.google.com/web/fundamentals/performance/c....

The tool should also check if a page uses HTTP2, because for HTTP2 inlining does not give any benefits.

Not true. Even in h2, the browser will first parse the HTML to discover the `<link rel=stylesheet>` and it'll then go issue that request. In h2 it'll reuse the TCP connection (which is a win), but you've still got to round trip to start receiving the stylesheet response body.

FWIW here's a pretty good analysis that shows even with h2, bundling and inlining still has benefits: https://sgom.es/posts/2017-06-30-ecmascript-module-loading-c...