Th3 Core
Welcome, Guest. Please login or register.
Did you miss your activation email?
November 24, 2017, 09:07:03 AM

Login with username, password and session length
News
Stats
51107 Posts in 6284 Topics by 186 Members
Latest Member: DavidBrown
Search:     Advanced search
* Home active threads unread threads Help Search Login Register
+  Th3 Core
|-+  Why We Are Here
| |-+  Web Development
| | |-+  CSS Shorthand Generator
« previous next »
Pages: [1] 2 Print
Author Topic: CSS Shorthand Generator  (Read 1951 times)
buckworks
Inner Core
Hero Member
*
Posts: 821


View Profile
« on: March 04, 2017, 12:30:39 AM »

This tool helped me trim the stylesheet of my busiest site.

http://shrthnd.volume7.io

Every bit helps!
Logged
ergophobe
Inner Core
Hero Member
*
Posts: 3391


View Profile
« Reply #1 on: March 04, 2017, 01:10:15 AM »

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
Logged
buckworks
Inner Core
Hero Member
*
Posts: 821


View Profile
« Reply #2 on: March 04, 2017, 01:36:06 AM »

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.
Logged
ergophobe
Inner Core
Hero Member
*
Posts: 3391


View Profile
« Reply #3 on: March 04, 2017, 11:47:30 PM »

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.
Logged
ergophobe
Inner Core
Hero Member
*
Posts: 3391


View Profile
« Reply #4 on: March 04, 2017, 11:50:07 PM »

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;
}
Logged
ergophobe
Inner Core
Hero Member
*
Posts: 3391


View Profile
« Reply #5 on: March 04, 2017, 11:51:49 PM »

Followup... if you set all four margins, it will compress that into a single rule.
Logged
buckworks
Inner Core
Hero Member
*
Posts: 821


View Profile
« Reply #6 on: March 05, 2017, 06:12:02 PM »

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?
Logged
ergophobe
Inner Core
Hero Member
*
Posts: 3391


View Profile
« Reply #7 on: March 05, 2017, 08:41:22 PM »

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,
« Last Edit: March 05, 2017, 08:44:36 PM by ergophobe » Logged
buckworks
Inner Core
Hero Member
*
Posts: 821


View Profile
« Reply #8 on: March 05, 2017, 09:25:31 PM »

>> 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.
« Last Edit: March 05, 2017, 09:30:55 PM by buckworks » Logged
ergophobe
Inner Core
Hero Member
*
Posts: 3391


View Profile
« Reply #9 on: March 05, 2017, 09:32:41 PM »

>>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.
Logged
ergophobe
Inner Core
Hero Member
*
Posts: 3391


View Profile
« Reply #10 on: March 05, 2017, 09:41:19 PM »

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
Logged
ergophobe
Inner Core
Hero Member
*
Posts: 3391


View Profile
« Reply #11 on: March 05, 2017, 09:49:02 PM »

Create a bookmarklet* with this code

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
Logged
buckworks
Inner Core
Hero Member
*
Posts: 821


View Profile
« Reply #12 on: March 05, 2017, 10:04:51 PM »

I will try that this evening.

Stay tuned ...
Logged
ergophobe
Inner Core
Hero Member
*
Posts: 3391


View Profile
« Reply #13 on: March 08, 2017, 06:29:18 PM »

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.
Logged
Drastic
Need a bigger hammer...
Global Moderator
Hero Member
*****
Posts: 2162

Resident Redneck


View Profile
« Reply #14 on: March 10, 2017, 10:26:58 PM »

Any recommended minify tools for css files?
Logged
Pages: [1] 2 Print 
« previous next »
Go to the Active page, the Unread page, or jump to:  

  Powered by SMF 1.1.20 | SMF © 2013, Simple Machines
Mercury design by Bloc