Speed up your Zencart site by minifying your CSS and JS files
There are two important things you can do about your css/js files to improve your page load (and remember, faster page load = more satisfied customers = less cart abandon)
- Reduce the total number of file size (there are many tips regarding best practices for css coding out there on the web. If you want to get a summary of the BEST css practices for Zencart let me know)
- Reduce the total number of css/js files (or requests)
As I have mentioned in Zencart Performance Optimization Guide, you can combine all your css files (per page) into 1 single file and also minify(*) that file to get the best performance.
However, there are potential problems with minification: remember that CSS requires that you move @import command to the top of a css file, if you combine multiple css files and one of those files has @import command then this @import command will not run properly (Tabbed Product Pro is one of Zencart modules that uses @import).
Possible solutions:
- Push the @import commands to the top of the final file resulted from the minification process
Pros: Easy to do
Cons: because of css override behavior this method can result in unexpected effect. - Stop using @import and put the content of the file being imported in each and every file that needs it
Pros: solve the Cons above
Cons: you may have multiple files containing the same content (or part of their contents are the same due to the css content that could have be imported now has to present in all these files). This will greatly improve total file size unnecessarily. - Stop using @import and include the css file that is supposed to be import in the header along with other css files
Pros: same total file size
Cons: extra server requests (this is solved by combining all the css files into 1 file)
Option 3 is the perfect option for us, but obviously it is impossible for us to manually combine and compress css/js files per page, that is where php minify comes to the rescue. Minify was introduced to me by Jeff at numinix.com. At first I didn’t appreciate what it does much until I work on a huge site later with monstrous css/js files and minify really came to the rescue. I will leave all the details of how minify works and how to integrate it into Zencart out of this post because this module will be released to you soon anyway (don’t forget to subscribe to our feed to get noticed when it comes out).
(*)Note:
According to Wikipedia, minification (very often just minify, and sometimes also minimisation or minimization), in computer programming languages and especially JavaScript, is the process of removing all unnecessary characters from source code, without changing its functionality. These unnecessary characters usually include white space characters, new line characters, comments and sometimes block delimiters; which are used to add readability to the code, but are not required for it to execute.
Great article. Zen Cart has the ability to automatically load stylesheets on a page by page basis. However, if you were to take advantage of this you’d be loading many objects on the initial page load. This increases page load time significantly regardless of the size of the object. Minify becomes important because it allows you to combine all of these objects into a single object for download. It even goes further to compress the object!
Numinix has a module, unreleased, that Rubik Integration has been working with. The module overcomes the @import bug issue by creating a separate object for page specific stylesheets. It currently doesn’t check for @import since we’ve never encountered a situation on a page where you would need more than 1 file with @import commands.
When the module is ready for release we’ll be sure to put it up on Eazy-Templates.com (a joint venture between Numinix and Rubik Integration).
Thanks for stopping by Jeff. I was thinking really hard about it and decided that it is for the best that no @import should be used at all. So the solutions for those that are using any Zencart module that employs @import is to contact us and we will send you a “patch” for that specific module and also upload the new “patched” version of that module to Zencart download as well.
Raine
I love the mod, thanks! One minor issue though, it creates an un-escaped & in the stylesheet link which is invalid. It works fines, but w3c validation will complain about it. Ex:
Where can I find this character to fix it?
Never mind, I found it. jscript.php line 200 col 120
Replacing the & with & appears to work fine.
Hello,
It cant works in IE8 Its posible ???
Minifying is not browser dependent, but because of the result of modifying some errors can happen if your css code was not valid.