Minification and Bundling: How to Reduce Web Asset Size for Speed

Why Web Asset Weight Matters More Than Ever

Every kilobyte counts. In 2024, the median page weight on desktop reached 2.4 MB according to the HTTP Archive, with JavaScript alone accounting for roughly 500 KB and CSS adding another 80 KB on average. For mobile users on 3G or 4G connections, that translates to seconds of waiting — and seconds translate to lost revenue.

Google has made it abundantly clear: page speed is a ranking factor. Core Web Vitals directly measure loading performance (LCP), interactivity (INP), and visual stability (CLS). Heavy, unoptimized assets hurt all three metrics.

The good news? Two of the simplest, most impactful techniques you can implement today are minification and bundling. They require no redesign, no infrastructure overhaul, and no change to your user experience — just leaner, faster delivery of the same content.

Let’s break down exactly what they are, how they work, and how to implement them correctly.

Understanding Minification

What Minification Actually Does

Minification is the process of removing all unnecessary characters from source code without changing its functionality. That includes:

• Whitespace and indentation
• Line breaks
• Code comments
• Redundant semicolons
• Long variable and function names (in JavaScript)
• Unnecessary CSS selectors and shorthand conversions

The result is a file that looks unreadable to humans but executes identically in the browser — at a fraction of the size.

A Concrete Example

Consider this simple JavaScript function before minification:

// Calculate the total price including tax
function calculateTotal(price, taxRate) {
  // Multiply price by (1 + tax rate)
  const totalPrice = price * (1 + taxRate);
  
  // Return the total rounded to 2 decimal places
  return Math.round(totalPrice * 100) / 100;
}

After minification with a tool like Terser:

function calculateTotal(a,b){return Math.round(a*(1+b)*100)/100}

The original was 248 bytes. The minified version is 68 bytes. That’s a 72.5% reduction from a single function. Now multiply that across an entire codebase with thousands of lines, and the savings become substantial.

Minification by File Type

Different asset types benefit from minification in different ways:

Asset Type	Typical Size Reduction	Key Optimizations
JavaScript	30–60%	Variable shortening, dead code removal, whitespace
CSS	20–50%	Shorthand conversion, duplicate removal, whitespace
HTML	10–30%	Comment removal, whitespace collapsing, attribute trimming
SVG	20–40%	Metadata removal, path optimization, whitespace

JavaScript typically sees the largest gains because minifiers can safely rename local variables and remove dead code paths — a process sometimes called uglification.

Popular Minification Tools

The ecosystem has matured significantly. Here are the most reliable tools in 2024–2025:

• Terser — The industry standard for JavaScript minification. Supports ES6+ syntax and tree shaking.
• cssnano — A modular CSS minifier built on PostCSS. Highly configurable.
• html-minifier-terser — The go-to for HTML minification with smart defaults.
• SVGO — Specifically designed for SVG optimization.
• esbuild — A Go-based bundler and minifier that is extraordinarily fast (10–100x faster than JavaScript-based tools).

At Lueur Externe, we typically integrate Terser and cssnano into our build pipelines for client projects, ensuring every deployment serves fully optimized assets with zero manual effort.

Understanding Bundling

What Bundling Actually Does

Bundling is the process of combining multiple files into one (or a few) files. Instead of the browser downloading 15 separate JavaScript files and 8 CSS files, it downloads one or two bundles.

Why does this matter? Every file the browser requests incurs overhead:

• DNS lookup (if from a different domain)
• TCP connection setup
• TLS handshake (for HTTPS)
• HTTP request/response headers (typically 500–800 bytes each)
• Server processing time

With HTTP/1.1, browsers limit concurrent connections to a single domain (typically 6). That means 23 files would require multiple rounds of sequential requests. Even with HTTP/2’s multiplexing, there is still header overhead and priority management for each individual file.

The Real-World Impact

Let’s compare two scenarios for a typical WordPress site:

Before bundling:

• 12 JavaScript files (avg. 15 KB each) = 180 KB total, 12 HTTP requests
• 6 CSS files (avg. 10 KB each) = 60 KB total, 6 HTTP requests
• 18 total requests, ~240 KB of assets

After bundling and minification:

• 1 JavaScript bundle = 95 KB (minified + concatenated), 1 request
• 1 CSS bundle = 32 KB (minified + concatenated), 1 request
• 2 total requests, ~127 KB of assets

That’s an 87% reduction in HTTP requests and a 47% reduction in total file size. On a mobile connection with 100ms latency per request, that alone saves over 1.5 seconds of load time.

Modern Bundling Tools

The JavaScript ecosystem offers several mature bundlers:

• Webpack — The most feature-rich and widely adopted bundler. Extensive plugin ecosystem. Can be complex to configure.
• Vite — Uses native ES modules in development for instant startup, and Rollup under the hood for optimized production builds. Fast and developer-friendly.
• Rollup — Excellent for library bundling with superior tree shaking.
• esbuild — Blazingly fast. Written in Go. Great for straightforward bundling needs.
• Parcel — Zero-config bundler ideal for smaller projects.

Here’s a minimal Webpack configuration that handles both bundling and minification:

// webpack.config.js
const path = require('path');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    filename: 'bundle.[contenthash].js',
    path: path.resolve(__dirname, 'dist'),
    clean: true,
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'styles.[contenthash].css',
    }),
  ],
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: { drop_console: true },
        },
      }),
      new CssMinimizerPlugin(),
    ],
    splitChunks: {
      chunks: 'all',
    },
  },
};

Notice the [contenthash] in the filenames — this enables long-term caching by generating unique filenames each time the content changes, so browsers cache aggressively without ever serving stale assets.

Advanced Strategies Beyond the Basics

Code Splitting: The Smart Middle Ground

Bundling everything into a single massive file can actually be counterproductive. If your homepage only uses 30% of your total JavaScript, why force the user to download the other 70%?

Code splitting divides your bundle into smaller chunks loaded on demand:

• Route-based splitting — Each page or route gets its own chunk
• Component-based splitting — Heavy components (maps, charts, editors) load only when needed
• Vendor splitting — Third-party libraries are separated into a stable, highly cacheable chunk

With Webpack or Vite, dynamic imports enable this automatically:

// This creates a separate chunk loaded only when needed
const MapComponent = React.lazy(() => import('./components/HeavyMap'));

Tree Shaking: Eliminating Dead Code

Tree shaking is a form of dead code elimination that modern bundlers perform automatically on ES module syntax. If you import only one function from a utility library, tree shaking ensures only that function (and its dependencies) ends up in your bundle.

For tree shaking to work effectively:

• Use ES module syntax (import/export) instead of CommonJS (require/module.exports)
• Ensure your package.json includes "sideEffects": false (or lists actual side-effect files)
• Avoid wildcard imports like import * as utils from './utils'

Compression: The Final Layer

Minification and bundling reduce the source size. Compression reduces the transfer size. They work together, and the results compound:

Stage	JS Bundle Size
Original (unminified, unbundled)	450 KB
After bundling	420 KB
After minification	195 KB
After Gzip compression	58 KB
After Brotli compression	49 KB

Brotli (supported by all modern browsers) typically achieves 15–20% better compression than Gzip on text-based assets. Most modern hosting platforms and CDNs support it out of the box.

At Lueur Externe, as a certified AWS Solutions Architect team, we configure CloudFront distributions with Brotli compression enabled, combined with optimized build pipelines, to deliver the fastest possible experience to end users.

CMS-Specific Considerations

WordPress

WordPress sites are particularly prone to asset bloat. Each plugin can enqueue its own CSS and JS files — sometimes on every page, even when not needed. Common solutions:

• Asset Cleanup / Perfmatters — Selectively dequeue scripts and styles per page
• Autoptimize — Aggregates, minifies, and caches CSS/JS
• WP Rocket — Premium all-in-one solution with minification, concatenation, and lazy loading
• Build-tool integration — For custom themes, use Vite or Webpack in your theme’s build process

The key is to audit which assets load on which pages. A plugin for WooCommerce product filtering has no business loading its JavaScript on your blog posts.

PrestaShop

PrestaShop includes built-in CCC (Combine, Compress, Cache) functionality under Design > Performance. However, the native implementation has limitations:

• It can break modules that rely on specific load order
• It doesn’t perform advanced minification
• No tree shaking or code splitting

For production PrestaShop stores, a more robust approach involves:

• Disabling CCC and using a dedicated module or custom build process
• Implementing critical CSS extraction
• Leveraging a CDN with edge compression

As a certified PrestaShop expert agency, Lueur Externe has refined these optimization workflows across hundreds of e-commerce deployments, consistently achieving sub-2-second load times even for stores with large catalogs.

Measuring the Impact

You can’t improve what you don’t measure. Before and after implementing minification and bundling, test with:

• Google PageSpeed Insights — Gives you Core Web Vitals data and specific recommendations
• WebPageTest — Provides waterfall charts showing exactly how assets load
• Chrome DevTools Network tab — Shows individual file sizes, request counts, and timing
• Lighthouse — Built into Chrome, provides a comprehensive performance audit

Key metrics to track:

• Total transfer size — How many kilobytes the browser actually downloads
• Number of requests — Fewer is generally better
• Largest Contentful Paint (LCP) — Should be under 2.5 seconds
• Total Blocking Time (TBT) — Proxy for interactivity, affected by JS parse time
• First Contentful Paint (FCP) — When the user first sees content

Common Pitfalls to Avoid

Minification and bundling are straightforward in theory, but real-world implementations can trip you up:

• Breaking CSS specificity — Combining CSS files can change the cascade order. Always test thoroughly.
• Missing source maps — Without source maps, debugging production issues becomes nearly impossible. Generate them but don’t serve them publicly.
• Over-bundling — One 2 MB bundle is worse than several smaller chunks. Use code splitting.
• Forgetting about fonts and images — Asset optimization doesn’t stop at CSS and JS. Compress images (WebP/AVIF), subset fonts, and use font-display: swap.
• Not cache-busting — Without content hashing in filenames, users may receive stale cached assets after a deployment.
• Minifying already minified code — Running Terser on a .min.js file wastes build time with zero benefit. Detect and skip pre-minified files.

A Practical Implementation Checklist

Ready to optimize? Here’s a step-by-step approach:

1. Audit your current assets — Use Chrome DevTools to catalog every CSS, JS, and font file loaded on key pages.
2. Remove unused assets — Dequeue scripts that aren’t needed on specific pages.
3. Choose your build tool — Vite for new projects, Webpack for complex existing setups, or CMS plugins for WordPress/PrestaShop.
4. Configure minification — Enable Terser for JS, cssnano for CSS, and html-minifier for HTML.
5. Set up bundling with code splitting — Bundle related code, split by route or component.
6. Enable tree shaking — Use ES modules and mark side effects correctly.
7. Add content hashing — Ensure cache busting is automatic on every build.
8. Enable Brotli/Gzip compression — At the server or CDN level.
9. Test thoroughly — Run Lighthouse, check all pages for visual and functional regressions.
10. Monitor continuously — Set up performance budgets and alerts for regressions.

Conclusion: Small Optimizations, Big Results

Minification and bundling are not glamorous. They don’t involve cutting-edge design or groundbreaking features. But they are among the highest-ROI optimizations you can make for any website.

Reducing asset weight by 40–60% and cutting HTTP requests by 80%+ translates directly into:

• Faster load times
• Better Core Web Vitals scores
• Higher search engine rankings
• Improved conversion rates
• Lower bounce rates
• Reduced hosting and CDN costs

The tools are mature, the process is well-documented, and the results are immediate and measurable.

If you’re unsure where to start, or if you want a team that has been optimizing web performance since 2003, Lueur Externe can help. From WordPress and PrestaShop speed optimization to full AWS infrastructure tuning, we’ll ensure your assets are lean, your builds are automated, and your users get the fastest experience possible.

Contact Lueur Externe for a free performance audit →