The verb “to minify” means to make something smaller.
In web design and development this refers to the process of removing unnecessary whitespace and other characters from HTML, CSS, and JavaScript to make them download more quickly.
While many developers minify their HTML, CSS, and JavaScript using a program, I don't recommend it in most cases. Because programs tend to be very literal and can remove things that should be left in the file. Instead, if you need to minify your HTML, CSS, and JavaScript, you should do it manually and very carefully.
What Can Be Removed to Minify HTML?
To minify HTML effectively, you can remove:
- Carriage returns
- White space surrounding tags (such as tabs to indent the code)
- Closing slashes (/) on tags in documents that are not using an XHTML doctype
You should never remove quotation marks around tag attributes. While this is valid in some HTML DTDs, it can cause problems with older browsers and make the code even more confusing for people editing it.
What Can Be Removed to Minify CSS?
To minify CSS effectively, you can remove:
- Carriage returns
- White space surrounding CSS properties (such as tabs to indent the code)
- The last semi-colon (;) in a style property (the one before the closing curly brace
})
You should be very careful when removing the semi-colons. If you remove one from the middle of a style property, it will break that property and could make the rest of the document unusable as well.
