Long loading times on websites can hurt your clients’ conversion rates and turn away their customers, so any technique that can be applied to improve site speed is worth building in to your custom themes. 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.
Improving the performance speed of stores is a multifaceted process, so minification should be considered as just one of these approaches, alongside image compression and app auditing. When built into the overall performance strategy of your projects, minification can have a significant impact on loading speed, thereby setting your clients up for success.
In this article, we'll look at some of the approaches you can take when attempting to minify the code of Shopify themes. We'll also outline some of the best practices when approaching storefront performance enhancement.
Grow your business with the Shopify Partner Program
Whether you offer marketing, customization, or web design and development services, the Shopify Partner Program will set you up for success. Join for free and access revenue share opportunities, tools to grow your business, and a passionate commerce community.
Sign up1. 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.
Learn more about building themes for clients with Shopify metafields.
2. 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.
You might also like: Live Reloading Shopify Themes: Sass Compilation with Theme Kit and Prepros..
3. Reduce HTML with a HTMLMinifier Webpack plugin
HTMLMinifier Webpack 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.
4. 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 HTMLMinifier webpack plugin we saw previously, the main difference being that webpack is an asset bundler while Gulp and Grunt are task runners.
If you're new to using Gulp, the team at Up At Five have written an awesome technical tutorial to help Shopify developers learn how to implement this for themselves.
You might also like: An Insider's Look at the Technology That Powers Shopify.
5. Use an app
If the approaches outlined here don't suit your workflow, or your clients would like some control over performance, you can alternatively use an app 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.
You might also like: How Lazy Loading can Optimize Your Shopify Theme Images..
Size matters!
When every second counts for improving site-loading speed, minor adjustments like removing unnecessary whitespace in CSS, or shortening variable names, can have a major impact on your client's conversion rate.
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.
However you approach minifying theme files, it's a worthwhile process to build into your theme projects, and a valuable skill to add to your Shopify Partner toolkit.
What tools do you use for minification? Let us know below!
