Optimal workflow for minifying script files

(Ryan Archer) #1

Hi there,

 

This has probably been mentioned a few times, most noticeable a few years ago here http://forums.squizsuite.net/index.php?showtopic=7472&hl=%2Bcompress+%2Bcss#entry37321

Great advice in that post from Richard but I want to ask a specific question regarding workflow for minifying and combining JS and CSS files to make faster page load times.

 

REceiving some fairly dismal page speed scores when going to https://www.feedthebot.com/pagespeed/OR http://gtmetrix.com/

 

It's all well and good to say minify and combine your JS/CSS but when you have to make changes to these scripts on a regular basis, it can possibly be a tad long winded and problematic. BTW, we update some of our website's css files on a weekly basis.

 

Now the model I envisage here is to download the minified CSS file and then 'un-minify' it and find the part that I wish to edit, test it and then minify the script and upload it again. It makes sense that all the styles in the website is in one file - I get that part. I just feel that the workflow for updating CSS files can be a pain in the proverbial. 99% of the time it is way more convenient to edit the CSS file directly on the Squiz Matrix environment and test/debug and update it there.

 

CMS environments like Wordpress make this a bit easier with using plugins to compress your scripts at run time so you can still keep them separate for when you need to update them without having to follow a workflow.

 

Just interested to know what workflows you other Squiz Matrix developers have implemented to balance page speed with ease of workflow management.

(Nic Hubbard) #2
CMS environments like Wordpress make this a bit easier with using plugins to compress your scripts at run time so you can still keep them separate for when you need to update them without having to follow a workflow.

 

Seems like your old version of Matrix is holding you back.

 

Check out the CSS Folder and JS Folder assets. Those are used to minify any scripts that you place within them, and in the order that you place them. Very nice because then you can update your scripts how you want, and the server will minify them.

(Joel Porgand) #3

 

Seems like your old version of Matrix is holding you back.

 

 

Gah, that's always the way! I'm in the same boat... Might have bump an upgrade up the list of priorities. 

(Ryan Archer) #4

I suspected a more recent version of Squiz would be tackling this issue. So @Nic, what you are saying is that in the 5.1+ version of Squiz Matrix we can drop our JS and CSS files into those folders and Squiz will do the 'grunt' work for us? Hope you can see my developer pun there....

(Greg Sherwood) #5

Here are the docs for those new asset types:

http://manuals.matrix.squizsuite.net/core-assets/chapters/js-file-folder

http://manuals.matrix.squizsuite.net/core-assets/chapters/css-file-folder

(Ryan Archer) #6

Thanks @Greg, works like a charm!

Don't suppose there is any automated way of minifying HTML via the Squiz System?

 

I can do this via the code editor but then when you go to edit it again, becomes a bit of a hard task...

(Bart Banda) #7

Thanks @Greg, works like a charm!

Don't suppose there is any automated way of minifying HTML via the Squiz System?

 

I can do this via the code editor but then when you go to edit it again, becomes a bit of a hard task...

 

Not yet, there is an idea in our Roadmap for it but there hasn't been much discussion on it or traction. 

(Ryan Archer) #8

Are there any particular rules governing the formatting of the CSS so they can be successfully combined and minified? I just have an issue with combining and minifying the CSS of a particular website. At first some issues were occuring because background: url(images/thisImage.jpg) as opposed to this background: url("images/thisImage.jpg")

 

Still the issues remain and the page is not properly formatted with no obvious clues as to why. The CSS appears to combine and minify successfully but the browser does not seem to understand it. What type of compression technique is being used? Is it the PHP one (https://code.google.com/p/minify/)?

(Bart Banda) #9

I'm not sure what the compression technique that is used, I'll let a dev answer that, but it basically just removes comments and spaces and new lines. 

 

There have been a couple of bugs fixed since their initial release, so you might be on a version that has some bugs on it. 

 

If you can post an example of an original file and it's incorrect formatting, I could check if that bug has been fixed and in what version. 

 

Please note that the ability to add CSS Design Files to the minification folder was only added in 5.1.

(Ryan Archer) #10

Hi Bart,

Interestingly enough, we are still running 4.18.4 (have not upgraded yet) and the feature is available so I'd be safe to assume that we have an earlier version of the tool - which would explain alot. Anyhow, I will attach the 3 css files that I am attempting to combine and minify (they work when just combined and NOT minified). globals.css (116 KB) homeFeature-boxes.css (2.32 KB) slq-globals.css (112 KB)

(Bart Banda) #11

Can you point out what exactly isn't working for you? Is it that the minified file has nothing in it? Or is there missing data in it? I tried minifying just the globals.css file and that seems to have worked in latest 5.2, so may be a bug in your version of it. 

This is one bug fix that I found that might be relevant? https://squizmap.squiz.net/matrix/6082

 

 

Currently the JS and CSS File Folder assets use the JSMin tool to minify the selected JS/CSS files when using "Basic Minification" option. However this does not works well with CSS File Folder.

For example create CSS File with following content: .list-type-new .inner {     color: purple;
    background-color: #d8da3d
}

 Then add this file to a CSS File Folder and minify with "Basic Minfication" option. The output of CSS File Folder will print:.list-type-new.inner {color:purple;background-color:#d8da3d}

Notice the missing whitespace between .list-type-new and .inner.

(Ryan Archer) #12

I think it's most likely a bug with our version. The file does appear to be minified successfully although I'm sure there are syntax errors within it and probably other errors like you described above.

Basically some of the styles are just not being read. the minified file does have content in it and it does not appear to be missing data.

 

I think I'm going to wait until we upgrade to the latest Squiz Matrix version before I troubleshoot it any further. By the way, I don't think minification might have been the issue, it might have something to do with combining the files and minimising them.