Repository navigation
Document how you're supposed to use minimalcss #93
Description
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.
Activity
peterbe commentedon Jan 23, 2018
Bonus points if we can have some
gh-pagesexamples that demonstrate this with URLs you can throw into webpagetest.stereobooster commentedon Jan 23, 2018
Do not forget
peterbe commentedon Jan 23, 2018
Yep, I think that's part of the
loadCSSsolution. It's what I use on https://songsear.chstereobooster commentedon Jan 23, 2018
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/