Web Performance Optimisation Techniques I: Minification

Minification is the process of removing unnecessary characters from code, such as whitespaces, comments, and formatting, without altering its functionality. The primary goal is to reduce file size, enabling websites to load faster by minimising the amount of data browsers need to process.

Why is Minification Important?

• Faster Loading Times: Smaller files result in quicker downloads, enhancing the user experience by reducing wait times.

• Improved Performance: Browsers can process minified code more efficiently, as there’s less extraneous information to sift through.

• Saves Bandwidth: Minification decreases the data transferred between the server and the user, which is particularly beneficial for mobile users or those with slower internet connections.

How Does Minification Work?

Let’s walk through the minification process step by step using a simple JavaScript example.

Original JavaScript Code

// Calculate the square of a number
const square = (number) => {
    return number * number;
};

console.log(square(5));

Here’s a breakdown of what happens during minification:

1. Parsing the Code

   The minification tool reads the original code (e.g., JavaScript, CSS, or HTML) and parses it into a structured format, such as an Abstract Syntax Tree (AST). An AST is a tree representation of the code's structure, but it’s often represented in a JSON-like format for clarity and ease of understanding.

   So for our example, a simplified AST representation could look like this:

   

   And in JSON format:

    {
      "type": "Program",
      "body": [
        {
          "type": "VariableDeclaration",
          "declarations": [
            {
              "type": "VariableDeclarator",
              "id": {
                "type": "Identifier",
                "name": "square"
              },
              "init": {
                "type": "ArrowFunctionExpression",
                "params": [
                  {
                    "type": "Identifier",
                    "name": "number"
                  }
                ],
                "body": {
                  "type": "BlockStatement",
                  "body": [
                    {
                      "type": "ReturnStatement",
                      "argument": {
                        "type": "BinaryExpression",
                        "operator": "*",
                        "left": {
                          "type": "Identifier",
                          "name": "number"
                        },
                        "right": {
                          "type": "Identifier",
                          "name": "number"
                        }
                      }
                    }
                  ]
                }
              }
            }
          ],
          "kind": "const"
        },
        {
          "type": "ExpressionStatement",
          "expression": {
            "type": "CallExpression",
            "callee": {
              "type": "MemberExpression",
              "object": {
                "type": "Identifier",
                "name": "console"
              },
              "property": {
                "type": "Identifier",
                "name": "log"
              }
            },
            "arguments": [
              {
                "type": "CallExpression",
                "callee": {
                  "type": "Identifier",
                  "name": "square"
                },
                "arguments": [
                  {
                    "type": "Literal",
                    "value": 5
                  }
                ]
              }
            ]
          }
        }
      ]
    }
   

2. Removing Unnecessary Characters

   The minification tool then analyses the AST and removes or shortens parts of the code that aren’t needed for execution. This includes:

   • Whitespace: Spaces, tabs, and line breaks are removed to make the code more compact.

     Example: const square = (number) => { becomes const square=number=>{

   • Comments: Developer notes are removed.

     Example: // Calculate the square of a number is removed entirely.

   • Unnecessary Semicolons: Optional semicolons are removed.

     Example: return number * number; becomes return number*number.

   • Curly Braces: If the function body is a single statement, the curly braces can be removed.

     Example: { return number * number; } becomes number*number.

   • Long Variable Names: If obfuscation is enabled, variable names like number might be shortened further (e.g., to x).

3. Optimising the Code

   The tool performs additional optimisations, such as:

   • Shortening Syntax: For example, converting (number) => { return number * number; } to number=>number*number.

   • Removing Unused Code: If there were unused functions or variables, they would be removed. In this example, all code is used, so nothing is removed.

4. Generating the Minified Output

   The tool converts the optimised AST back into a single, compact line of code. The result is a much smaller file that works the same way as the original.

   Minified Code:

    const square=number=>number*number;console.log(square(5));
   

Examples of Minifiers

Conclusion

Minification is a crucial technique for optimising web performance. By reducing file sizes, it enhances loading times, improves browser efficiency, and conserves bandwidth. Understanding the minification process and utilising the appropriate tools can significantly boost the performance of your website, providing a better experience for your users. Whether you're working with HTML, CSS, or JavaScript, incorporating minification into your development workflow is a smart and effective strategy for modern web development.