Improving the performance speed of stores is a multifaceted process. Any technique that can be applied to improve site speed is worth building in to your custom themes and one such technique is Minification. Minification refers to the process of removing unnecessary or redundant data without affecting how the resource is processed by the browser. For example, this can mean clearing code comments and formatting, removing unused code, using shorter variable and function names, and so on. Here we can have a look into the approaches that you can take when attempting to minify the code of Shopify themes. We'll also deal with some of the best practices when approaching storefront performance enhancement.
Optimize CSS using cssnano
cssnano is a modular minifier written in Node.js that you can add to your build process to ensure that the resulting stylesheet is as small as possible for a production environment. cssnano takes your nicely formatted CSS and runs it through many focused optimizations, ranging from simple transforms like whitespace removal, to complex transforms that can merge identical keyframes with different names. The semantics of your CSS will be kept the same, but the extraneous whitespace will be removed, the identifiers compressed, and unnecessary definitions purged from the stylesheet. This gives you a much smaller CSS for production use, which will improve the performance of your theme.
Reduce HTML with aHTMLMinifierWebpack plugin
HTMLMinifierWebpack Plugin is a Webpack plugin designed to minimize HTML files. While you'll need Webpack to use this tool, it's one of the safest ways to search through Liquid files during the Webpack build and minimize your theme's HTML.
Create a build process using a range of minifiers
Use an app