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.

Use UglifyJS to compress JavaScript

UglifyJS is a very popular JavaScript compressor/minifier that automates the process of reducing the load of JavaScript on your theme. It also contains tools that allow you to "mangle" your code, meaning that you can save space by reducing the names of local variables to single letters. To further minify your JS files, you can use UglifyJS to remove unreachable code, join consecutive simple statements using the comma operator, or combine consecutive variable statements.

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

Toolkits like Gulp or Grunt allow developers to set up automation for many development tasks, saving them time when running build processes. One big advantage for minification is that plugins such as Uglify.js and others mentioned can be implemented into a Gulp task, so that it runs every time a site is compiled. Once you've correctly set up the different minification plugins with Gulp or Grunt, a build script will compile the theme so that it's fully optimized to run in production. This means that when you compile the theme, your task runner of choice will take care of the minification process for your JavaScript files, stylesheets, and HTML. Using a task runner is similar to the HTMLMinifierwebpack plugin we saw previously, the main difference being that webpack is an asset bundler while Gulp and Grunt are task runners.

Use an app

Alternatively an app can also be used to perform minification on your theme assets. Plug in Speed optimizer has a built-in process for compressing and minifying theme code automatically. This process includes optimizing both CSS and JavaScript files, as well as a range of other performance-improving actions such as image compression. Hyperspeed by Rvere also has an automatic process for minifying CSS and JavaScript files on your client's themes, and ensures these files are as small as possible without compromising their functionality. The original unminified files can also be maintained and will remain unchanged, while any edits to the original files are instantly reflected in the minified files. It's worth remembering too that minification is just one factor that determines how quickly your client's storefront loads. The techniques outlined here work best when complemented with a larger performance strategy that includes compressing images, avoiding app overload, and using web fonts.