CODEWITHSUNDEEP
htmlcssperformanceperformance-testing
Abdul Hannan
Abdul Hannan

Reputation: 424

whats the difference between minifying css and compressing css

I was just trying to improve my site performance and for that i just run through google developer performance test, the results were pretty good but the google analyzer suggested me to compress the css files for better performance.

Until then compression and minifying was same for me, but now I Wanna know the difference between these two if there is any.

Also I want to know whether its a good idea to import all css in one main css file and then just link that particular css to the html pages

I am newbie I hope my questions make sense

Thanks

Upvotes: 4

Views: 2920

Answers (2)

Mohit
Mohit

Reputation: 522

See Minifiying your css file will remove all comments, blankspaces/whitespaces from your css file. Also it removes any irrelevant data from your css file and after minifying your css file you will notice that your css code will appear only in a single file. Now when you will load your web page and hit F12 you will notice this change in your css file and it will improve the performance by reducing the loading time of your web page.

Also as you talked about putting all your css files in one main css file will just provide you a touch of bundling all your css i.e at the time of loading you will notice that a single bundle of css will be loaded instead of loading all .css files separately. It will again improves the performance by reducing the loading time. For more information you can read the concept of bundling and minification on web.

It also provides you the concept of versioning your .css and .js files. You need not to worry about cleaning browser cache each time you make changes to your css or js files. Hope this will help.

Upvotes: -1

Quentin
Quentin

Reputation: 943207

Minifying removes whitespace and other unnecessary characters from the file to create a different CSS file with exactly the same meaning.

Compressing uses a compression algorithm (such as gzip) and adds an HTTP response header to tell the client that the file is compressed CSS (instead of plain text CSS) so it can be decompressed before being passed to the CSS parser.

Upvotes: 5

Related Questions