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).
- 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).