-
Available since OmniFaces 4.5
The <o:criticalStylesheet> is a component based on the standard <h:outputStylesheet> which renders a <link rel="preload" as="style"> instead of <link rel="stylesheet"> and automatically changes the rel="preload" to rel="stylesheet" during window load event. Additionally, it will automatically be moved to the very top of the head.
Usage
Just use it the same way as a <h:outputStylesheet>, with a library and name.
<o:criticalStylesheet library="yourlibrary" name="scripts/filename.js" />You can even explicitly configure third-party stylesheet resources to be loaded this way, such as PrimeFaces stylesheets.
<o:criticalStylesheet library="primefaces" name="components.css" />
<o:criticalStylesheet library="primefaces" name="layout.css" />Documentation & Sources