Shopify Optimization for Site Speed

is increasingly popular, easy-to-use, and customizable-enough for most people’s needs. And it comes pretty-well optimized for SEO (for the most part). It works pretty well, as-is. So one thing most shop owners never do to their Shopify store is go beyond the typical search engine and dig into Shopify optimizations.

Optimizing Shopify for speed is possible, and it does have benefits – one of which is that a faster site can tend towards more favorable rankings. Squeezing every bit of efficiency out of your Shopify theme can be challenging and satisfying. It can also be puzzling, if you’ve never dug into the structure of your theme files.

I’ve done all the work of figuring out the typical steps in improving a Shopify theme’s speed, however – and I’m providing those steps here for your benefit. I hope it helps someone out there who wants to cut down on load times. These tips will help you shave off at least a few milliseconds of load time, cut down on the number of elements that need to be retrieved by your user’s browser, and lower the overall page size.

  1. Completely back up your Shopify theme. Seriously, do not touch a thing until you’ve got all your files safely backed up. It’s very easy to make a change, only to find out later (down the road) that an earlier change broke something or had unintended consequences. So have a complete, pristene,
    untouched backup of all images, CSS, template files, etc. before you do anything.
  2. Compress your site’s images. Ideally you will start doing this as your create your site, before you launch. There are many utilities that can make this easy, such as ImageOptim (for OSX) or FileOptimizer (for Windows). If you have an established site, it can be quite tedious to go back and re-upload images. Shopify allows you to overwrite the images in your Assets folder quite easily, but the product image replacement isn’t as straightforward unless you utilize a Shopify App built for this purpose (such as Image Optimizer). Shopify has at least one post outlining general image optimizations tips – and specifically the author talks about file size (in the section entitled “Reduce the File Sizes of Your Images”).
  3. Delete unused apps. Have you ever installed an app, tried it out, and then forgot about it? Have you ever gotten an app only to later realize it’s not that great, or not really necessary? Did you ever use an app for a while for hardly any payoff, and then wonder why you pay for it each month? Get rid of these apps. Only keep the ones that you use and that justify their cost. Anything else is a waste of money and an additional bunch of code that your site doesn’t need to include. Eliminating the dead weight is a big part of increasing efficiency.
  4. Eliminate unused CSS rules. This has got to be the most challenging task, but probably the second-best in terms of what you gain. When I say unused CSS, I mean CSS rules that exist in stylesheets but are not used anywhere within a website. I’ve tried a number of tools designed to find unused CSS, and all of them have limitations and/or imperfections. I don’t totally trust any of the tools to correctly identify all unused rules, so I always keep a backup (see Rule ). One tool I’ve found useful, however, is Dust-Me Selectors which I run within FireFox. It’s mostly accurate in my experience, and allows you to export the “cleaned” stylesheets. When done correctly, the end product is a stylesheet that contains only the essential rules that the site actually needs and utilizes.
  5. Compress CSS rules. Wherever CSS appears, it should be compressed. An online utility such as CSS Compressor will get the job done. You can also do some level of compression by hand, but for large chunks of CSS and/or entire stylesheets, it’s much more efficient to run the CSS through a utility and copy the output. Note: Be careful to preserve all Liquid tags if/when they occur within CSS. If you find out later that you accidentally eliminated a Liquid template tag within a block of CSS, you’ll be glad you followed Rule 1 so you can fix your mistake.
  6. Combine stylesheets. Once you’ve got the most minimal amount of CSS possible, and it’s been compressed into the smallest amount of code possible, the only further optimization you can do to your CSS is to compress it into as few files as possible. I usually will create a file such as “mysitename-combined.css” and use it as a “catch-all” for all the CSS I’ve been able to optimize and compress. In comments, I will put the original file’s name and then paste in the code. This makes it easier if I ever have to alter one of those files and re-paste the code – I’ll know where to find the original file, what goes where, etc. In other words, I can re-trace my steps. And of course, I have that original backup if I ever have to go back that far. But the idea of combining all the CSS files is to lower the overall number of requests that your user’s browser has to make. Ideally (and likely) you can load what were previously four or five CSS files by calling one single compressed file. It really does make a difference!
  7. Compress Javascript. This step is where things can get more complicated, even if you know JS. You can easily break something in a site when you alter the scripts. On more than one occasion, I have compressed some JS, found out that it ceased to perform as intended, and then restored my backup. So you need to be cautious here and test everything, every step of the way. With that being said, there are some Javascript compressors such as Minify that do a good job. The idea behind them is similar to how CSS is compressed (or, “minified”) – put more code into less space, eliminate comments (careful!), and rewrite certain statements so they are themselves shorter or more efficient. It’s part art, part science. But again, it can lower file sizes quite drastically – and help your site load faster.
  8. Combine Javascript. You get the idea – very similar to the concept of combining our styles into one single file. But again, due to the added complexities that can exist with JS files, take this step carefully and thoughtfully. Consider file load order, for one thing – it might matter a great deal. But you can potentially take a handful of files that were called separately and call them all in one shot. This is much more efficient, and will cut down on the number of assets that are loaded separately –
    which is our goal.
  9. Combine Google font requests. I don’t like to add this as a separate item, because it’s an aspect of optimizing CSS rules, but it’s a common task and unique enough to deserve a separate explanation. Many themes use more than one Google Font, but many times the fonts are loaded separately. This is inefficient; we want to do it all in one request (as explained here). Basically, we can use one call to Google and separate each font family with a pipe symbol. This can turn two or three font calls into one. An easy win!

And that’s it. Those are typically the steps I follow when I want to turn a slow site into a fast(er) site. As you can probably see, these are principles that can apply to any website, not only Shopify. These rules can be followed and lower your load time if you have a WordPress site or static HTML site as well.

Good luck in speeding up your sites. If you have any tips you’d like to share, comment below or contact me! Thanks for reading.

Get New Posts From Shawn Plep Sent Right To Your Inbox

Leave a Reply

Your email address will not be published. Required fields are marked *