#Minify css how to#Learn how to minify your CSS code in Minify CSS. This is usually accomplished with a build tool like Gulp or Webpack. You paste your CSS into the service's UI, and it returns a minified version of the code.įor professional developers, you probably want to set up an automated workflow that minifies your CSS automatically before you deploy your updated code. # Use a CSS minifier to minify your CSS codeįor small sites that you don't update often, you can probably use an online service for manually minifying your files. So, if you use a minifier, you may see more savings than what Lighthouse reports. As mentioned earlier, minifiers can perform clever optimizations (such as reducing #000000 to #000) to further reduce your file size. Lighthouse provides an estimate of potential savings based on the comments and whitespace characters that it finds in your CSS. For example, the color value #000000 can be further reduced to #000, which is its shorthand equivalent. Some minifiers employ clever tricks to minimize bytes. Minifiers can further improve byte efficiency by removing whitespace: h1, */įrom the perspective of the browser, these 2 code samples are functionally equivalent, but the second example uses less bytes. For example: /* Header background should match brand colors. CSS files are often larger than they need to be. Minifying CSS files can improve your page load performance. The Opportunities section of your Lighthouse report lists all unminified CSS files, along with the potential savings in kibibytes (KiB) when these files are minified: # How minifying CSS files can improve performance
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |