Minification is the process of removing all unnecessary characters from a CSS, JavaScript or HTML file without changing its functional behaviour: spaces, line breaks, comments, redundant semicolons, indentation. The resulting file is lighter, and therefore faster to download and parse by the browser. It is one of the simplest performance optimisations to implement and among those that deliver immediate, measurable gains on PageSpeed scores.
What exactly is minification?
When you write CSS or JavaScript, you format it to be readable by humans: you indent the code, add comments to explain the logic, and add blank lines between blocks. All of this is essential for maintaining the code, but completely unnecessary for the browser that executes it. Minification systematically removes everything that is not needed for execution.
In practice: a 120 KB CSS file with comments, indentation and whitespace can be reduced to 85 KB after minification — without losing a single style rule. A 200 KB JavaScript file can drop to 140 KB. This 20 to 30% reduction in file weight translates directly into a shorter load time, particularly noticeable on mobile connections and slow networks.
Minification vs compression: what is the difference?
These two terms are often confused, but they describe distinct and complementary operations. Minification modifies the content of the file: it removes characters, shortens variable names (in JavaScript), and rewrites the code to make it shorter. The minified file is permanent — it is this modified file that is stored on the server.
Compression (GZIP or Brotli), on the other hand, does not modify the file: it compresses it on the fly during network transfer, like a ZIP archive. The server sends the compressed version and the browser decompresses it on receipt. Both optimisations are stackable: a CSS file that has been minified and then GZIP compressed can achieve a 70 to 80% reduction compared to the original unoptimised version.
CSS minification
Removal of whitespace, comments, line breaks and redundant rules. Typical reduction: 15 to 25%.
JS minification
Beyond whitespace and comments, also shortens variable names (uglification). Typical reduction: 20 to 40%.
HTML minification
Removal of whitespace between tags and HTML comments. More modest gain: 5 to 15%.
CSS minification in detail
CSS minification removes all characters that do not change the visual rendering: multiple spaces (one space between selector and brace is enough), line breaks, comments (`/* ... */`), semicolons before closing braces, unnecessary zeros (0.5 becomes .5), and sometimes units on zero values (0px becomes 0). Tools like cssnano or clean-css can also optimise colours (#ffffff becomes #fff) and merge identical selectors.
JavaScript minification: uglification included
JavaScript minification goes further than CSS. In addition to removing whitespace and comments, advanced tools like Terser or UglifyJS also perform uglification: renaming local variables to short names (one or two letters), simplifying equivalent expressions, and removing dead code. A human-readable JavaScript file with descriptive variable names (`updateProductPrice`) becomes a compact file with variables `a`, `b`, `c` — functionally identical, but much shorter.
Source maps: debugging minified code
Impact on Core Web Vitals and PageSpeed score
Google PageSpeed Insights explicitly flags unminified CSS and JavaScript files as optimisation opportunities, with an estimate of the kilobytes that can be saved. Minification improves TBT (Total Blocking Time) in particular by reducing the time it takes to parse JS files, and contributes to improving LCP (Largest Contentful Paint) by reducing the load time of render-blocking resources.
The gain in PageSpeed score depends on the amount of unminified code present on your store. On a typical PrestaShop store where multiple modules each add their own CSS and JS files, minification can add 5 to 15 points to the mobile score.
Minification in PrestaShop: built-in settings
PrestaShop natively includes minification and concatenation options in the back office, accessible via Advanced Parameters > Performance. Two options are available: minification of HTML, CSS and JavaScript files on the one hand, and concatenation of CSS and JS files into a single file on the other (which reduces the number of HTTP requests).
- Access via: Back office → Advanced Parameters → Performance → CCC (Combine, Compress, Cache)
- "Compress CSS": minifies and concatenates stylesheets into a single file
- "Compress JavaScript": minifies and concatenates JS files into a single file
- "Apache optimisation": enables server-side GZIP compression
- Warning: some poorly coded modules may cause conflicts during concatenation — test after enabling