Minify CSS, JS, and HTML

Introduction

Computer code often contains extra whitespace and formatting to make it easier for human beings to read. However, when a code file is being executed it will be read primarily by machines and the excess white space and other unneeded characters no longer provide value.

Removing unnecessary characters (minification) will reduce file size, causing the file to be downloaded and executed more quickly.

This Best Practice Deep Dive provides some background on minification, describes some issues involved with removing unnecessary characters from source code, tells you how AT&T Video Optimizer can help identify files that could be minified, and provides recommendations for minifying your CSS, JS, and HTML files.

Background

Minification means removing all unnecessary characters from source code without affecting functionality.

Unnecessary characters can include white space characters, new line characters, comments, and sometimes block delimiters, which are used to add readability to the code but are not required for it to execute.

Removing those characters and compacting files can save many bytes of data and speed up downloading, parsing, and execution time.

The Issue

You can minify your files manually or programmatically.

There are many third party solutions available for minifying your code. By adding minification steps to your publication workflow, you reduce the size of these files, allowing them to be transmitted and processed more quickly, removing milliseconds from your app loading time.

However, there are some important things to consider when minifying text files:

• Is the solution compatible with your code? For example, does it break your CSS?
• Is the solution compatible with the way you work?

Best Practice Recommendation

The Best Practice Recommendation is to minify files whenever possible as long as it is compatible with your code and your workflow.

The AT&T Video Optimizer runs a test on the trace data from your application that checks for opportunities to streamline your files through minification.

If Video Optimizer determines that more than 5% of the files in your app could be shrunk further, this test will fail and a table of the files that could be minified will be displayed in the test results. If your app fails this test you should consider minification.