CSS File Folder & CSS Assets

#1

I have a number of separate CSS assets and testing a CSS File Folder to do (some of) the optimisation work.

 

Problem is, some are CSS files and others CSS Design files (legacy reasons) - I also discovered that a CSS file will not parse keywords for image paths (./?a=* or (%globals_asset_url:* ) when used within a CSS File Folder.

 

So I'm wondering if it would be best to:

  1. Convert all CSS to CSS file assets with 'mysource_files/' image path properties (if it will parse correctly with CSS File Folder)
  2. Or Convert all CSS assets to CSS Design assets.

For option 2 - Do CSS Design assets cause any performance hit when used within a CSS File Folder? (Matrix 5.1.9)

(Tim Davison) #2

My observations using CSS File Folders so far:

 

a) mysource_files will not be parsed in a normal CSS file even if it is placed within a CSS file folder.  

b )  CSS Design files alone have a performance hit, but within a CSS File folder that hit is removed (served as static file rather than having to come back to Matrix cache each time).  The file will serve as 304 on subsequent hits - best performance possible.

c) CSS File Folder *does* seem to have some issues determining which URL to use when you are using mysource_files.  E.g. when CSS design file used alone, it matches URL as close as possible to current URL.  When placed within a CSS file folder it seems to just pick the first URL.  This is only an issue if you are re-using files in CSS Design files - e.g. we had this issue with webfonts I was re-nesting over and over rather than creating duplicates.

d) CSS File Folder also seems to have some issues minifying.  E.g if I add normalise.css to the CSS File Folder the resultant CSS that is rendered is valid but incorrect, i.e. some of the rules are incorrectly, differently, or malformed.  I either have to remove normalise.css (which defeats one of the main performance gains, reducing the number of HTTP requests) or choose no minification option.  Also losing one of the performance gains (smaller payload).

e) Whenever you make a change to a CSS you have to manually go back into the CSS File Folder asset, get locks and re-generate it.  It's smart enough to tell you one of the files has changed and the file needs recreating, but not smart enough to do it for you.  Makes development painstakingly awful.  Have looked for a trigger to automate this - no luck.

 

For reasons above, despite the better potential performance, I still stick to a single CSS Design File with mysource_files.  I would also concede if you had a number of CSS files that change very infrequently they could be candidates for CSS File Folder, but quite a bit of care needed.  For the main CSS specific to a site I leave it our of CSS File Folder.  I think Squiz were on the right track with CSS/JS File Folders, but I don;t think solution is mature enough yet.  

 

My ideal solution (aka personal wishlist) is a CSS File Folder that parses normal CSS and/or CSS Design files including ./?a= syntax (and creates NOTICES in linking screens for linked assets as an added bonus - I MUCH prefer this to mysource_files syntax) and that automatically recreates a static file whenever one of the linked CSS files is updated.  While we're talking wishlists, a CSS Design File that allows defining some string constants, e.g HTML colour codes, so I don't have to type them in all the time.

 

Oh, and please enhance CSS file assets so they make me cups of coffee.

#3

Thank you for such a detailed & informative response Tim!

It sounds like you've spent some time in that space and I appreciate the sharing of thoughts and findings.

 

I thought I'd discovered the silver CSS performance-bullet there, but am now feeling a little deflated (Like the times I found my robot-vac just spinning in the corner). Oh well, time to use a little elbow grease.

 

I also vote vote on coffee enabled CSS assets :lol: bring that on!

(Bart Banda) #4

mysource_file or ./?a= or global keywords will never parse within a CSS file asset as they are simply just static text files, they don't parse any of their content. 

 

Best practice is to always use a CSS Design File as you can still use it with caching, so there isn't really any performance hits there. 

 

In recent versions of 5.2, we've also enhanced the CSS Design Folder a bit, including automatic regeneration whenever a linked CSS asset is updated, so you don't have to do it manually. \

 

So in your case, I would change them all over to CSS Design Assets. 

#5

Thanks Bart.

 

I just realised the reason our CSS file assets currently do parse global keywords, is because they are referenced from a nested page asset. Probably not the best setup, which I'll be changing.

 

Automatic regeneration sounds great by the way.

(Tim Davison) #6

Hey Bart - I've never had success getting a CSS Design file to act like a static file, i.e. return a 304 if it hasn't been modified.  Is that what you mean by caching?  It does return very quickly (I'm assuming Matrix cache doing a good job there). 

 

And definitely looking forward to improvements in 5.2.  Like I said, I think Squiz definitely on the right track here.

(Bart Banda) #7

Hey Bart - I've never had success getting a CSS Design file to act like a static file, i.e. return a 304 if it hasn't been modified.  Is that what you mean by caching?  It does return very quickly (I'm assuming Matrix cache doing a good job there). 

 

And definitely looking forward to improvements in 5.2.  Like I said, I think Squiz definitely on the right track here.

 

The Design CSS file will only send a 304 header if you have "Send Not Modified Status Code" turned on. But will still send public cache headers to the browser. What you can do as well is to reference the static cache file that the design file produces  directly via ./?a= where the asset ID of it is usually 1 greater than the design file. This way you are always referencing the static file rather than the matrix generated version, but usually this is not required, especially if you are using the CSS File Folder.