Render-blocking CSS

[YodasMyDad]

I use Google page speed to try and make sure my sites are as fast as they can be. But I am stumped on this one. It flags the minified CSS that squishit creates and says it should use the following

https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery

Snippet from Google PageSpeed insights

Eliminate render-blocking JavaScript and CSS in above-the-fold content
Your page has 2 blocking CSS resources. This causes a delay in rendering your page.
None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.

Any idea how I could achieve this with Squishit?

[AlexCuse]

From what I can tell, it is recommending inlining your "critical" CSS. Hopefully there is an easy way to identify this? Once identified you could inline this yourself, or define an nth bundle with the critical CSS content and inline it using the functionality discussed here - just note that it will not do any rewriting for relative paths (because it is not actually written to the file system). So if you have image urls specified in the "critical" bundle for example, make sure they use absolute or site-relative paths.

[AlexCuse]

I'm not entirely sure that inlining the critical content would be enough to satisfy that check so let me know what you find out. If you need to use javascript to defer CSS loading we could probably add a new Render method that emits the URL instead of a tag if that helps? Not really sure what the best approach is there I will try to read up on it in the near future.

[YodasMyDad]

I think if you had the option to just render the Url instead of a full tag, then it would be very helpful 👍

[AlexCuse]

Sorry I forgot to circle back on this. I don't think this is really feasible because of the way SquishIt acts at debug time (rendering individual tags for each element).

I'm wondering if there's a way we could render with basically a format string, where you supply a block of text that is rendered "around" each resource? It would probably not be optimal but may be doable.

In the meantime you could use something like this I guess?

$('head').append(@Bundle.Css.RenderNamed("deferredLoadBundle");