Manually Minify CSS

Classic General
1

Hello!

I’m working on a project using Joe Workman’s Foundation theme and assorted Stacks. Running RW6 & S3. I have the consolidate CSS option enabled.

One of the CSS files “stacks_page_page19.css” publishes at about 430KB, the biggest file on the page. I use Cloudflare to auto minify CSS/JS on other sites, but I’m not using Cloudflare on this particular project.

Without using Cloudflare, can I safely use a tool like https://cssminifier.com/ to minify the CSS and then upload the file to the server overwriting the RW published CSS file? I’ve never done this before and am a bit out of my depth.

Thanks!

2

Hi @casualpilot,

This CSS file is generated by RapidWeaver. So, after you exchanged the CSS file with a minified version, and re-publish with RapidWeaver, it is likely that the minified version gets replaced by the original one again.

But I guess the browser will cache the file after first loading, so additional requests to that page should load the CSS file from cache.

Jannis

3

Given the caveat that @instacks mentions above (i.e. you will over write the file when republishing), there is a nice little app that is much easier to use than pasting CSS into an online minifier

You can find it here http://25.io/smaller/

Many people use this by simply exporting their sites, minifying the contents and then manually uploading via ftp. Obviously this is long winded if you are continually republishing but for a finished site it is quite a nice solution.

2 Likes
4

Perfect. So as long as I’m willing to accept the extra step, I shouldn’t have any trouble.

Thanks for your help!

5

Do you know if your server is set to gzip your files?? That would help decrease the size as well.

6

We’re looking at ways to minify CSS and Javascript in RW7.x. I can’t promise anything, but I’d love to add this at some point too :slight_smile:

3 Likes
7

Another great idea.

I thought it was, but in checking, it isn’t. I’ll have to have my host enable.

8

+1 @tav

Smaller is what I use for compiling the compressed JS files in my RapidWeaver themes. It works really well at what it does. I use it in lots of instances outside of RapidWeaver too for compressing files.

9

There are various ways to do this by adding a few lines to your .htaccess file (if you have one). You can also sign up (free) for CloudFlare which will compress JS and CSS. But don’t use both as minifying minified files causes pandemonium!

10

@peterdanckwerts I’ve only just found this thread but I was curious why you felt minifying JS & CSS in RW causes problems if you also enable it in CloudFlare? Actually I’d be interested to hear Realmac’s opinion on this as well regarding the best way forward.

I’ve just deleted a stack on my website that previously blocked me from minifying JavaScript via CloudFlare. When it was enabled all formatting would break.

11

@ashleykaryl I found I was having problems with a site where I’d minified the javascript and used CloudFlare and then discovered a discussion (I’m afraid I can’t remember where) saying that this could be the cause. I stopped minfying on the site in question and had no further problems.

12

Thanks for the quick answer Peter. So far it all seems fine with minify enabled both via RW and on CloudFlare but I guess logic would dictate it should be one or the other rather than both. If you look at the settings in CloudFlare it is set to “auto” minify so in theory it should only minify where necessary.

I am using Foundation and in the past problems generally occurred when I used non Foundation stacks so I am trying to limit that now and find a lot less troubleshooting that way.

I haven’t switched on CSS consolidation at the moment in RW because Foundation apparently does that already.