Preloading CSS and allowing an efficient caching policy for injected assets

[chocolata]

Hi,

I was evaluating the Boxes plugin and found it very useful, but I hit some minor details that I was able to do in my own setup and am unable to achieve as of yet with the Boxes plugin.

Right now, if we use the combiner function, the Boxes plugin injects such a line of code for the CSS:
<link rel="stylesheet" href="http://localhost:8086/combine/5a238af5103270a4359a6a0781d26f6c-1730928331">

Can we have the option to modify this line slightly, so we can preload the CSS as is suggested here:
https://web.dev/articles/preload-critical-assets

I used to preload CSS as follows:

<link rel="preload" href="style.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="style.css"></noscript>

Additionally, I see that if we use the bundle function (thank you for this, I rely heavily on this), the combiner spits out a URL without a CSS suffix, which causes issues regarding caching, because the browser does not detect it as CSS.

So it would be ideal if we could achieve something like this:

<link rel="preload" href="http://localhost:8086/combine/5a238af5103270a4359a6a0781d26f6c-1730928331.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="http://localhost:8086/combine/5a238af5103270a4359a6a0781d26f6c-1730928331.css"></noscript>

Could you kindly review if this is feasible or possible? If there are alternatives to reach something similar, I am of course open to that.

Thanks for your work.

[tobias-kuendig]

@chocolata, I'm not sure this is a Boxes issue since these tags are generated by October. This means you should have the same output for any other plugin that uses October's asset pipeline.

[chocolata]

Hi, @tobias-kuendig

Thank you for your reply.

It's true that this string is being generated by the October combiner.

But we have a bit more control in our own partials, as we can manually add a suffix to the url that's being spat out, or change the surrounding html tag to allow preloading techniques.

Is there any way to achieve this?

[tobias-kuendig]

What CSS is put into that combiner URL?

The Boxes plugin adds this file, but only if viewed in the Backend Editor:

https://github.com/OFFLINE-GmbH/oc-boxes-free-plugin/blob/main/assets/css/offline.boxes.editor.css

Other than that, all CSS should come from your own Boxes. These are added to the combiner here:

https://github.com/OFFLINE-GmbH/oc-boxes-free-plugin/blob/01013c930db95030409e351e296ac0a33c60d1ff/classes/traits/HasBoxes.php#L91

I am open to suggestions on how to make the assets avaiable to the frontend and not add them to the combiner. What would you need, a array of js and css files to include?

[chocolata]

Hi @tobias-kuendig , in this instance, I was experimenting with SCSS as this allows me to use the assetVar functionality inside my theme configuration

handle: banner
name: Banner
form:
    fields:
        content:
            label: Rijke tekst
            comment: Hiermee plaats je een rijke tekst in de banner
            type: richeditor
            span: full
        align:
            label: Uitlijning
            type: balloon-selector
            default: right
            options:
                left: Links
                center: Midden
                right: Rechts
assets:
    css:
        -   name: partials/boxes/banner/banner.scss
            bundle: true

Using raw SCSS to inject only seems to work with the bundle flag set to true.
Right now, if multiple boxes are present on the page, this combines all files into a single CSS file.

Ideally, I would like to output one CSS-file per box, so that the browser isn't forced to download the CSS file in its entirety on each different page.

I might be asking a lot here :-)

[chocolata]

As a sidenote, below is how I did it in my basic solution based on the Rainlab.Pages plugin.

Inside the banner.htm file, I referenced the scss file that I needed:

{% if section._group not in active_sections %}
    {% put styles %}
        <!-- Banner CSS -->
        {% partial 'helper-preload-css' source=[ 'partials/sections/banner/banner.scss' ] %}
    {% endput %}
{% endif %}

The part if section._group not in active_sections made sure that if there were two instances of the banner on a page, that the combiner would only fire a single time, to prevent duplicate CSS.

The helper-preload-css partial did this:

<link rel="preload" href="{{ source | theme }}.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="{{ source | theme }}.css"></noscript>

On the page the following was outputted:

So the styles of each box are split up into separate CSS files, that are loaded into the page if only those specific boxes appear on the page. Each of these resources can then be effectively cached by the browser if they appear on different pages.

I'm guessing we can do something similar by including a {% put styles %} {% endput %} directly in to the htm file as a workaround? We'd just need to find a way to prevent the same CSS file from being loaded multiple times.

[chocolata]

I just found out we can do this in the configuration! :-)
We just need to not set the bundle flag!

assets:
    css:
        -   name: ['partials/boxes/banner/banner.scss']

This effectively injects the compiled CSS to the page, one CSS file per box. We only now need to figure out how to get the '.css' suffix and preloading working.

[daftspunk]

I can confirm that attributes are indeed possible via the combiner....

$this->addCss("['/plugins/velitalia/racescraper/assets/css/races.css']", [
    'preload' => true,
    'foo' => 'bar'
]);

The second argument provides attributes that as passed to Html::attributes()....

<link src="..." preload="true" foo="bar" />

However, we don't include the .css extension primarily to confuse the web server rules and indicate clearly that this is not a static asset. We could potentially add a global configuration to modify this behaviour. Would it be helpful?

[chocolata]

Hi Sam, being able to add the .css or .js extension globally would, as far as I'm concerned, certainly be a great solution. I didn't know that addCss had these options. Thanks for letting us know!

[tobias-kuendig]

@chocolata we pass the attributes to October, you can use them in Boxes:

https://docs.boxes.offline.ch/use-cases/adding-assets.html#registering-assets