Minification

Reduce file sizes by minifying CSS and JavaScript.

Overview

Minification removes unnecessary characters from code (whitespace, comments, etc.) without changing functionality. This reduces file sizes and improves load times.

Features

CSS Minification

  • Removes whitespace and comments
  • Combines selectors where possible
  • Shortens color values (#ffffff → #fff)
  • Removes unnecessary semicolons

Before:

/* Main styles */
.header {
    background-color: #ffffff;
    padding: 20px;
}

.header .logo {
    width: 100px;
}

After:

.header{background-color:#fff;padding:20px}.header .logo{width:100px}

JavaScript Minification

  • Removes whitespace and comments
  • Shortens variable names (in safe contexts)
  • Removes unused code where detectable
  • Optimizes expressions

Before:

// Initialize counter
function incrementCounter(currentValue) {
    var newValue = currentValue + 1;
    return newValue;
}

After:

function incrementCounter(n){return n+1}

Enabling Minification

From Dashboard

  1. Go to your zone settings
  2. Click "Optimization" tab
  3. Enable "CSS Minification" and/or "JS Minification"
  4. Save changes

Per-File Control

Minification applies to files with these extensions:

  • CSS: .css
  • JavaScript: .js

Files with .min.css or .min.js extensions are already minified and skipped.

How It Works

  1. First request arrives for /style.css
  2. CDN fetches from origin
  3. File is minified at the edge
  4. Minified version is cached
  5. Subsequent requests serve cached minified version

Exclusions

Already Minified Files

Files containing .min. in the name are skipped:

style.min.css      → Skipped
app.min.js         → Skipped

Large Files

Very large files (>1MB) may be served without minification to avoid processing delays.

Source Maps

Source map files (.map) are not minified.

Testing Minification

Check Response Headers

Look for the X-Minified header:

curl -I https://your-zone.cdn.nordiccdn.com/style.css

Compare File Sizes

# Original from origin
curl -so /dev/null -w "%{size_download}" https://origin.com/style.css

# Minified from CDN
curl -so /dev/null -w "%{size_download}" https://cdn.example.com/style.css

Size Savings

Typical savings by file type:

File Type Typical Savings
CSS 15-30%
JavaScript 20-40%
Already optimized 5-10%

Compatibility

CSS Compatibility

Minification is safe for all standard CSS. However, some edge cases:

  • CSS hacks for old browsers may break
  • Unusual comment-based selectors may be affected
  • Test thoroughly if using non-standard CSS

JavaScript Compatibility

Minification preserves functionality but:

  • Eval-based code may have issues
  • Code relying on function.toString() may break
  • Some obfuscation techniques may conflict

Best Practices

1. Source Control Unminified Files

Keep original, readable code in your repository. Let the CDN handle minification.

2. Test After Enabling

After enabling minification:

  1. Clear cache
  2. Test all pages thoroughly
  3. Check browser console for errors
  4. Verify functionality works

3. Use Source Maps for Debugging

If you need to debug minified code:

  1. Generate source maps during build
  2. Upload source maps alongside code
  3. Browser DevTools will map to original source

4. Don't Double-Minify

If you already minify during build, either:

  • Disable CDN minification
  • Name files with .min. to skip processing

Troubleshooting

CSS Not Minifying

  1. Check file extension is .css
  2. Verify minification is enabled
  3. Check file isn't named .min.css
  4. Clear CDN cache

JavaScript Errors After Minification

  1. Check browser console for specific errors

  2. Test the original file directly

  3. Look for code that may not minify safely:

    • eval() usage
    • function.toString()
    • Unusual string manipulation

  4. Disable minification for problematic files

Visual Changes After CSS Minification

  1. Check for CSS hacks that rely on whitespace
  2. Verify no important comments were removed
  3. Test in all target browsers
  4. Compare original and minified side-by-side

Combining with Other Optimizations

With Compression

Minification + gzip/brotli compression stack effectively:

Original:     100 KB
Minified:      70 KB (30% reduction)
Gzip:          15 KB (78% further reduction)
Total:         85% smaller than original

With Bundling

For best results, combine:

  1. Bundle files during build
  2. Let CDN minify the bundles
  3. Enable compression
  4. Use HTTP/2 for parallel delivery