Reduce generated css load time ?

Hi,

I made a css document to take advantages of TV and snippets customizations, and this part works very fine.

But now I'm trying to optimize my css load time, and even with cache enabled the loading remains slow.

(takes 300ms to 500ms, where a direct file access would be less than 100ms - I used Firebug to bench)

Is there a way to automatically save the css document (once edited from the manager) as a static resource, so I can put a direct link in my template ?

Or is there a way to access the cached generated plain text version ?

Thank you [ed. note: sushen last edited this post 11 years, 8 months ago.]

Did I ask in a wrong section ?

You have multiple options here.

First, you may simply add the css file to your assets. The url for access is http.://domain.tld/assets/file.css. This will be optimal if you aren't using MODx tags in your CSS. (You can still edit it in the Manager, you'll just do it from the Media Source.)

Second, you may copy and paste it into the file system, then create a Static Resource in your Resource Tree, and put the path to the file. This must be in a Media Source directory. This way allows for MODx tags to be used in the document.

Both options require you to cut and paste the content. You could write a plugin to override this behavior, but it might be overkill for a single or couple of documents.

Regarding the cached copy: No, you cannot tell a browser what to do. This is handled by the browser's configuration. Also, your experience may not be the same as your users' experiences. Analytics is typically a better measure of pageload, though it really doesn't serve as a benchmark. Pageload can be quite varied due to any number of factors out of your control.

Thanks for your reply

I tried what you suggest, but it doesn't do what I'm trying to do.

What I'm trying to do is reduce my css load time, and thus something like :

(css modx document) ->(onsave) put results in myfolder/mycss.css

Then I can put a link to myfolder/mycss.css in my template.

If I put a link to (css modx document) in my template, the css is loaded in 500ms (even from modxs cached version)
If I put a link to (myfolder/mycss.css), it is loaded in 100ms

If I do a static resource on myfolder/mycss.css, and put modx tags in it, and then put a link to myfolder/mycss.css in a webpage, I receive a file with unmodified modx tags ...

I guess what I want to do is not possible, is it ?
How do you speed up your page load time ? [ed. note: sushen last edited this post 11 years, 8 months ago.]

That's a tough question. I do things way differently than many of the others in the MODx and web community. Most of load time is not serving... its parsing and querying. I keep my queries super tight by having a different resource structure then most others. I make sure I'm never getting information I don't need. I also make sure I don't have an "all-purpose" template with a ton of Output Modifiers. This means I always have the content I want.

Additionally, My JavaScript is very small. I use it for small, targeted AJAX requests and that is pretty much it. For my AJAX, I never request a full page. I only request Partial HTML, again meaning I only get the information I need. (AJAX is a great way to reduce load)

A lot of load is actually HTML structure, and I keep mine as simple as possible using semantic HTML, avoiding tables completely (if they aren't semantic), I avoid useless divs and containers. When I'm designing I use as few graphics as possible and add them later.

My CSS is small and written like an object-oriented program. I reuse as many classes as I can to avoid making extra styles. I also only use ids when it represents a unique element. This keeps my CSS small.

My Snippets fail silently as soon as possible (early exit), limiting execution. This means that if I know early that I'm not getting information, I return .

Right now my page load is high as my cache is changing nonstop as I near public release. My Home Page alone accesses (and includes) over 800 Resources (my CSS is 650 Resources right now) at this point and I get them all in 3.5 seconds (which is fast considering the amount of data I'm handling. My way is not for everyone and is particularly refined for my needs. The above rules make a huge difference in mitigating that load though. When I'm done developing and able to flatten my CSS to a single file again, my load will be negligible.

If I put a link to (myfolder/mycss.css), it is loaded in 100ms

This is effectively the same as what I told you in the first suggestion. The first suggestion was to simply stick the file in your assets folder. Its a flat file, not a Resource. It's a straight link with a URL http.://domain.tld/assets/mycss.css.

If I do a static resource on myfolder/mycss.css, and put modx tags in it, and then put a link to myfolder/mycss.css in a webpage, I receive a file with unmodified modx tags ...

It must have a template, not be 0 (empty). CSS may have a Template; Any Resource must have a Template with at least a [[*content]] in it be parsed. I'm reasonably sure that this applies to Static Resources, as well. My CSS is not Static, and it uses a Template and MODx tags.

I guess what I want to do is not possible, is it ?

(css modx document) ->(onsave) put results in myfolder/mycss.css

As said previously, you will have to write a Plugin for that. Probably on the OnDocFormSave, I'm guessing would be the best event to capture. Are you unfamiliar with MODx Plugins? If so, you can read about them here

When I'm designing I use as few graphics as possible and add them later.

Here's an interesting take on dealing with a lot of small background images

http://css-tricks.com/data-uris/

Reduces the back-and-forth between the browser and the server fetching all the images.

I'm still waiting for some better support for data-uris, but in the past, when it has worked, it has worked extremely well. It does significantly reduce HTTP requests for images which can be a ton of load right there.

Ok then, I guess it's the drawback for having a rich customization and features for managing the site, and I'll have to do with these performance.. and I'll probably stop using these cool customization features for my css in regard to better speed performance for my visitors (as a visitor, I hate this when a site is slow, even if the design&content is cool)

Anyway, an export feature (save result as) would be a great addition to the engine.
(and an export 'as php', allowing not to look at the db for document content, would be the top of the top - diamond stuff!!)

Thank you for all your tips sharing

Anyway, an export feature (save result as) would be a great addition to the engine.

Agreed!! Just in case you don't know, you can make feature requests and bug reports here.

Try this plugin. Check OnLoadWebDocument.




This works great for me in a bit different way - I have TV farExpires for each template. Unfortunatelly I do not know (for now) how to check if document was retrieved from cache or not, so it does not work good e.g. with 'agregate' pages.

The page dropped from ~1MB sent to browser ( after tweaking .htaccess and this plugin) to less than 1kB on second request.

Hope this helps.
[ed. note: remek555 last edited this post 11 years, 7 months ago.]