CSS transform determines how page CSS will be handled.
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.
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.
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.
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’.
Only CSS needed to display what the user initially sees is loaded with the page – so-called above-the-fold content.
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.
Doesn’t transform the page CSS at all.