3 simple steps to an optimized Shopify store without any code

It’s been proven by now: faster online stores lead to higher conversion rates.

A slow store can frustrate users, decrease trust to your website, and reduce revenue.

In fact, every 1 second of extra time a page needs to load, could be costing you a 2% reduction in conversions.

Plus, visitors don’t always browse through desktop browsers or high-end devices. So what you experience on the desktop when you visit your own store, is more like an ideal version of it.

So what can we do to optimize a store?

And what’s the smallest effort – highest return solution?

Here’s 3 tips you can apply right now to experience better performance.

1. Get rid of sliders

Sliders used to be really popular. You can show multiple images and text, and save space at the same time.

Plus, if your products have a lot of images, sliders are an easy way to show one after another.

But today, things have changed a bit. Sliders gained a bad reputation.

Why is that?

When it comes to the regular slider you place on the homepage of your store, or any page for that matter, the truth is that visitors will probably not see every single slide.

People skim and scroll down quickly.

Also, sliders are created with JavaScript.

This means that a script has to take the images and text and put them in slides. Then, show only one of them at a time (sometimes more), and take care of navigation between them.

But this has two problems.

First, all this takes time.

Second, sliders are usually the first element a user sees on the homepage, or on the product pages.

Google considers the first largest element an important element. So it drops your Performance score if it’s not shown quickly when someone opens the page.

In fact, this metric only is contributes 25% to the performance score on their audit tools.

Now the problem is that a slider has to go through all this process, and is in no way as fast to load as a single image.

For these reasons, you want to avoid sliders.

The solution?

Replace them with a hero image and text (and an action button) on pages.

Replace them with a single featured image and simple thumbnails on the product pages.

Here’s what kind of improvement we’re talking about on the Debut theme.

That’s a +10 increase in Performance score, and 1 second shaved off all these metrics.

2. Uninstall apps you don’t need (the right way)

Let’s say we have a store that has no apps installed. It has the Dawn theme, which is really fast.

Now let’s take a look at its performance score on a low-end mobile device.

Pretty impressive.

Next, time to install a few apps.

What would you consider necessary?

Product reviews? Email marketing? A newsletter popup? Facebook Pixel and Google Analytics?

Just a few of them.

Time to measure again.

Wow.

That’s a huge decrease, and it’s real.

I know what you’ll ask: “But I need these apps”.

And yes, you do. (Of course, some of them can always be replaced by custom development, which has other benefits too.)

But what about some others? What about the 2nd or 3rd product review app you have installed and you forgot to remove?

And did you really need the misconfigured announcement bar when your theme already has that option?

The point is to keep your apps list clean and to be very careful when installing new apps.

To give you an example of the difference this makes, I added an extra 3 apps to my store.

Here is the score now:

We reduced our score from 73 to 25.

Again, the point isn’t that you should not install apps.

Apps are full of features that, when managed properly, can bring in millions of revenue.

The point is to consider removing

• apps that you don’t need,

• apps that do the exact same thing (duplicates),

• apps that have features your theme already has, and

• any apps that can be replaced with a simple copy and paste code that documentation can guide you through.

One last thing, and this is really important.

When removing apps, some of them might fail to be delete their code from your theme.

I’ve seen some of them leave code that can reduce TTI (Time to Interactive) by 3 seconds. And most people have no idea that this can happen.

My suggestion is to take a look at the app’s interface before uninstalling it. Look for an option to remove code from the theme.

Or, after uninstallation, you can go into the theme code editor, open theme.liquid and look for the app’s name. Perhaps you’ll see a piece of code with it.

This possibly means that the app failed to remove it, and you can contact their support service so they can help.

3. Compress your images

This step is very simple.

Themes are usually doing their best to display the right size of an image depending on the device, the network conditions and other factors.

However, it’s still the same image you uploaded. It’s just that it was resized.

But can we improve on this?

Sure, and image compression can do just that.

Let’s look at the difference between an uncompressed image, and the same image compressed on TinyPNG.

That’s almost a 50% decrease in file size.

You can do the math.

If a collection page has 20 visible product images, and each image is 30kB in size, you can save 300kB of downloaded files.

That’s huge.

And optimizing algorithms are really good at minimizing the file size, without reducing the image quality too much.

How can you optimize your images?

You can get an app from Shopify’s app store. Search for “image optimizer”. This will help you do this automatically.

Or, you can upload your images again, but this time after you’ve optimized them.

There’s plenty of tools for compressing images in bulk.

(By the way, there's also this guide where you can read all about Shopify image sizes and optimization.)

Conclusion

That’s it. These are 3 ways to reduce the time it takes for your site to load, increase Performance Score, provide better UX, and contribute to SEO.

And you don’t need to be a developer.

(But if you are - check out this advanced Shopify optimization guide.)

If you need any kind of help though, don’t hesitate to contact me using the form below.

Of course, there’s a huge list of optimizations you can do on your site if you know how to edit theme files. Some examples are profiling, responsive images, asset preloading, and code splitting.

You can have a trained, certified expert perform a deep audit of your store, use these advanced techniques to optimize it, and fix any issues that are making your website slow and hard to use for your visitors.

Thanks for reading!