Your website has to load a lot of files, including your HTML, CSS, and JavaScript. You need this code to be as clean and fast as possible. The problem is this code was written to be read by humans. It includes extra white space, comments, and formatting that computers don’t need in order to run the code. Fortunately, this can be fixed! A great way to help speed up your code is to minify it. Minify? What is minify? Let’s take a look.
What it Means to Minify and Why it is Beneficial
Minify is a programming term that basically means to remove any unnecessary characters that are not required for the code to execute. Minifying your code speeds up your page loading, making visitors and search engines happy.Minifying your code removes:
- White space characters
- New line characters
- Comments
- Block delimiters
These types of characters are used to add readability to the code but they are not required for the code to execute properly. Minifying your code is especially useful for interpreted languages that run over the Internet, such as CSS, HTML, and JavaScript. It reduces the amount of code that has to be transferred over the web. The superhighway that is the ‘net still has a limited amount of bandwidth and supplying the smallest and cleanest code possible is in our best interest as web developers.
Speed Comparison
You can test the speed of your page loads using online tools like Google PageSpeed Tools.PageSpeed Tools
Simply paste in your URL and get the results. You should try this often. I highly recommend doing a before and after comparison so you know the quantitative value of improvements that your efforts have made.
Every site is different, but as an example, a before score might be around the mid-80s and an after score might be around the mid-90s. It will give you results for desktop and mobile separately and it will highlight the areas that are the slowest (such as server response) and give you tips on how to fix it.
Here is a quick list of tools that will minify and combine files. Most are online, but there is one here that work offline.
Nearly every team at Google that write JavaScript uses Closure Linter. It check your files for issues such as operator placement, missing semicolons, spacing, etc. This helps in debugging to ensure your code has all the necessary elements to run.
The Closure Stylesheets will concatenate and minify a list of stylesheets. It will even make a vendor-specific stylesheet. Vendors include WEBKIT, MOZILLA, OPERA, MICROSOFT, and KONQUEROR. When the vendor’s flag is present, the vendor-specific properties for other vendors will be removed.
CSS Minifier is a free online tool from Dan’s Tools that will remove the spacing, indentation, new lines, and comments from your CSS code and make your code and website faster. You paste in your code and select Minify. Once your code is minified, you copy and paste it back into your site.
This is another minifying tool from Dan’s Tools. Just like the CSS Minifier, you paste in your code, click to minify, and then copy and paste back into your site. There are no settings or adjustments to deal with, making it extremely simple and easy to use.
This one works as expected – you paste in your code and click to minify. It also does CSS and it even has a JPEG optimizer and image resizer. It’s very easy to use and you can download as a file.
This one will minify your CSS, HTML, and JavaScript using UglifyJS 2, Clean-CSS and HTML Minifier. You can paste or drag your files and click the button. There are lots of options for ensuring compatibility, rebasing URLs, debugging, etc. This has more features and options than most online minifiers and it’s easy to use.
For OS 10.7 users and up, Smaller will compress your HTML, CSS, and JavaScript for your desktop. It will let you combine multiple files into one. This is a paid app, but you can download a free 30-day trial.
Closure Tools
Closure Tools is a suite of tools from Google Developers. It includes lots of tools to help speed up your JavaScript code. Here’s a look at some of the tools that help with minifying your code.
Closure Compiler
The Closure Compiler is a JavaScript optimizer that rewrites your code and minimizes the dead space, allowing it to download quicker. It will also check your syntax, variable references, and types, and it will warn about common JavaScript issues. Your code will be optimized, less buggy, and easier to maintain. There are several levels that it will optimize – for white space only, simple, and advanced. It makes your code compact and improves its performance.
Closure Linter
How to Minify Your Websites CSS, HTML & Javascript - Closure LinterNearly every team at Google that write JavaScript uses Closure Linter. It check your files for issues such as operator placement, missing semicolons, spacing, etc. This helps in debugging to ensure your code has all the necessary elements to run.
Closure Stylesheets
How to Minify Your Websites CSS, HTML & Javascript - Closure StylesheetsThe Closure Stylesheets will concatenate and minify a list of stylesheets. It will even make a vendor-specific stylesheet. Vendors include WEBKIT, MOZILLA, OPERA, MICROSOFT, and KONQUEROR. When the vendor’s flag is present, the vendor-specific properties for other vendors will be removed.
CSS Minifier
How to Minify Your Websites CSS, HTML & Javascript - CSS MinifierCSS Minifier is a free online tool from Dan’s Tools that will remove the spacing, indentation, new lines, and comments from your CSS code and make your code and website faster. You paste in your code and select Minify. Once your code is minified, you copy and paste it back into your site.
JavaScript Minify Tool
How to Minify Your Websites CSS, HTML & Javascript - JavaScript Minify ToolThis is another minifying tool from Dan’s Tools. Just like the CSS Minifier, you paste in your code, click to minify, and then copy and paste back into your site. There are no settings or adjustments to deal with, making it extremely simple and easy to use.
JavaScript Minifier
How to Minify Your Websites CSS, HTML & Javascript - JavaScript MinifierThis one works as expected – you paste in your code and click to minify. It also does CSS and it even has a JPEG optimizer and image resizer. It’s very easy to use and you can download as a file.
Online JavaScript/CSS Compressor
How to Minify Your Websites CSS, HTML & Javascript - Online JavaScript CSS CompressorThis one will minify your CSS, HTML, and JavaScript using UglifyJS 2, Clean-CSS and HTML Minifier. You can paste or drag your files and click the button. There are lots of options for ensuring compatibility, rebasing URLs, debugging, etc. This has more features and options than most online minifiers and it’s easy to use.
Smaller
How to Minify Your Websites CSS, HTML & Javascript - SmallerFor OS 10.7 users and up, Smaller will compress your HTML, CSS, and JavaScript for your desktop. It will let you combine multiple files into one. This is a paid app, but you can download a free 30-day trial.
0 comments
Post a Comment