What Is Minification? Smaller Website Code Explained

The six points in the video

This is a silent video. The headings, explanations and labels below reproduce the information on screen.

1. 1

   Step 1: Start with the source file

   0:18

   Developers write readable code with spacing and useful comments.

   On-screen labels: Readable source; Useful formatting; Editable project.

2. 2

   Step 2: Remove unnecessary characters

   0:30

   A minifier can strip whitespace and other non-essential text.

   On-screen labels: Less whitespace; Removed comments; Smaller output.

3. 3

   Step 3: Preserve the behaviour

   0:42

   The built file should still perform its intended task.

   On-screen labels: Same intended result; Valid output; Working interaction.

4. 4

   Step 4: Compression is another step

   0:54

   Minification and transfer compression can work together.

   On-screen labels: Smaller source text; Compressed transfer; Separate techniques.

5. 5

   Step 5: Keep the original source

   1:06

   Future maintenance should use the editable project files.

   On-screen labels: Original project; Version history; Rebuild process.

6. 6

   Step 6: Test the production build

   1:18

   Check the actual optimised files used by visitors.

   On-screen labels: Important pages; Browser errors; Essential interactions.

Common questions

Go further