β‘ As a Web Developer, you should always minify your CSS/JS!
Minifying your code is crucial to ensure your website is fast and good performing for modern SEO!
π Learn how to minify your CSS/JS in seconds!
Minifying your code is crucial to ensure your website is fast and good performing for modern SEO!
π Learn how to minify your CSS/JS in seconds!
1οΈβ£ Why you should minify CSS/JS
Minifying your CSS/JS reduces its size, no unnecessary white spaces, and no comments are loaded.
Those changes can drastically decrease the payload size of your request.
For JS, it even can strip down function and variable names!
Minifying your CSS/JS reduces its size, no unnecessary white spaces, and no comments are loaded.
Those changes can drastically decrease the payload size of your request.
For JS, it even can strip down function and variable names!
2οΈβ£ How much does minify save you?
In our example below, we have a simple portfolio page.
The default CSS was not minified and had a size of 2.1 kb.
The minified outcome is 1.1kb, which is nearly 50% savings.
Imagine those savings on greater websites! π€―
In our example below, we have a simple portfolio page.
The default CSS was not minified and had a size of 2.1 kb.
The minified outcome is 1.1kb, which is nearly 50% savings.
Imagine those savings on greater websites! π€―
3οΈβ£ How to view minified code in your Browser?
The Chrome DEV console offers you to view directly minified code un-minified.
This works easy for CSS and can be hard for JS as it also transforms your function and variable names!
The Chrome DEV console offers you to view directly minified code un-minified.
This works easy for CSS and can be hard for JS as it also transforms your function and variable names!
4οΈβ£ How to minify your CSS/JS online?
There are various websites to minify your CSS and JS quickly.
Some of the most known are:
- minifier.org
- cssminifier.com
- javascript-minifier.com
There are plenty more. These are just some examples.
π
There are various websites to minify your CSS and JS quickly.
Some of the most known are:
- minifier.org
- cssminifier.com
- javascript-minifier.com
There are plenty more. These are just some examples.
π
You may do not want to minimize your CSS always by hand.
It is recommended to set up a CI that can handle automatically minifying your CSS and JS.
It does not matter which CI tool you are using in the end.
Having just the savings, in general, can be a huge boost!
It is recommended to set up a CI that can handle automatically minifying your CSS and JS.
It does not matter which CI tool you are using in the end.
Having just the savings, in general, can be a huge boost!
5οΈβ£ CI minifier for CSS
Here is a list of minifier for CSS:
- Webpack: webpack.js.org/plugins/css-miβ¦
- Gulp: github.com/scniro/gulp-clβ¦
- Grunt: github.com/gruntjs/grunt-β¦
And there are many more. Those are just examples! Add your favorites in the comment if I missed them π
Here is a list of minifier for CSS:
- Webpack: webpack.js.org/plugins/css-miβ¦
- Gulp: github.com/scniro/gulp-clβ¦
- Grunt: github.com/gruntjs/grunt-β¦
And there are many more. Those are just examples! Add your favorites in the comment if I missed them π
6οΈβ£ CI minifier for JS
Here is a list of minifier for JS:
- Webpack, built-in: webpack.js.org/configuration/β¦
- Gulp uglify: npmjs.com/package/gulp-uβ¦
- Grunt: github.com/gruntjs/grunt-β¦
- uglify-js: npmjs.com/package/uglifyβ¦
Yes, if you haven't noticed it, use uglify π
Here is a list of minifier for JS:
- Webpack, built-in: webpack.js.org/configuration/β¦
- Gulp uglify: npmjs.com/package/gulp-uβ¦
- Grunt: github.com/gruntjs/grunt-β¦
- uglify-js: npmjs.com/package/uglifyβ¦
Yes, if you haven't noticed it, use uglify π
This is the third thread breaking down some methods to boost your website's performance with ease and no hassle. π
In 2 days, I will post another thread with details on optimizing images for your website and delivering them as fast as possible! β‘
In 2 days, I will post another thread with details on optimizing images for your website and delivering them as fast as possible! β‘
β
Done
If you found this useful, consider following me @michaelketzer and retweet the first tweet! π
Did I miss something? Please let me know π
If you found this useful, consider following me @michaelketzer and retweet the first tweet! π
Did I miss something? Please let me know π
β’ β’ β’
Missing some Tweet in this thread? You can try to
force a refresh
γ
