What is Minification and How to Test if it is Actually Working

1. What is Minification

Minification is the process of removing everything from source code that a browser does not need to execute it. This includes whitespace, line breaks, comments, and long variable names. The resulting file is functionally identical to the original but significantly smaller.

A CSS file written for human readability might look like this:

/* Main navigation styles */
.nav-container {
    display: flex;
    align-items: center;
    padding: 16px 24px;
    background-color: #ffffff;
}

After minification it becomes:

.nav-container{display:flex;align-items:center;padding:16px 24px;background-color:#fff}

Same output in the browser. A fraction of the bytes over the wire.

The same principle applies to JavaScript and HTML. Minified JavaScript also shortens variable and function names where safe to do so, which compounds the size reduction.

2. Why it Matters

Every byte of CSS and JavaScript has to be downloaded before the browser can render the page. Unminified assets increase page load time, increase bandwidth costs, and penalise your Core Web Vitals scores. On mobile connections the difference between a minified and unminified asset bundle can be several seconds of load time.

The impact is not theoretical. A JavaScript file that is 400KB unminified is routinely 150KB or less after minification, before any compression is applied on top.

3. Why You Cannot Assume it is Working

Most teams believe minification is handled because something is configured to do it. A WordPress plugin is active. A CDN toggle is switched on. A build pipeline supposedly runs. Everyone moves on. Performance is declared handled.

But assumptions fail silently. Plugins get disabled during updates. Build steps get bypassed in deployment shortcuts. CDN configurations get overridden. The site continues to serve unminified assets while the team believes otherwise.

The only way to know is to measure it.

4. How to Test it From the Terminal

The script below checks your HTML, CSS, and JavaScript assets and colour codes the results. Green means likely minified. Red means likely not minified. Yellow means borderline and worth inspecting.

4.1 Create the Script

Paste this into your terminal:

cat << 'EOF' > check-minify.sh
#!/bin/bash

if [ -z "$1" ]; then
  echo "Usage: ./check-minify.sh https://yourdomain.com"
  exit 1
fi

SITE=$1

GREEN="\033[0;32m"
RED="\033[0;31m"
YELLOW="\033[1;33m"
NC="\033[0m"

colorize() {
  LINES=$1
  TYPE=$2

  if [ "$TYPE" = "html" ]; then
    if [ "$LINES" -lt 50 ]; then
      echo -e "${GREEN}$LINES (minified)${NC}"
    else
      echo -e "${RED}$LINES (not minified)${NC}"
    fi
  else
    if [ "$LINES" -lt 50 ]; then
      echo -e "${GREEN}$LINES (minified)${NC}"
    elif [ "$LINES" -lt 200 ]; then
      echo -e "${YELLOW}$LINES (borderline)${NC}"
    else
      echo -e "${RED}$LINES (not minified)${NC}"
    fi
  fi
}

echo
echo "Checking $SITE"
echo

echo "---- HTML ----"
HTML_LINES=$(curl -s "$SITE" | wc -l)
echo -n "HTML lines: "
colorize $HTML_LINES "html"
echo

echo "---- CSS ----"
curl -s "$SITE" \
| grep -oE 'https?://[^"]+\.css' \
| sort -u \
| while read url; do
    LINES=$(curl -s "$url" | wc -l)
    SIZE=$(curl -s -I "$url" | grep -i content-length | awk '{print $2}' | tr -d '\r')
    echo "$url"
    echo -n "  Lines: "
    colorize $LINES "asset"
    echo "  Size:  ${SIZE:-unknown} bytes"
    echo
done

echo "---- JS ----"
curl -s "$SITE" \
| grep -oE 'https?://[^"]+\.js' \
| sort -u \
| while read url; do
    LINES=$(curl -s "$url" | wc -l)
    SIZE=$(curl -s -I "$url" | grep -i content-length | awk '{print $2}' | tr -d '\r')
    echo "$url"
    echo -n "  Lines: "
    colorize $LINES "asset"
    echo "  Size:  ${SIZE:-unknown} bytes"
    echo
done
EOF

chmod +x check-minify.sh

4.2 Run It

./check-minify.sh https://yourdomain.com

5. Reading the Output

5.1 Properly Minified Site

Checking https://example.com

---- HTML ----
HTML lines: 18 (minified)

---- CSS ----
https://example.com/assets/main.min.css
  Lines: 6 (minified)
  Size:  48213 bytes

---- JS ----
https://example.com/assets/app.min.js
  Lines: 3 (minified)
  Size:  164882 bytes

5.2 Site Leaking Development Assets

Checking https://example.com

---- HTML ----
HTML lines: 1243 (not minified)

---- CSS ----
https://example.com/assets/main.css
  Lines: 892 (not minified)
  Size:  118432 bytes

---- JS ----
https://example.com/assets/app.js
  Lines: 2147 (not minified)
  Size:  402771 bytes

The line count is the key signal. A minified CSS or JavaScript file collapses to a handful of lines regardless of how large the source file was. If you are seeing hundreds or thousands of lines in production, your minification pipeline is not running.

Minification is not a belief system. It is measurable in seconds from a terminal. If performance matters, verify it.