Shopify as a platform has its many advantages - for example, the lack of ever having to worry about patches, upgrades, and security (for the most part). The ease of use, the abundance of customizable themes and the worry-free hosted solution makes Shopify a no-brainer over other eCommerce platforms.
However, there are some disadvantages, and one of those is that speeding up a slow site is much less intuitive than one might hope.
Why No Plugins?
If you have ever operated a Wordpress site, you know that there are plenty of plugins that will speed your site up automatically with a few clicks. WP-Rocket, for example, is a single plugin that rewrites your .htacess file, minifies your JavaScript and CSS, defers JS files, among other things.
Plugins are all well and good, but my I always like to approach a problem with the attitude that a plugin solution should be last, not first.
Shopify does not have an app that is a one-click "speed up your store" solution. There are several apps that claim to do some of the work needed, i.e. minifying JS and CSS, and lazy loading images, but they are expensive and generally speaking, any plugin or app that is used to speed up your site is basically a band-aid over the wound. What you need is corrective surgery.
That is, instead of applying an app to force your theme into a compressed speed box, why not find out why it is slow to begin with? Fixing the issues from the foundation up makes the most long term sense.
GTMetrix says to add "expires headers!"
One of the disadvantages of Shopify is that it does not have an .htaccess file. Those Apache users out there who've come to rely on that file for putting into place the fixes that GTMetrix, or Pingdom, or any other site speed analyzer, recommends, are out of luck.
In fact, because Shopify is a hosted platform, you have no access at all to the "guts" of the code, only to your theme. This means that many of the recommendations you will get from GTMetrix, like "Enable Gzip compression" or "Add expires headers" can't be done. Many of the things that WordPress users can do with a plugin need to be done manually in Shopify, and to be done correctly, with tons of testing, to make sure nothing breaks.
So What Can I Do?
On the surface, there are really only three things you can do to speed up your site:
1) Make sure images are optimized
2) Keep apps to a minimum
3) Combine CSS and JavaScript when possible.
I'll discuss each of these here. There are some deeper level items that can be done as well if the above three do not seek to work, including:
4) Lazy load images
5) Serve only above-the-fold content first and defer loading of the rest of the page until everything loads (also known as deferring non-critical CSS)
6) Eliminate any CSS that is not being used at all.
Let's begin!
Optimize Images
Believe it or not, there are people who will purchase a stock image that is 5200px wide weighing about 3MB and upload that very image as their main hero image. Some themes offer easy to build hero sliders or image-with-text sections that, if overused, can mean upwards of 3 or more 3-megabyte images on the homepage alone. I have seen home pages that "weigh" more than 12MB when tested with GTMetrix. that's INSANE.
In addition to limiting the number of large images on your site (are sliders really necessary in 2019?) you should not only crop but compress those images. Crop any hero images to no larger than 2048px wide, and then use a free compression site like optimizilla to further reduce the file size. Do this for all your images, including your logo, product images, everything.
Crop your product images to no more than 640x640. Yes, Shopify has some built-in image reducing methods but that assumes your theme is coded properly to apply the on-the-fly image reduction in the right places. Don't assume that it does, assume the worst and prep the images accordingly. (As a side note, unless you have a massive product library, avoid image-compressing apps that charge you by the picture. The fewer apps, the better, and you can do this yourself.)
Limit Apps
Everybody loves apps. You can install apps for advanced shipping rules, image reduction, FOMO pop ups, email opt-in pop ups, referral programs, header announcements, and so on. I have audited Shopify sites that have over 30 apps in use.
The problem with apps is simple: For every app you install, that app will likely do two things:
- Inject a JS file into your site to run the app
- Inject a stylesheet to style the app.
So, now you have two more “external resources” being loaded with your page. There is no control over the size of those files, or, worse yet, whether the server from which they are being served is up and running. If your rewards app’s server goes down, your site will be trying to infinitely load a JS file which will really slow down your site.
Take an inventory of your apps. Do you really need it? Do you need Skubana, Variant Image Automator, Data Cue, blah blah blah? Does your store really need a related product app when your theme has a decent built-in version or, if you can have one customized for your store without having to use an app?
Once you have decided which ones you do not need, remove all unused and unneeded apps. This includes removing the JS and CSS references, if any, in the theme.
Combine JS and CSS files.
Even when you do remove your unused apps, it’s possible that you have a metric ton of JS and CSS files being referenced in your theme. The goal here is to eliminate as many as possible by combining them. Each time you combine two files into one, you’re reducing the number of requests your site has to make to get your page up and running.
You’ll need to be careful here. Combining JS and CSS files can be fraught with peril if done incorrectly. Start with the smallest files and merge them into your main theme.js file (or similar main JavaScript file) then test, test, and test again.
You’ll need to know a little bit about liquid code, and how to remove the reference to the CSS or JS file in your main theme.liquid file. As you remove files, test again with GTMetrix or Pingdom, to make sure your number of references is dropping accordingly.
When in Doubt, Hire a Developer
If all of these seems overwhelming, it’s also possible to hire a developer to handle this for you. If you’d like to hire me, I can perform not only tasks 1, 2 and 3, but 4, 5 and 6 above as well as part of this package.
