{"id":3049,"date":"2017-03-13T18:55:44","date_gmt":"2017-03-13T23:55:44","guid":{"rendered":"http:\/\/cssnewbie.com\/?p=2175"},"modified":"2017-03-13T18:55:44","modified_gmt":"2017-03-13T23:55:44","slug":"how-to-minify-your-css","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/how-to-minify-your-css\/","title":{"rendered":"How to Minify Your CSS"},"content":{"rendered":"<p>Minifying your CSS is a great and really easy option for optimizing the speed of your site. When you minify your CSS, you&#8217;re basically compressing the files so that they&#8217;re smaller and easier for your server to grab quickly. Having minified CSS files (and JavaScript files too!) can go a long way in making your site more efficient. Another benefit of minifying your CSS code is that it makes the code a lot less legible than if it were in typical standard CSS format. This way, it&#8217;s that much more difficult for other developers to steal or replicate your custom code.<\/p>\n<p>If you&#8217;ve never heard of file minifying before and are skeptical about or intimidated by the process &#8212; don&#8217;t be. There are dozens upon dozens of free services available that will minify your CSS files for you in minutes &#8212; all you have to do is copy and paste the code of your CSS file into a textarea and press submit, and the minified code will be generated for you.<\/p>\n<p>Here are some of the best free CSS minifying tools available:<\/p>\n<p>1. <a href=\"http:\/\/www.cleancss.com\/css-minify\/\" target=\"_blank\" rel=\"noopener noreferrer\">Dan&#8217;s Tools CSS Minifier<\/a><\/p>\n<p><a href=\"http:\/\/www.cleancss.com\/css-minify\/\"><img decoding=\"async\" loading=\"lazy\" class=\" wp-image-2176 aligncenter\" src=\"https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2017\/03\/Screen-Shot-2017-03-14-at-10.57.40-AM.png\" alt=\"Screen Shot 2017-03-14 at 10.57.40 AM\" width=\"692\" height=\"628\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>This CSS minifier gets the job done quickly and easily. In only seconds your CSS code\u00a0will be compressed and ready to add to your server.<\/p>\n<p>2. <a href=\"https:\/\/cssminifier.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">CSS Minifier<\/a><\/p>\n<p><a href=\"https:\/\/cssminifier.com\/\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-2177  aligncenter\" src=\"http:\/\/cssnewbie.com\/wp-content\/uploads\/2017\/03\/Screen-Shot-2017-03-14-at-11.00.05-AM-1024x469.png\" alt=\"Screen Shot 2017-03-14 at 11.00.05 AM\" width=\"644\" height=\"295\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>This CSS minifier is really straightforward and easy to use. The same website also offers a JavaScript Minifier.<\/p>\n<p>3. <a href=\"http:\/\/csscompressor.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">CSS Compressor<\/a><\/p>\n<p><a href=\"http:\/\/csscompressor.com\/\"><img decoding=\"async\" loading=\"lazy\" class=\" wp-image-2178 aligncenter\" src=\"http:\/\/cssnewbie.com\/wp-content\/uploads\/2017\/03\/Screen-Shot-2017-03-14-at-11.04.30-AM-1024x614.png\" alt=\"Screen Shot 2017-03-14 at 11.04.30 AM\" width=\"622\" height=\"373\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>This CSS Compressor gives you options for just how minified you&#8217;d like your CSS code to be. You have four choices, ranging from highest level (no readability, smallest file size) to low, which has the highest readability. If you want to minify your files for speed reasons but still want them to be slightly legible so you can easily go back and make changes if need be, the CSS compressor with it&#8217;s options for compression level is probably a good choice for you.<\/p>\n<div class=\"wp-socializer wpsr-share-icons \" data-lg-action=\"show\" data-sm-action=\"show\" data-sm-width=\"768\" ><h3>Share and Enjoy !<\/h3><div class=\"wpsr-si-inner\"><div class=\"wpsr-counter wpsrc-sz-32px\" style=\"color:#000\"><span class=\"scount\"><span data-wpsrs=\"\" data-wpsrs-svcs=\"facebook,twitter,linkedin,pinterest,print,pdf\">0<\/span><\/span><small class=\"stext\">Shares<\/small><\/div><div class=\"socializer sr-popup sr-32px sr-circle sr-opacity sr-pad sr-count-1 sr-count-1\"><span class=\"sr-facebook\"><a rel=\"nofollow\" href=\"https:\/\/www.facebook.com\/share.php?u=\" target=\"_blank\"  title=\"Share this on Facebook\"  style=\"color: #ffffff\" ><i class=\"fab fa-facebook-f\"><\/i><span class=\"ctext\"><span data-wpsrs=\"\" data-wpsrs-svcs=\"facebook\">0<\/span><\/span><\/a><\/span>\n<span class=\"sr-twitter\"><a rel=\"nofollow\" href=\"https:\/\/twitter.com\/intent\/tweet?text=%20-%20%20\" target=\"_blank\"  title=\"Tweet this !\"  style=\"color: #ffffff\" ><i class=\"fab fa-twitter\"><\/i><\/a><\/span>\n<span class=\"sr-linkedin\"><a rel=\"nofollow\" href=\"https:\/\/www.linkedin.com\/sharing\/share-offsite\/?url=\" target=\"_blank\"  title=\"Add this to LinkedIn\"  style=\"color: #ffffff\" ><i class=\"fab fa-linkedin-in\"><\/i><\/a><\/span>\n<span class=\"sr-pinterest\"><a rel=\"nofollow\" href=\"https:\/\/www.pinterest.com\/pin\/create\/button\/?url=&amp;media=&amp;description=\" target=\"_blank\"  title=\"Submit this to Pinterest\"  style=\"color: #ffffff\" data-pin-custom=\"true\"><i class=\"fab fa-pinterest\"><\/i><span class=\"ctext\"><span data-wpsrs=\"\" data-wpsrs-svcs=\"pinterest\">0<\/span><\/span><\/a><\/span>\n<span class=\"sr-print\"><a rel=\"nofollow\" href=\"https:\/\/www.printfriendly.com\/print?url=\" target=\"_blank\"  title=\"Print this article \"  style=\"color: #ffffff\" ><i class=\"fa fa-print\"><\/i><\/a><\/span>\n<span class=\"sr-pdf\"><a rel=\"nofollow\" href=\"https:\/\/www.printfriendly.com\/print?url=\" target=\"_blank\"  title=\"Convert to PDF\"  style=\"color: #ffffff\" ><i class=\"fa fa-file-pdf\"><\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>Minifying your CSS is a great and really easy option for optimizing the speed of your site. When you minify your CSS, you&#8217;re basically compressing the files so that they&#8217;re smaller and easier for your server to grab quickly. Having [&#8230;]<\/p>\n<p><a class=\"more-link article\" href=\"https:\/\/cssdeck.com\/blog\/how-to-minify-your-css\/\" title=\"Click to read 'How to Minify Your CSS'\">Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":2851,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[172],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/3049"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=3049"}],"version-history":[{"count":0,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/3049\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media\/2851"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=3049"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=3049"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=3049"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}