Contents
You are now reading:
CSS and JS code minification – what is it? How does it speed up website performance?
What is code minification?
Minification is a process that aims to reduce the size of source code by removing unnecessary characters.
After minification, all of the following are removed from the code:
- unnecessary whitespace characters (spaces, enters, etc.),
- comments (blocks of text covered by /* */ and single-line content preceded by //),
- sometimes variable/function names are shortened.
Minification reduces code size by several dozen percent. Minified code executes in the same way as before minification, but due to its smaller size, the page loads faster and the browser interpreter operates on smaller amounts of data. As a result of minification, pages download and render faster for users. The minification process typically involves JS (JavaScript) and CSS (stylesheet) code, which are stored in separate files.
But be careful!
Minification modifies the source code and can make subsequent modifications difficult. Always copy a file before minifying. Make any changes to the copied files, and then re-minify the code after making the changes. Best practice is to keep the source files in the appropriate directories on your server, alongside the minified files. If you're doing it yourself, you can use online tools that are fast and free.
(The rest of the article can be found below the form)
Example of what the page code looks like before minification
And this is what the sample page code looks like after minification
Simpler, right? 🙂 For Google, it certainly is! Page speed affects the positioning of websites in search engines – so proper code minification is an action that improves a website's SEO.
CSS Minification FAQ
Minification is the process of reducing the size of a website's source code. It involves permanently removing all characters from text files that are not necessary for the browser to execute the code correctly. This procedure is most often used for style sheets (CSS) and scripts (JavaScript).
During this process, algorithms clean the code of, among others:
- unnecessary whitespace characters (spaces, tabs, enters),
- comments left by programmers (e.g. blocks of text marked with /* */ or //),
- long variable and function names (which are sometimes shortened).
By removing unnecessary characters, the size of code files can be reduced by several dozen percent. This smaller size means the page loads faster, and the browser interpreter has less data to process. Faster loading and rendering of the website is highly appreciated by Google's crawlers, which directly improves the website's SEO positioning in search results.
Minified code becomes a dense wall of text that is extremely difficult for humans to read and modify. Therefore, you should never work solely on minified files. Best practice is to store the original source files alongside the minified ones on the server. Any changes and corrections should be applied to the readable original, and only then should they be saved should they be minified again.
Summary
The above article covers the following topics:
- Minification is the process of shrinking source code by removing unnecessary comment characters and shortening variable names. This reduces the size of JS and CSS files by several dozen percent. Minified code works the same way, but the page loads and renders faster, improving SEO and search engine rankings.
