How To Minify Your Scripts And Stylesheets

Scripts and stylesheets are like the backbone for a website. A website typically has at least one JavaScript and stylesheet file each. JavaScript allows you to implement complex things and stylesheet describes how HTML elements are to be displayed.

Sometimes, these scripts and stylesheets often contain unnecessary data. Thus, it is recommended to minify your scripts and stylesheets. This practice will essentially reduce your file size and improve your website page speed considerably.

You might also want to read how to optimize images for your website or how to compress your website. This article is part of best useful tips for your WordPress.

What is Minification

Minification is a process of removing unnecessary data from the source code without affecting its functionality. This includes removing white spaces, line breaks, comments, and block delimiters from the original code.

Although minification will remove readability to the code, yet it will also decrease the file size. This will result in faster loading speed since data that need to be transferred is getting smaller. Please take a look at the example below.

How To Minify Your Scripts And Stylesheets
Example comparison before and after minification process.

Minify Manually

For manual minification, I would like to recommend you to use the minifying tool rather than removing it manually by hand. This will decrease the possibility to produce any errors. Besides, there are many online tools that can minify your scripts and stylesheets easily and quickly. Here are some of the free tools available on the internet.

Closure Compiler

Closure Compiler is a JavaScript compiler from Google. It comes with 3 levels of optimization and allows you to minify your JavaScript. This tool has the ability to check your syntax and variable reference. On top of that, it will also notify you if there are any errors found.

Minify

Minify is a JavaScript and CSS minifier tool created by Matthias Mullie. This tool can remove whitespaces and strips comments from your codes. Its usage is very simple where you can simply paste your raw codes or script URLs into its textarea. And by clicking on Minify button, it will automatically combine your files and codes and optimize it.

Dan's Tool

Javascript Minifier and CSS Minify are part of various tool collection created by Dan's Tool. Although you can paste your raw code, load file or load URL on CSS Minify. However,  you can only paste raw JavaScript code on Javascript Minifier since there is no other option to load from other sources.

Minify Your JavaScript/CSS

Similarly, you can also use Javascript-minifier.com or Cssminifier.com by Andrew Chilton. This tool is pretty simple to use as it only allows you to paste your code. In contrast to the previous tools, this is the only one that provides an API.

Online JavaScript/CSS/HTML Compressor

The last minifying tool on our list is Online JavaScript/CSS/HTML Compressor by Mike Horn. This tool comes with tons of options compared to other online minifiers. You can paste or drag your codes into its textarea and click the buttons. Besides JavaScript and CSS, you can also minify your HTML using this tool.

Minify With A Plugin

If you are a WordPress user, you can also minify your scripts and stylesheets by using a plugin. There are several good plugins available in the WordPress directory. Here are some of the best plugins.

Autoptimize

Autoptimize is one of the most popular minifying plugins among WordPress users. This plugin can minify all your JavaScripts and CSS files including HTML as well. Apart from that, Autoptimize can also combine your script and stylesheet files and cache it or set it to load later. This will further improve your website performance.

Additionally, Autoptimize allows you to remove query strings which will improve your performance score on Pingdom speed test or similar tester. Moreover, you will also have an ability combine your Google Font, remove it or load fonts asynchronously.

Fast Velocity Minify

Fast Velocity Minify is another popular minifier plugin. It comes with basic and pro options. This plugin not only can minify your JavaScript, CSS, and HTML, it also compatible with any visual frontend editor.

Similar to the previous plugin, this one also allows you to combine your Google Font with various settings. And on top of that, you can also include any path in the ignore list to prevent it from being optimized.

Merge + Minify + Refresh

Merge + Minify + Refresh is a very simple minifying plugin that comes with a minimal setting. This plugin can combine and minify your JavaScript and CSS. Despite lacking ability to minify your HTML, yet this plugin offer compression for your scripts and stylesheets. And apart from that, you can also exclude any files from being minified.

Conclusion

In short, by minify your scripts and stylesheets, it will decrease the file size that needs to be download. And by combining these files will decrease your file request. Both of this methods will substantially help you improve your site loading speed. If you have any other ways to minify, please share it with us in the comment section.

  • If you think your friends would find this useful, please share it with them. It will allow us help more people.
  • To get more of our latest update, please subcribe to our newsletter.
  • You can also print this article for reference.
This article has been printed from https://www.jebatonline.com/articles/how-to-minify-your-scripts-and-stylesheets/

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.