I’m sure you’re all in a similar boat as we are. Trying to get sites to load faster. One way to do this is to load a few common css rules in the html markup itself and then load in the CSS later.
I’ve tried a few online tools like Critical Path CSS Generator - by Jonas Ohlsson but the rules don’t work out so well.
I then started looking at browser based tools to run in the console.
aboveTheFoldCss.js
/**
* Simple Critical CSS and Full CSS extraction widget
*
* @usage
* Copy & paste this widget in the browser console and use the following methods with an optional callback.
*
* window.extractCriticalCSS( callback );
* window.extractFullCSS( callback );
*
* When no callback is provided, the extracted CSS is offered as a file download + printed to the browser console.show original
No luck here because of cross domain blocking issues now.
So what is everyone doing to solve this?
Seems you could just use some JS to append your “Full CSS” after page load. I found a few similar references in Stack Overflow:
<script>
setTimeout(function(){
var resource = document.createElement('link');
resource.setAttribute("rel", "stylesheet");
resource.setAttribute("href","path/to/fullCssfile.css");
resource.setAttribute("type","text/css");
var head = document.getElementsByTagName('head')[0];
head.appendChild(resource);
});
</script>