Th3 Core

Hmm... I put in a couple of test sheets and all it did was deminify them.

I tested it on a fairly massive "kitchen sink" Foundation 6 stylesheet and it brought it from 128kb to 157kb

Your post and a couple other things resulted in a bit of a goose chase that ended with this

https://jonassebastianohlsson.com/criticalpathcssgenerator/

That *DID* bring down time to render the page above the fold. Really cool utility. I did the "dumb" version which is to say that the critical path CSS is now in both the document and the external CSS file, so in that sense, it's more bloated than ever. But it speeds up render. The next step is to get rid of all the cruft in the main CSS file.

Followup... if you set all four margins, it will compress that into a single rule.

That's an exceptionally high proportion. I'm not sure why that would be.

You say "pages" - I'm not sure what that means in this context. Are you saying the stylesheet prints out to 23 pages and fully 16 (over 75%) of that is required just to render the page above the fold? If you told me you had 230 lines of unminified CSS and 160 were required to generate the above-the-fold content, that would seem right. But at roughly 300 lines of code per page, that would be 4800 lines just to render the top of the page (I assume you're talking about unminified CSS here).

So, my guess is either
 - you have very few unique styles that get used down the page and your footer looks a lot like your header
 - or you have a huge amount of CSS going into generate things like your navigation
 - or there is something about your design that's messing up the rendering engine and it's incorrectly thinking that more of your CSS is needed than actually is.


How is your CSS built? It this just one big CSS file, generated for SASS/LESS partials? If you want a reality check, you could break it into smaller files and run it through Google Pagespeed and it should tell you which CSS stylesheets are render blocking. You wouldn't need to do this on a live site.

For a recent test, for example, I just copied the generated code for a homepage and put it in a file called response-test.html and put it on server root and then could see if tweaks had an impact on load times. So you would have to, in that case, also create a handful of stylesheets and see if Google thinks they're all in the critical path.

You can get deeper into it with Addy Osmani's tool collection (i.e. tools he collected, not tools he built)
https://github.com/addyosmani/critical-path-css-tools

As usual, Chris Coyier (actually a guest poster in this case) has a nice writeup
https://css-tricks.com/authoring-critical-fold-css/

You can also install mod_pagespeed on Apache or nginx and it will rewrite your code on the fly and you can see what it thinks is critical. I'm curious what results that would give you.
https://modpagespeed.com/doc/filter-prioritize-critical-css

-------

And to the second issue you raise,

>>responsive

Yeah, you can't know what the viewport of the headless browser is.

You can try the method described here
http://patrickhamann.com/workshops/performance/tasks/2_Critical_Path/2_2.html

See what that gives you. It gives me a little less, but not a lot less. BTW, I'm testing this on a site with the Foundation Kitchen Sink thrown at it - huge amounts of CSS and it is yielding under 12KB, which is way less than 10% of the CSS. I would expect in your case it would be higher than 10%, but it surprises me that your total Critical CSS load is apparently almost double mine even though your total stylesheet is less than 20% the size of mine.

Create a bookmarklet* with this code

javascript:void function(){(function(){var e=function(e,t,n){var r=n||{},o={},i=function(e){!!o[e.selectorText]==!1%26%26(o[e.selectorText]={});for(var t=e.style.cssText.split(/;(%3F![A-Za-z0-9])/),n=0;n<t.length;n++)if(!!t[n]!=!1){var r=t[n].split(": ");r[0]=r[0].trim(),r[1]=r[1].trim(),o[e.selectorText][r[0]]=r[1]}},a=function(){for(var n=e.innerHeight,o=t.createTreeWalker(t,NodeFilter.SHOW_ELEMENT,function(e){return NodeFilter.FILTER_ACCEPT},!0);o.nextNode();){var a=o.currentNode,c=a.getBoundingClientRect();if(c.top<n||r.scanFullPage){var l=e.getMatchedCSSRules(a);if(l)for(var f=0;f<l.length;f++)i(l[f])}}};this.generateCSS=function(){var e="";for(var t in o){e+=t+" { ";for(var n in o[t])e+=n+": "+o[t][n]+"; ";e+="}\n"}return e},a()},t=new e(window,document),n=t.generateCSS();console.log(n)})()}();
*Right click on your bookmark bar and choose Add Page and name it something memorable (CriticalCSS) and paste the above into the URL field

- Open a page
- Click your bookmarklet
- Open your Javascript console (Inspect -> Console)
- it should have output your critical CSS in the console

Just happened across this

https://moz.com/blog/the-technical-seo-renaissance

which mentions Critical Rendering Path at some point... long article I've only skimmed, but it has some good insights that I expect most people here will already know.