Page-specific CSS (loads only on that page)

So as we all try to optimize for speed our sites, I have some pages that don't require me to load entire CSS file and I am making small, page-specific CSS assets built are on top of framework/grid.

How can I specify in Grav to load those chunks only for that particular page?

Personally I am using shortcode core and shortcode assets plugins then just putting the page specific CSS file in the page folder and using the relevent shortcode in the page content to reference it. This approach fulfils your requirement on only load that CSS on that page however I'm pretty sure it's not the most efficient. I know grav has some ways to pack multiple source files and deliver them to the client as one. (Maybe I am thinking of js there or maybe it can do both)

Best way to do this is with the shortcode-assets plugin. Just install it via GPM.

Woohoo I guess I'm doing it right then. So is asset pipeline is not applicable to this use-case then? Only for optimising themes etc?

shortcode-assets is compatible with pipeline, but really that's only intended for production, don't enable it during development.

Thanks! Btw so many new plugins popped up that I wasn't aware of! @_@ Loving to see the Grav ecosystem is flourishing! 🙌

If you want to optimize your speed, use the Advanced Page Cache and use the asset pipeline to combine and minify all of your CSS into a single file. Even if you add a few hundred CSS rules, the load difference will be negligible.

If you still want to load those CSS rules just on specific pages, then you can include them inside <style> tags in your page markdown. This way you don't generate an additional file request by either having a new or additional CSS file for that page.