Document how you're supposed to use minimalcss

[peterbe]

Generally the idea is that you replace your bloated external style sheets with one block of minimal CSS. That can either be injected as a new external .css or inlined. But it's generally a good idea to do something like this:

Before:

<link rel="stylesheet" href="bloatedframework.css">

After:

<link rel="stylesheet" href="builds/minimal.css">
<link rel="preload" href="bloatedframework.css" as="style" onload="this.rel='stylesheet'">

The reason why it's a good idea to still lazy load in that bloatedframework.css is because minimalcss can only figure out the minimal CSS on first page load (including XHR) before the user starts interacting and using the pointer to cause the DOM to change.

All of that needs to be explained! Ideally quite early in the README to grab peoples attention.

Also, it should probably link to loadCSS which has a good polyfill solution to lazy loading CSS. The code example above doesn't work in all browsers.

[peterbe]

Bonus points if we can have some gh-pages examples that demonstrate this with URLs you can throw into webpagetest.

[stereobooster]

Do not forget

<noscript>
  <link rel="stylesheet" href="bloatedframework.css">
</noscript>

[peterbe]

Yep, I think that's part of the loadCSS solution. It's what I use on https://songsear.ch

[stereobooster]

One of my examples https://github.com/stereobooster/react-snap/blob/master/doc/emotion-site-optimization.md

We can use any big boostrap page for demo, for example https://blackrockdigital.github.io/startbootstrap-sb-admin/ or https://startbootstrap.com/template-categories/all/