Page Speed Insights - managing critical CSS in SilverStripe

Silverstripe Version: 5.3

I’m battling my way through the suggestions in Page Speed Insights and struggling to make improvements to FCP and LCP.

I’ve mostly whittled it down to “Eliminate render blocking resources - Resources are blocking the first paint of your page. Consider delivering critical JS/CSS inline and deferring all non-critical JS/styles.”. (I have already minified and trimmed down the files as much as possible).

Is there a reliable way to split css into critical and non-critical styles using SilverStripe, without having to do this manually? I don’t want to inline entire css files.

What are people using to manage css and js delivery and caching? It appears SilverStripe does not cache js and css by default.

Any suggestions would be much appreciated.

So, a few things. I’d argue that it’s not Silverstripe’s job to cache your asset delivery, that’s more an infrastructure question. You can set those headers in your hosting or CDN configuration simply enough though.

As a wider topic, there is no single right answer to optimisation. Every site will have different solutions. I did a little StripeCon talk a few years back outlining the approach I generally take: https://www.youtube.com/watch?v=DwqQaqoZWvo

To summarise, I use the Silverstripe Requirements system to selectively load in assets based on the individual page content. I also try to inline the core styles and defer any styles below the fold. Generally this gets Pagespeed scores in the high 90s without too much effort.

No doubt, you’ll get different advice from different people… the trick is to find what works for your specific project.

My requirements module can deal with some of the nuts and bolts of implementation too, in case it’s useful: GitHub - DorsetDigital/silverstripe-enhanced-requirements: Extends and enhances the Silverstripe requirements system, providing inlining of assets, http/2 server push, deferred css, etc.

(Just to note: since that talk, Silverstripe now supports things like WebP conversion and lazy-loading out of the box)

1 Like

Thanks that’s very helpful. I’ve added your enhanced requirements module and will hav e play with that.