You can improve your site’s performance by minifying CSS and JS files. By ridding the source code of comments, white spaces, block delimiters, line breaks and unwanted characters. File size gets reduced which makes your site to load faster. Improved performance and site loading speed would wow your customers.
Minifying CSS: The Concept
CSS contains characters that improve source code’s readability but play no role during execution. If you eliminate them, size of source file decreases and consequently the code volume transferred online is reduced. Your site users get optimum experience due to faster loading time of webpages.
How Compression Differs From Minification
Compression also reduces file size but it is different than minifying. CSS Minification doesn’t modify the code and user’s browser would process minified source file just like the original one. Once minification is done, you will get a new file with .min tagged in the middle of file name before .css extension.
During compression, size of your source file gets reduced through replacement of repetitive strings with pointers to string’s first instance. Your source file’s size gets reduced as pointers occupy lesser space compared to text. File is zipped in server and is again unzipped by user’s browser. The difference between minification & compression lies in the underlying technique being used.
Advantages of Minifying CSS and JS
You can increase page speed by minifying CSS and JS. Apart from this, you can enjoy other benefits too when you optimize CSS and JS. These are discussed below.
1) Better Search Engine Optimization (SEO)
If your webpage loads faster, search engine would rank your site better. This would make it appear frequently for relevant organic search results. Google trends indicate that if your mobile site takes 3+ seconds for loading, 53% of visitors simply go away. Minifying CSS optimizes your site for search engines.
2) Optimum Accessibility Even On Older Devices & Browsers
Since older mobile devices and browsers can’t cache properly and can’t render speedily, your site with complete source file would take longer to load. Also, sites with unminified source use more bandwidth of users. By minifying source files, you can make your site more accessible and user-friendly.
3) Performance of Site is Optimized
Minifying your site will make it faster and optimize its performance across all devices and browsers. As the credibility of your brand improves, lead conversion rates become better. Users become more confident in using and recommending your site.
How to check website load speed?
Before minifying JS or CSS, you should get the current load time of your website by using webpage analysis tools. You can use Google PageSpeed Insights or Pingdom for free. The PageSpeed score would offer information about your site’s load time, page size and request numbers. Your page load time is directly proportional to request numbers and page size; hence, you need to reduce them. After CSS and JS optimization, again check your site’s PageSpeed scores.
How You can Minify CSS and JS Scripts?
The methods to minify CSS and JS will depend upon where the CSS and JS belongs to i.e. CMS site, static HTML site or another platform.
You can use plugins for minifying or use online websites or do manually. Let see in detail
Online Minification Method
A website uses a particular coding framework such as PHP, .Net, Java, HTML, and other frameworks are used for building websitesand will be hosted on a platform. This will vary among different sites. . You can use independent tools that can minify any site’s CSS irrespective of the underlying framework.
Popular online CSS Minification websites
CSScompressor allows compression of various versions of CSS and other types. Based on CSS legibility needs, you can compress the file up to 4 levels. You get to know the byte size reduced during CSS optimization.
Cssminifier requires you to paste the CSS for creating a minified version. After minification, you can copy the code or download it.
Other online CSS minification tools include
- Minify CSS
- CSS Minifier
- YUI Compressor
Offline Tools for compressing CSS & JS
Recommended by Google for minifying the scripts
- For minify HTML, try HTMLMinifier
- For minify CSS, try CSSNano and csso.
If you are using Apache or Nginx webserver try using PageSpeed Module.
Plugins used for minification
Your website might be built with any of the reputed CMS platforms like Wordpress, Joomla, Drupal, etc. whose special purpose plugin you can use for minifying CSS.
- WordPress Plugins
There are many plugins but the most popular ones are discussed below.
You can compress and aggregate script files for making your webpage lightweight. Rated 4.6, it has been installed 0.5 million+ times. Its user interface is simple and setting options easy to use.
(ii) WP Super Minify
You can minify and combine CSS files. Compression of CSS is at your discretion. You can view the file size before and after minification to learn about bytes saved. Rated 3.9, it has been installed 20,000+ times.
(iii) W3 Total Cache
You can minify JS, CSS and HTML and increase your site’s PageSpeed score. After installing the plugin, activate it and navigate to ‘General Settings’ tab for using ‘Minify’ settings. Tick ‘Minify Enable’ setting. After clicking on ‘Save All Settings’, clear all cache.
(iv) WP Fastest Cache
You can minify CSS, HTML and JS together and can undertake browser caching. This is one of the popular WordPress plugins for minification.
- Joomla Extensions
(i) JCH Optimize
You can aggregate and compress CSS files for minimizing HTTP requests. You can facilitate gzip compression. Your site’s load time increases considerably.
- Drupal Module
(i) Advanced Aggregates Minify CSS
A 3rd party minifier cleans CSS. You can avail of GitHub YUI compressor for stripping CSS of all whitespaces and unwanted comments.
You can manually minify CSS but code management can be complex and errors can creep in. You have to manually remove the comments, line breaks, whitespaces, unwanted characters and block delimiters.
Tips for Optimum Minification
- Always backup you CSS code files
- Be alert while copy pasting the code
- Use a tool that facilitates aggregation of all CSS files of site in one
- For troubleshooting, use the original source files
- Use PageSpeed tools of Google for checking site performance after minification
You can enhance user’s browsing experience by optimizing your site. You may choose from online, manual or plugin minification methods based on your convenience and needs. Your site’s performance is bound to improve.