CSS Transform

CSS transform determines how page CSS will be handled.

NAME	css_transform
TYPE	selection/text
DEFAULT	merge

Merge (default)

All CSS used by the page is combined, unused CSS is removed and the result is inserted into a single style tag in the head of the document.

Advantages

Only used CSS is loaded into the page and the page doesn’t have to wait for external styles to load. Only a single <style> tag means the page never re-renders during load reducing cumulative layout shift.

Possible Disadvantages

If CSS classes are added by Javascript, the optimization may identify that class as unused and remove it.

Best practice is to always use all CSS classes in the initial html. For example, if you have a menu class use:

<div class="menu closed">

then remove the closed class instead of doing something like adding an open class later. This ensures that all needed classes are present in the initial html.

Use the css_safelist option to force-keep additional CSS classes.

Note that this is the default instead of defer which is usually recommended. The reason is that with the Mindspun platform, the initial HTML download is guaranteed to be static and therefore relatively fast. Furthermore, in practice, the amount of ‘used’ CSS is not much more than the above-the-fold CSS so there is no reason to load all CSS later.

Defer

Calculate the above-the-fold CSS and insert it into a <style> tag in the head of the document. All remaining CSS is asynchronously loaded using the ‘media=”print”‘ hack.

This option is commonly recommended as best practice but usually performs worse than ‘merge’.

Advantages

Only CSS needed to display what the user initially sees is loaded with the page – so-called above-the-fold content.

Possible disadvantages

The page still has to load *all* page CSS eventually, using valuable network bandwidth. If the above-the-fold calculation is incorrect, the user will experience layout shift whenever the later CSS styles load.

None

Doesn’t transform the page CSS at all.