The problem i&#x27;ve always had with this, and the &quot;above the fold&quot; rule as it appears in the pagespeed insights tool, is the definition of &quot;fold&quot; varies wildly.<p>So I see CSS optimisation as a multi-step process.<p>* Switch to a component-based rendering architecture (I favour React)<p>* Map CSS rules directly to components (I use CSS Modules)<p>* Have a JavaScript entry-point per route. The entry-point should only contain what&#x27;s needed for that route, common bundles can be used too (I use webpack for this).<p>* Have equivalent CSS entry points per route (again, Webpack).<p>* On initial (ie server) render, render a style tag into the document that contains the content of the relevant entry CSS. By definition this is very close to being only the CSS required for that page (if your components have various different classes depending on config, there may be some bloat here, not sure if there&#x27;s a workaround).<p>* On that same render, don&#x27;t include an external reference to the actual stylesheets. (At this point we&#x27;re mimicking Google&#x27;s advice)<p>* On first client-side navigation (yeah, i&#x27;m assuming you&#x27;re using client-side routing), load the required stylesheets for the destination URL, remove the style tag, then continue the navigation.<p>I&#x27;m actually excited, because in the React ecosystem, we&#x27;re not too far removed from this entire process being relatively trivial to implement. I&#x27;m assuming other ecosystems are similar.