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 up
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.
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.
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.
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.
You might also like: How Lazy Loading can Optimize Your Shopify Theme Images..
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!