MyPage is a personalized page based on your interests.The page is customized to help you to find content that matters you the most.


I'm not curious

How to Minify CSS & JavaScript Code In Magento?

Published on 31 January 17
1566
1
1
Page speed is one of the parameters Google search engine and your customers use to evaluate your website on their first visit. If your web page takes too long to load, your customers will likely abandon your website and never return. However, there are a number of options when it comes to increasing website speed. In this article, we will cover one of the simplest ways of increasing page speed through minifying CSS and JavaScript code.

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:

  1. Minified Code - A minified code is a code without whitespace characters, new line characters, comments, and block delimiters.
  2. 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.

Now let’s go through the tutorial on how to minify your CSS and JavaScript code.

There are two ways to minify JavaScript and CSS – manually and automatically. As an experienced custom Magento development service provider, we recommend you to do it automatically as it speeds up your development process. But in case you choose to do it manually, we have that covered too.

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.
If you’re developing a complex Magento project by using some IDE (integrated development environment) software, you can install or enable an IDE plugin that helps you speed up your development process. This will minify your CSS code every time you save your working stylesheet file.

  • Minify JavaScript – Just like CSS code minification tools, there are a bunch of tools and IDE extensions for minifying your JavaScript code. Some of the popular online JavaScript code minification tools are javascript-minifier and jscompress.

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:

sass --watch file.scss:file.css --style compressed
Compass: If your project has Compass included, it will already have a Compass config file in the project. Search for config.rb file and open it. It will have something similar to this:
# Require any additional compass plugins here.

# Set this to the root of your project when deployed:

http_path = "/"

css_dir = "stylesheets"

sass_dir = "sass"

images_dir = "images"

javascripts_dir = "javascripts"

# 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
In config.rb file, Line 11 will be commented with a '#' sign. You need to uncomment the output_style (by removing #). Now restart Compass and start looking for changes in SCSS files. Now trigger it by entering the following command:
$ compass watch
Gulp: There are multiple ways to handle code minification with Gulp. But the following two methods are most preferable:

In conclusion, minifying your JavaScript and CSS code is a great way to increase your page loading speed and it can be easily done with the help of online tools and plugins. But if you know any other tools or options to minify CSS and JavaScript code, please let us know in the comments below.

Page speed is one of the parameters Google search engine and your customers use to evaluate your website on their first visit. If your web page takes too long to load, your customers will likely abandon your website and never return. However, there are a number of options when it comes to increasing website speed. In this article, we will cover one of the simplest ways of increasing page speed through minifying CSS and JavaScript code.

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:

  1. Minified Code - A minified code is a code without whitespace characters, new line characters, comments, and block delimiters.
  2. 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.
Now let’s go through the tutorial on how to minify your CSS and JavaScript code.

There are two ways to minify JavaScript and CSS – manually and automatically. As an experienced custom Magento development service provider, we recommend you to do it automatically as it speeds up your development process. But in case you choose to do it manually, we have that covered too.

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.
If you’re developing a complex Magento project by using some IDE (integrated development environment) software, you can install or enable an IDE plugin that helps you speed up your development process. This will minify your CSS code every time you save your working stylesheet file.

  • Minify JavaScript – Just like CSS code minification tools, there are a bunch of tools and IDE extensions for minifying your JavaScript code. Some of the popular online JavaScript code minification tools are javascript-minifier and jscompress.
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:

sass --watch file.scss:file.css --style compressed

Compass: If your project has Compass included, it will already have a Compass config file in the project. Search for config.rb file and open it. It will have something similar to this:

# Require any additional compass plugins here.

# Set this to the root of your project when deployed:

http_path = "/"

css_dir = "stylesheets"

sass_dir = "sass"

images_dir = "images"

javascripts_dir = "javascripts"

# 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

In config.rb file, Line 11 will be commented with a '#' sign. You need to uncomment the output_style (by removing #). Now restart Compass and start looking for changes in SCSS files. Now trigger it by entering the following command:

$ compass watch

Gulp: There are multiple ways to handle code minification with Gulp. But the following two methods are most preferable:

In conclusion, minifying your JavaScript and CSS code is a great way to increase your page loading speed and it can be easily done with the help of online tools and plugins. But if you know any other tools or options to minify CSS and JavaScript code, please let us know in the comments below.

This blog is listed under Development & Implementations and E-Commerce Community

View Comment (1)
Post a Comment

Please notify me the replies via email.

Important:
  • We hope the conversations that take place on MyTechLogy.com will be constructive and thought-provoking.
  • To ensure the quality of the discussion, our moderators may review/edit the comments for clarity and relevance.
  • Comments that are promotional, mean-spirited, or off-topic may be deleted per the moderators' judgment.
  1. 01 February 17
    0

    Thank you for sharing the tools. Are these available as plug-ins in Magento?

You may also be interested in
Awards & Accolades for MyTechLogy
Winner of
REDHERRING
Top 100 Asia
Finalist at SiTF Awards 2014 under the category Best Social & Community Product
Finalist at HR Vendor of the Year 2015 Awards under the category Best Learning Management System
Finalist at HR Vendor of the Year 2015 Awards under the category Best Talent Management Software
Hidden Image Url

Back to Top