Though this seems to be the simplest and straightforward method of increasing site speed, a lot of Magento websites for some reason fail to leverage this benefit. There are cases where developers either ignore code minification or minify code partially. Now you might be wondering what minified code or partially minified code means. So, here it is:
- Minified Code - A minified code is a code without whitespace characters, new line characters, comments, and block delimiters.
- Partially Minified Code – In partially minified code, the theme code is minified, but a lot of inline code or some other sources such as extensions are not minified.
Manual Code Minification:
- Minify CSS – If you do not use any kind of front-end wizard on your project such as SASS, Gulp, LESS, Grunt etc., the best thing you can do is to use some online or offline minifying tool. For instance, cssminifier is one of the popular online minifying tools.
Automatic Code Minification: The automatic approach highly depends on the nature of your project. It is often impossible to change the entire development environment especially when you’re working with other developers on the same project. As a result, it is difficult to recommend the best possible solution. Hence, we have shared a solution that we use for our Magento projects, assuming you are familiar with SASS, Compass, and Gulp.
SASS: If you have set up SASS for your web project, you simply need to add an additional parameter on sass-watch command:
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
# You can select your preferred output style here (can be overridden via the command line):
output_style = :compressed # :expanded or :nested or :compact or :compressed
# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true
# To disable debugging comments that display the original location of your selectors. Uncomment:
line_comments = false