I like the look of the waterfall with the inline style! Though I can't see total page load time, it looks like it's an improvement.
You'd be surprised how many sites embed what they call the critical CSS (enough to style the initial page load above the fold) into the <head> of the page. Some of the faster sites in the world use this technique, places like the Guardian, the Financial Times and even this site.
It stems from the work that many in web performance did a few years ago based on the critical path to displaying a web page, something you are talking about in this post. Namely that CSS must be downloaded and parsed before a browser will continue to render a page. For much more detail on this, and some real life results too, I recommend this talk by Patrick Hamann on CSS and the Critical Path. Then, for a bit more information on how you might go about implementing this, this post on Smashing Magazing by Dean Hume shows some techniques for using critical CSS. That might not cover tools that are in your toolchain, but it might give you some ideas. Particularly that it shouldn't necessarily change the way you write your CSS, but it may change that way that you serve it.
I understand the CSP issue, but it should be fairly hard to write insecure CSS and if you do go through the work to split up your CSS by critical and non-critical, it should follow that you can generate the sha hash required to satisfy your CSP.
I am fascinated by web performance and seeing how techniques like this work as well as their real world results. Let me know if you do investigate this further!
We're a place where coders share, stay up-to-date and grow their careers.
We strive for transparency and don't collect excess data.