This tool helped me trim the stylesheet of my busiest site.
http://shrthnd.volume7.io
Every bit helps!
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
I don't think it would do a whole stylesheet at once.
I used it by entering individual lines where the font declarations were bloated, and it produced the corresponding CSS shorthand. You need to make sure all the components for the shorthand declaration are in place.
I then had to "re-minify".
It seems conceptually odd that a shorthand generator wouldn't produce a minified version!
Even so, I found it helpful.
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.
Quote from: buckworks on March 04, 2017, 01:36:06 AM
It seems conceptually odd that a shorthand generator wouldn't produce a minified version!
It wasn't just that. I made sure there were some rules in there like
.classname {
margin-left: 1rem;
margin-right: 1rem;
}
And it left them as is, but it could be written as
.classname {
margin: inherit 1rem;
}
Followup... if you set all four margins, it will compress that into a single rule.
I tried the Critical Path generator and the result it generated for me was fully two-thirds of the total style sheet: 16 pages vs 23.
Adding that to each page might speed the rendering for the first page view but help me out here ... wouldn't it slow things down for subsequent page views as the user moved around the site?
The external stylesheet would be cached when the first page was viewed, but not the Critical Path verbiage in the head.
Where is the line between strategic redundancy and counterproductive bloat?
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,
>> the stylesheet prints out to 23 pages
Yes, although I didn't actually print. I just pasted both the original and the tool's distillation into a text editor for a quick idea how they'd compare for length.
>> fully 16 (over 75%) of that is required just to render the page above the fold?
That's what the tool seemed to be saying.
FWIW, the design is responsive so what shows above the fold won't always be the same.
At the moment the CSS is 27.85 KB, not completely minified. I've trimmed 3 or 4 KB in the last few days.
The stylesheet was someone else's creation to start with, but over time I've added and tweaked and tinkered.
ADDED:
>> roughly 300 lines of code per page
No. The entire CSS file is 420 lines at the moment. That's not completely minified.
>>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.
I did a little test with the bookmarkelet, and it seems to use display size, rather than viewport size because when I resize way way down, it doesn't change the amount of code it thinks is in the critical path
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
I will try that this evening.
Stay tuned ...
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.
Any recommended minify tools for css files?
One tool too check is the minify tool within PageSpeed.
It won't create shorthand shorthand declarations so far as I can tell ... you have to do that yourself ... but it squeezes out every comment and every bit of white space.
Just a couple of days ago I used it to minify a CSS file and instantly gained a point on the site's PageSpeed score.
Quote from: Drastic on March 10, 2017, 10:26:58 PM
Any recommended minify tools for css files?
I mostly use SASS now, often with Compass. So you just add a flag when you compress and it's done
https://jonbellah.com/how-to-minify-css-with-sass-and-compass/
Standalone CSSTidy - http://csstidy.sourceforge.net/
CSS is not finicky because you won't go changing variable names and such (sometimes minification and aggregation breaks JS). So any online tool would work fine
- http://www.codebeautifier.com/ which runs of CSSTidy
- http://csscompressor.com/
And then lots of common editors have plugins
Atom: https://atom.io/packages/atom-minify
Brackets: http://brackets.dnbard.com/extension/brackets-minify
VS Code: https://marketplace.visualstudio.com/items?itemName=HookyQR.minify or https://marketplace.visualstudio.com/items?itemName=fbdegroot.Minifier
Thank you both!
Quote from: buckworks on March 10, 2017, 10:41:55 PM
It won't create shorthand shorthand declarations
PS - CSSTidy should do so if you set the right flags. I think both of the online services I link will do so. For sure the first one since it's just a UI for CSSTidy