Lightening Fast-min
Last updated on Oct 21, 2019

15+ Insanely Actionable Shopify Speed Optimization Tips to Boost Your Ecommerce Revenue Today

By Jake

Some things are worth waiting for. Your store is not one of those things.

53% of people abandon mobile websites—including online stores—that take more than 3 seconds to load.

That’s over HALF your potential customers.

We quizzed our developers and created this list of tips to help you get your Shopify store beneath that 3-second benchmark.

Some of these Shopify speed optimization tricks will take 5 minutes. Others might require a couple of hours at the end of the day.

Just do one and you’ll be on track to a faster store that sells more.

Table of Contents: 15+ Shopify Speed Optimization Tips

Google Tag Manager custom icon1. Streamline Your Store with Google Tag Manager
Shopify Speed Optimization Chapter 2: Ditch the Dead Weight for a Faster Home Page2. Ditch the Dead Weight to have a Faster Homepage
Resize images for the web3. Reduce Image Dimensions to Eliminate Browser Scaling
Minify CSS and JavaScript Assets4. Minify Assets to Improve Page Speed
Upgrade your Shopify hosting plan for faster load times.5. Upgrade Your Hosting Plan to Stay Sharp…even on High-Traffic Days
Host videos on dedicated external platforms6. Beat Bloat by Hosting Large Video Files on External Platforms
Pay attention to how your store performs on mobile.7. Reach Customers on the Go with a Fast, Mobile-Responsive Theme
Fix redirects and broken links8. Offer Smooth Navigation by Reducing Redirects and Broken Links
Use AMP to load lightning fast on mobile devices.9. Enhance Mobile Performance with AMP
Delete unnecessary apps to speed up your online Shopify store.10. Delete Unnecessary Apps to Stop Losing Sales
Audit your quick-view popups.11. Analyze Quick View Pop-Ups to Understand User Interest
Beware nested collections12. Beware of Nested Collections (for Big Shops)
Lazy load your assets to save time.13. Lazy Load Images to Lower Waiting Times
Replace sliders and carousels with hero layouts.14. Engage More Users by Scrapping the Carousels for Hero Layouts
Learn how to use GTMetrix to spot-treat problematic assets15. (Bonus!) Use GTMetrix for Expert Shopify Speed Optimization Insights

Let’s get started.

Google Tag Manager custom icon

1. Streamline Your Store with Google Tag Manager

Do you ever think about how convenient the supermarket is?

Everything is in one place. You don’t have to go to the milk farm to get milk, the chicken farm to get eggs, or the farmer’s market to get vegetables anymore.

The amount of time you spend shopping is so much lower because you only need to visit one store.

Google Tag Manager is like that, but for your Shopify store. It loads all the external scripts (tags) your store uses in one request instead of making seventeen different requests.

Think tracking codes, analytics, etc.

Google Tag Manager also loads JavaScript files asynchronously so that they don’t force other elements of the page to wait for them to finish. It looks like this:

A graphic demonstrating the difference between synchronous and asynchronous loading. For Shopify speed optimization purposes, it's much better to

But don’t take our word for it—Airbnb increased their site’s speed by 8% (and got a better insight into their analytics) after they used Google Tag Manager.

Here’s how to get set up in Shopify:

Step #1. Create a Google Tag Manager account

First, open up Google Tag Manager.

You’ll see a screen like this:

Google Tag Manager home page

Click “Create Account” to create an account with GTM.

On the next screen, you’ll need to fill out some information:

Google Tag Manager page to create a new account

Then click “create.” (Don’t forget to agree to the GDPR conditions checkbox!)

After that, you’ll arrive at a new dashboard where a lightbox with your Google Tag Manager tracking code will appear. Ours looks like this:

Google Tag Manager box with tracking code

Keep this tab open! You’ll refer to it in the next step.

Step #2. Paste the Google Tag Manager Code in Shopify

(A little scared of editing code? Don’t be. We’ve got you.)

In a different window, go to your Shopify admin portal (should be yourstore.shopify.com/admin).

Navigate to your store’s Themes menu on the left-hand sidebar (Sales Channels → Online Store → Themes).

Navigating to a Shopify store's themes

From there, select “Actions,” then “Edit code”:

First click 'actions,' then 'edit code.'

You need to paste the first Google Tag Manage code block into <head> section of the “theme.liquid” and “checkout.liquid” files.

First, find your “theme.liquid” file.

Find your 'theme.liquid' file

Click on the file name to open the code in the right editor.

Look for the <head> HTML tag.

Look for the <head> HTML tag

Now all you have to do is paste your Google Tag Manager code.

Paste your Google Tag Manager tracking code into the head section

When you’re done, your code should look something like this:

An example of your new code with the Google Tag Manager tracking snippet

Now you need to copy the second block of code into the <body> section of “theme.liquid.”

Finding the second block of code in Google Tag Manager

You’ll find the <body> tag the same way you found the <head> tag.

When you’re done, your code should look something like this:

Example of what the second block of code looks like in after you pasted the Google Tag Manager code

Click “Save.”

Now repeat this exact process for the “checkout.liquid” file.

Once you save, you’re done!

Now that you’re set up, it’s time to actually use Google Tag Manager.

Step #3. Adding Tags in Google Tag Manager

First, go to Google Tag Manager and select the container you created back in Step 1.

On your dashboard, click “Add Tag.”

Click 'Add Tag' in Google Tag Manager

Now you get the option to add either a tag or a trigger. Click the top block—the Tag Configuration—to add a new tag.

You’ll see a sidebar like this:

Sidebar in Google Tag Manager

For this example, we’re going to add a Customer HTML tag. But if you’re using a service that Google Tag Manager supports, you should use their native integration.

From there, all you have to do is paste your tracking code in the text box. Like this:

Tracking code pasted into Google Tag Manager

Now it’s time to add a trigger. If you scroll down from the text block where you just pasted your code, you’ll see a box where you can add a trigger. Click it.

Adding a trigger in Google Tag Manager

In most cases (say, for site-wide tracking codes), you’ll want to click the default “All Pages” trigger.

Once that’s done, it’s time to hit the “Save” button.

You should be back on your dashboard now. In the upper-right hand corner, click the blue “Submit” button.

Clicking the 'submit' button in Google Tag Manager

Before you publish, Google Tag Manager wants you to review your changes. Scroll down to make sure everything looks good, then click “Publish” in the upper-right-hand corner.

Congrats! You just added a tag.

Now all you have to do is repeat this step for each of your tracking codes.

Shopify Speed Optimization Checklist
Want it all in one place?
Download the one-page Shopify speed optimization checklist.
Shopify Speed Optimization Chapter 2: Ditch the Dead Weight for a Faster Home Page

2. Ditch the Dead Weight for a Faster Home Page

One of the first things we do when we get a new client is to study how much of their homepage actually gets viewed.

The result? Typically around 50%.

That means their typical customer ignores half of their home page.

You already know that people don’t like slow-loading pages.

Why risk losing customers by making them wait for something they’re never going to see?

In this tip, we’ll show you how to clear out the dead wood.

Step #0: What Makes a Good Homepage?

An ideal homepage contains only high-value elements that add to the user experience, so it’s time to take stock of everything, from copy to images, videos to widgets.

When you’re assessing the sections on your homepage, use these criteria to evaluate their value:

  1. Accessible: Your store needs intuitive navigation with a clean interface.
  2. Desirable: Every image should create a desire to explore or buy; your ideal customer should see themselves (or their desires) in your imagery and design.
  3. Valuable: People want content that addresses their questions, pain, and desires.
  4. Actionable: Your call to action should be clear, bold, and easy to spot and understand.
  5. Credible: Social proof (testimonials and reviews) go a long way towards building your credibility as a brand and as a trustworthy merchant. The best testimonials are from your ideal customer to your ideal customer.

Now it’s time to grab some data and test your assumptions.

Step #1: Add Tracking Analytics to Your Homepage

We recommend Hotjar for learning more about how potential customers interact with your home page.

Once you sign up, you’ll see a dashboard that looks like this:

Example of a Hotjar dashboard

Click the “Tracking” button in the upper-right hand corner to get your tracking code.

Now all you have to do is paste that code into your homepage’s <head> section.

…If you set up Google Tag Manager, then this should be an easy win.

Step #2: Creating a Heatmap

Back in Hotjar, click on “Heatmaps” in the left sidebar menu. Then click the green “New Heatmap” button.

Adding a new heatmap in Hotjar

The rest is pretty straightforward.

  1. Give your heatmap a name.
  2. Select the number of views you want to track (in this case, 2,000 is plenty).
  3. Enter your homepage’s URL so that Hotjar only records data from that page.
  4. Click “Create Heatmap.” You’re done!

How long you need to wait depends on how much traffic your store gets.

Step #3: Interpreting Your Heatmap

This one’s pretty easy.

First, open your heatmap.

The parts of the heatmap that colored dark red—those are the parts that got the most clicks.

The dark red parts of the heatmap are the hottest---the ones that got the most attention

If a section of your homepage looks ignored, that’s a clear signal that you should remove it.

Resize images for the web

3. Reduce Image Dimensions to Eliminate Browser Scaling

Here’s a common mistake:

You upload images that are so huge your user’s browser has to scale them down when it loads the page.

This is a huge drag on your load time. (Especially for mobile devices.)

In fact, you want smaller images and smaller file sizes.

First, know that Shopify recommends using 2048 x 2048 pixels for product photos. If your images are larger than that, they’re prime candidates for dimension reduction.

The good news is that resizing them is a cinch.

Here’s how to do that:

Option #1: Use Shopify’s Image Resizer

First, navigate to Shopify’s Image Resizer tool.

Upload the photo you want to resize.

Uploading a photo to the Shopify image resizer

Then click “Submit.”

If it was successful, you can download the resized image.

Downloaded the resized photo for Shopify

Now all you have to do is replace them on your store.

Option #2: Photoshop

Of course, if you’re using Photoshop to edit your product photos, you can also ensure they’re the proper dimensions before sending them off.

First, open your image in Photoshop.

Then to go to File –> Export –> Save for Web (Legacy)

Saving the photo for web in Photoshop

A new modal will pop up where you can specify dimensions, among other things.

Specifying image dimensions in Shopify

Then click “Save.” All done!

Shopify Speed Optimization: Download the Free Checklist
Want it all in one place?
Download the one-page Shopify speed optimization checklist.
Minify CSS and JavaScript Assets

4. Minify Assets to Improve Page Speed

Code can be scary to mess with.

CSS (the code that controls how your store looks) and JavaScript (the code that controls how your store functions) are essential to running your online store. But the file sizes are can be a burden.

Fortunately, there’s a process called “minification” that can reduce these file sizes by a TON.

(Without modifying the code!)

Minification deletes excess white spaces (including newlines) in the code. Your Shopify store, which is a computer, doesn’t need white space to read code. They’re only in there for humans.

The quickest way to minify your asset files is to use a paid app like Plug in Speed. This app offers a 7-day free trial; then it’s $39/month.

If you’d rather save on costs, here’s how to do it yourself.

Step #1: Download Your CSS and JavaScript Files

Just to be safe.

In your Themes folder, you want to look for any files that end in “.css” or “.js.”

Do NOT minify your theme.scss.liquid file. Shopify automatically minifies it.

Shopify automatically minifies .scss.liquid files, so you shouldn't do that manually.

Copy each file to a safe space (e.g., your Dropbox or hard drive) just in case something goes awry and you need to revert to the original.

Then it’s time for the next step.

Step #2: Minify Your Code

If you’re compressing CSS, use the CSS Compressor. If you’re compressing JavaScript, then head over to the JavaScript Minifier.

Copy your code into the tool and click “compress.”

You’re done! Now all you have to do is replace your unminified code with your newly minified code.

Step #3: Check Your Speed

Once you’re done, run another page speed test to check that the file is no longer listed under the “Minify CSS” section.

We recommend GTMetrix to do this analysis.

It’s simple to use—pop your store’s URL into the tool and read the results below.

Screenshot of some GTMetrix results

If you expand any of these benchmarks, they’ll show you any files you missed.

Sometimes you won’t be able to access or minify a specific file, and that’s okay. If you’re scoring an A, you’re good to go.

Upgrade your Shopify hosting plan for faster load times.

5. Upgrade Your Hosting Plan to Stay Sharp (even on High-Traffic Days)

Sometimes it’s the hosting.

Maybe a simple hosting upgrade is all you need to take your store to the next level.

Moving up to a better Shopify plan can potentially halve your loading time.

(After all, there’s no reason to wait for the inevitable crash that’ll come when thousands of future customers overwhelm your store on Black Friday.)

With a simple upgrade to a better Shopify plan, you can stop worrying about any speed struggles or devastating downtimes on busy days.

Here’s how:

Option #1: Upgrading Your Shopify Plan

Shopify has a few different hosting plans.

Comparison of different Shopify hosting plans

If you’re on Basic Shopify or just plain Shopify, you should consider moving to the next tier.

If you’re already on the Advanced Shopify plan, then you need to look into Shopify Plus.

(And if you’re already on Shopify Plus, then this is not the tip for you.)

Here’s how to upgrade:

First, navigate to your account settings in your admin portal.

Navigating to the account settings in the Shopify admin portal

From there, click “Compare Plans.”

Comparing plans in the Shopify admin portal

Now you can see each of the existing plans and upgrade to the one that feels best for you:

Selecting a Shopify Plus plan

Then click “Choose this plan” and follow the steps to finish upgrading.

Option #2: Upgrade to Shopify Plus

Shopify Plus is a huge asset…but it also comes with a $2,000/month price tag.

Our friends at The Shop Pad created a detailed buyer’s guide to Shopify Plus that you should read if you’re seriously considering upgrading.

But if you just want the skinny, keep reading.

Step #1: Talk to Shopify

One does not simply upgrade to Shopify plus.

That’s because Shopify Plus is only for a specific set of users. If that’s not you, then you have to wait until it is.

To get started, head over the Shopify’s upgrade page.

You’ll see all the benefits of switching to Shopify Plus:

  1. Unlimited accounts
  2. API access
  3. Access to Shopify Plus Partners
  4. Unlimited Bandwidth
  5. Tax automation
  6. Dev environments
  7. Wholesale order management
  8. Scheduled campaigns

…and etc. It unlocks Shopify’s full power.

If your business is ready, talk to one of their experts.

At this point, faster load times are just a perk.

Step #2: Talk to Us!

The truth is there’s no need to do anything after you upgrade to Shopify plus.

But you should know we’re Shopify experts ourselves.

In fact, we helped our client CoverFx more than double their mobile conversions, grow their sales by 27%, and even see a modest 10% boost in their average order value.

Shopify Plus Client Spotlight: CoverFX

Spencer Wayne from CoverFx

“We’ve really enjoyed working with the Huemor team. They’re flexible, produce great work and always make themselves available for our team!”
Spencer Wayne
Ecommerce Marketing Manager
CoverFX

If you’re spending all this time and effort on your Shopify store, then you should talk with us. With results like CoverFx’s, your redesign will pay dividends for a long time to come.

(Plus, we’ll ensure you’re under that 3-second benchmark!)

Host videos on dedicated external platforms

6. Beat Bloat by Hosting Large Video Files on External Platforms

According to the HTTP Archive, the median page size for mobile web pages in April 2019 was 1682.4 KB, or up 76% from the 955.8 KB it was in April 2017.

This is directly related to the growth of video content.

And although page size isn’t the best metric to track, it’s still worth talking about (and thinking about).

Thankfully, you can free up your server and keep your store running at top speed by using an external platform like YouTube or Vimeo to host videos.

Here’s how to feature videos the right way.

Step #1: Check for Uploaded Videos

It’s entirely possible none of the videos you use are actually on your store.

To check, go to Settings → Files.

Navigating to Files in Shopify to check for uploaded videos

Now search for the most common video extensions (“.avi,” “.flv,” “.mp4,” “.mov,” and “.wav”) to bring up all videos that could be uploaded to your store.

Search for any common video extensions.

Unfortunately, you have to download a video file before you can store it somewhere else.

That’s what you’ll do in step #2.

Step #2: Download your videos

If you have any videos uploaded to your store, downloading them is pretty easy.

First, click the video’s name right on the Files page. That’ll take you to where the video lives on the Shopify CDN.

Now you can download the video.

Click the 3 dots in the bottom right corner of the video.

Click the 3 dots to download the video

Then press “Download.”

Click download to download the video

Super easy. Now it’s time to upload them on a dedicated video server.

Step #3: Upload Your Videos

Any of the premier video-hosting services—YouTube, Vimeo, and Wistia—work perfectly with Shopify. The platform you choose is up to preference.

(We’re going to use Vimeo.)

After creating an account, upload your video.

On Vimeo, click the blue “Upload” button either in the navigation or right below the logo on the home page.

Upload the video to Vimeo

Then follow the on-screen directions to upload your video.

Once that’s done, navigate to your video and click the “Share” button.

Click the Share button on Vimeo

Click on the Share button and grab the embed code.

Grab the embed code from the Vimeo share menu

Now you’re ready to embed the video on your store.

Step #4: Embed the Video on Your Store

Here’s how to embed a video in Shopify.

Navigate to the blog post or page where you want your video to be.

Click on the code editor button to switch to the HTML editor.

Switching to the HTML editor in Shopify

Then paste the embed code you grabbed from Vimeo.

Pasting the embed code from Video into the Shopify HTML editor

Finally, switch out of the HTML editor to ensure everything looks good.

If it does, time to hit publish!

Bonus: Lazy Load Your Video

If you’re really serious about optimizing your load times, then moving your videos from Shopify to a dedicated video hosting platform isn’t enough.

You should also lazy load your videos so that they don’t load before they’re visible on your customer’s screen.

To do that, check out the lazy loading section of this post.

Pay attention to how your store performs on mobile.

7. Reach Customers on the Go with a Fast, Mobile-Responsive Theme

It’s crucial to connect with mobile users.

And a responsive theme can make all the difference.

You should test your theme for potential issues across devices and screen sizes.

This is easy to do with Google Chrome.

Step #1: Get Set Up

If your store doesn’t look good on mobile, it doesn’t matter how fast it loads. Nobody will buy from you.

…after all, a Google study found that 79% of smartphone users used their mobile device to make an online purchase in the last six months.

(That was in 2010.)

The number today is probably MUCH higher.

And if your store looks like it was hacked together by an amateur, it’ll hurt your credibility.

Let’s double-check your store across a few different devices.

First, go to the developer tools from the View → Developer → Developer Tools menu.

Viewing the developer tools

You’ll see something that looks like this as a popup or on the right side of your screen:

A snapshot of the developer tools

Click on the icon with the cell phone and the tablet on the menu. That lets you toggle between desktop and mobile views.

See where it says iPhone X? You can open that drop-down menu and select the device you want to test from.

Use the drop-down menu to change devices you want to emulate

Now you can test for different devices.

Step #2: Check for Mobile Responsiveness

Ask yourself the following questions as you evaluate your store’s theme:

  1. Do all images look good on mobile?
  2. Does the navigation look clear on mobile devices?
  3. Are the buttons big enough and user-friendly? (Think about people with big fingers!)
  4. Is it easy to scroll up and down? Does it scroll at a reasonable pace?
  5. How is the checkout experience?
  6. Is it a seamless customer journey with minimal touchpoints?
  7. Is it easy to check out on a mobile phone?

If any of those are a “no,” it’s either time to hire a developer to fix them or find an entirely new theme.

Step #3: Check for Speed

Pingdom is the best tool for an at-a-glance benchmark of your store’s speed. It’s very easy to use, too.

First, pop your store’s preferred URL into the tool.

Then select the location you want to test from.

Select the location you want to test Pingdom from

Now click “Start Test.”

Then you’ll see a list of optimizations Pingdom wants you to make:

A sample of Shopify Speed Optimizations that Pingdom could recommend

You can even see which files take the longest to load, so you can hand that off to a developer and ask them to reduce those wait times.

A screenshot of different file loading times from Pingdom

But most importantly, you can see how long it takes your store to load.

A screenshot of your store's entire loading time from Pingdom

If it’s under 3 seconds, congratulations! You’re in the clear.

Shopify Speed Optimization: Download the Free Checklist
Want it all in one place?
Download the one-page Shopify speed optimization checklist.
Fix redirects and broken links

8. Offer Smooth Navigation by Reducing Redirects and Broken Links

Ever go to a government building and learn that you’re in the wrong place and need to go somewhere else?

(Rhetorical question, we know.)

That’s kind of like a redirect on your Shopify store.

And it makes your store take much longer to load.

To make your store as fast as possible, you need to throw the DMV workflow out the window.

Here’s how:

Step #1: Identify Your Redirects

First, open up your store’s backend and navigate to your URL Redirects portal.

Like this:

Viewing redirects in a Shopify store

This displays most of your store’s active redirects.

You can even filter for specific pages, like this:

Filtering for specific redirects in Shopify

Pretty neat, right?

Now it’s time for the next step.

Step #2: Fix 404s and Errors

A 404 error means a page couldn’t be found.

While it’s a good strategy to create a 404 page…

Huemor's 404 page

(like this)

…it’s also a good idea to add redirects away from anything that points to a 404.

How can you find these elusive pages?

Use the Broken Link Checker. It’s easy.

Enter your store’s URL and let it run.

If the tool finds any broken links, you’ll get a list.

The best part?

You can click on the little “src” link and it’ll show you exactly where the link is in the page’s code.

Viewing the exact location of a broken link on a Shopify page

Now that you know where your broken links are, you can correct the URLs in Shopify.

Step #3: Find Redirect Chains

Sometimes you have to move a page or resource, so you create a redirect to keep people from landing on a 404.

But then you move it again.

Like that time in your 20’s when you lived in 7 different places in a single summer and the postal service had to keep forwarding your mail.

Someone tried to reach you in Boston but you forwarded your mail to Denver…but by that point, you were living in Pittsburgh. And so on.

This is called a redirect chain. (They’re awful.)

It looks like this:

Example of a redirect chain

Instead of flying your rocket all the way from Hala to Xandar and being told you need to head to Terra, just skip the pit stop and go directly to Terra. Much faster, right?

If you already subscribe to an SEO tool like Ahrefs or Moz, you can go ahead and use them for this process.

If not, download the ScreamingFrog website crawler.

You can only crawl 500 URLs with the free version, but that should be enough (unless you have a large store).

Here’s how to run the crawl:

In ScreamingFrog, at the very top, enter your store’s URL.

Then click “Start.”

Easy so far, right?

Once that’s done, get the redirect report from the menu by going to Reports → Redirect & Canonical Chains.

Use Screaming Frog to find Redirect Chains

That should export a .csv file. Open it in your favorite spreadsheet app.

This displays your store’s redirects.

To check for redirect chains, find the column that says “Redirect URL 2.”

If there’s anything there…you have a redirect chain. Eww.

(If it’s empty, congratulations! You don’t have any redirect chains.)

Fortunately, ScreamingFrog makes it easy to fix those.

Your report has 2 columns that tell you exactly how to optimize your redirects—”Address” and “Final Address.”

Screenshot of the 2 columns in the redirect report from Screaming Frog: 'address' and 'final address.'

Now you can search each item in the “Address” column and make sure it points directly to the destination in “Final Address.”

Bye-bye to the DMV workflow. Hello to happy customers.

Use AMP to load lightning fast on mobile devices.

9. Enhance Mobile Performance with AMP

Your store must be ready for users on mobile devices because they won’t hang around for a store that moves at a snail’s pace.

Lucky for you, it’s easy to create Accelerated Mobile Pages that load in the blink of an eye.

You just need a killer AMP App.

In fact, the team at Chartbeat found that people read AMP content for longer than they read standard web content.

And the longer someone engages with your store, the more likely they are to buy…and they’ll buy more, too.

Shopify has a few you can install:

  1. AMP by AMPify Me
  2. AMP by Shop Sheriff
  3. FireAMP by MLveda

(We assume you chose AMP by Shop Sheriff.)

Once you’ve installed your app, scroll down in the Dashboard and publish your AMP pages.

Publish your AMP pages in Shopify

The app does most of the heavy lifting for you, which is nice.

…But you can also customize how your pages look for that extra level of control.

Once you’re done, all you have to do is wait about a week for Google to crawl your new AMP pages.

Shopify Speed Optimization: Download the Free Checklist
Want it all in one place?
Download the one-page Shopify speed optimization checklist.
Delete unnecessary apps to speed up your store.

10. Delete Unnecessary Apps to Stop Losing Sales

Apps are great. But more apps means more code.

More code means a slower store.

A slower store means less revenue.

Eww.

In this tip, you’ll learn how to ditch the dead weight apps that are costing you dollars.

Step #1: Find Your Currently Installed Apps

Head over to your apps.

Navigate to your installed apps in Shopify

Shopify displays your currently installed apps.

Step #2: Audit Your Apps

For each app in your store, ask:

  1. How often do you use this app?
  2. Does this app help you hit your goals?
  3. How would your store suffer if you removed it, if at all?

If an app isn’t essential, it’s time to shortlist it for deletion.

(…just make sure that it’s actually not essential.)

Step #3: Delete Your Apps

Deleting apps from your store should be safe.

But you want to protect yourself in case you make a mistake.

For that reason, we recommend you check in with a developer before you start deleting apps.

Sometimes an app that you don’t think you’re using is actually integral to your store!

Audit your quick-view popups.

11. Analyze Quick View Pop-Ups to Understand User Interest

Quick view pop-ups are great. Just a little rollover + click and the product info appears.

An example of a quick view pop-up in a Shopify store

But they add a ton of data…which is a drag on your load time.

Are they worth it? Are your customers even using them?

Better get some data to see which pop-ups are worth keeping.

Step #1: Identify the Pop-Ups to Examine

While it might be tempting to analyze all the pop-ups, you should pick the 30-35 most important product pages to test.

Which products do you sell the most of?

Which products do you think you should be selling more of?

Those are the product pages you want to examine.

Step #2: Collect Your Data

Did you set up Hotjar?

If you did, then make sure you create a heatmap for each product page you want to test.

Then all you have to do is hang back and wait for the data to collect.

If you didn’t (or if you don’t like Hotjar), then Hindsight and Lucky Orange work as substitutes.

(Apps like Lucky Orange will slow down your store during this analysis. Remove them when you’re done!)

Step #3: Test, Test, and Test

Now that you have your data, turn off the pop-ups and wait for the data to collect again.

Make sure you collect your sales data separately from the previous test.

(This is called an A/B test or split test, by the way.)

Step #4: Analyze Your Data

Now you have your data. (Hooray!) But you have to analyze it.

Sometimes, the results are clear. You remove the popups and sales increase.

Other times, you see no effect. (Or a negligible effect.)

If you’re handy with stats, we recommend using a simple correlation to determine the effect of removing popups on your sales.

Step #5: Take Action

If the analysis shows an uptick in sales when popups are gone, then it’s pretty clear where you need to do.

If there’s no difference, what you need to do is still clear—get rid of them. They’re not contributing.

The only time you shouldn’t remove these popups is when you would see a clear decrease in sales.

Shopify Speed Optimization: Download the Free Checklist
Want it all in one place?
Download the one-page Shopify speed optimization checklist.
Beware nested collections

12. Beware of Nested Collections (for Big Shops)

Big Shopify stores sometimes use collections to create a hierarchy of items.

And while that can be great for UX, nested collections with large numbers of items are sluggish to load.

Why?

It’s because of the code. Bear with us.

There’s this code structure in your Shopify store called a for loop. It works like this:

For every item in your collection, starting at the first and going to the last:
Step #1: Check some condition.
Step #2: If that condition was false, do nothing. If that condition was true, do some action.
Step #3: Move to the next item.
Step #4: Return to Step #1.

That “do some action” in Step #2 is sometimes another for loop.

In other words, one for loop is sometimes nested inside another for loop, kind of like those Matryoshka Russian nesting dolls. (Or a gag gift.)

In this case, your store runs the inner loop for each item in the outer loop.

So if you have 50 collections with 2,000 products each, that’s 100,000 (50 x 2,000) operations.

Your store is fast…but it’s not that fast.

The solution?

(One that doesn’t require hiring a developer to refactor your store’s code?)

It’s Findify.

Findify is easy to integrate, is capable of processing large collections in seconds, and even supports multiple languages.

Instead of making your loop smarter, Findify uses an entirely different solution: smart searching.

Now you don’t have to loop through your collections and products to show what your customer wants: Findify does it faster.

But that’s not all. Findify doubles as a personal shopper—it analyzes your customers’ behavior and learns to recommend the products they’re most likely to purchase.

The result? Your customers see more products that they like, so they buy more.

That’s how they get amazing results for their customers, like helping Mexican pet supplies company Pet n’Go up their conversions by 35%.

Here’s a quick (and adorable) video from Findify about what they do and how they solve this problem:

If big collections are your pain point, they’re worth reaching out to. You’ll get a faster store and smarter filtering in one package.

Lazy load your assets to save time.

13. Lazy Load Images to Lower Waiting Times

Slow-loading images are torturous.

Why make people wait for a page to load because something at the bottom of the screen got jammed in traffic?

Lazy loading optimizes your store because it forces your store to only load the immediately visible parts of the page.

Lazy loading works by displaying low-quality placeholder images first.

Then, as you scroll down the page, the high-quality image replaces the placeholder once it comes into the view.

Way more efficient, right?

Lazysizes by aFarkas is a fast and SEO-friendly lazy loading JavaScript library for images, videos, and iframe assets. It can also help you implement responsive images (images that adapt to different screens sizes), which is a huge bonus.

Unfortunately, it takes a bit of effort and a lot of time to set up, especially for a larger store with many images.

Here’s how to get started with Lazysizes.

Step #1: Navigate to Your Assets Folder

Log into your store’s backend. Then go to Online Store → Themes → Edit Code → Assets.

Navigate to the Assets folder in your Shopify store's backend

Super easy. You’ve done this before.

Step #2: Create a Lazysizes.min.js File

Click on “Add New Asset.”

Click 'Add New Asset' to create a new asset file.

This will launch a modal with two tabs. Click the “Create a blank file” tab and fill out “lazysizes.min.” Then select the “.js” extension, like this:

Create a blank file called 'lazysizes.min' and select the '.js' extension.

Click “Add asset.”

Step #3: Add the Lazysizes Code

Navigate to the content of the lazysizes.min.js file on Github.

Then copy and paste it into the new asset file you just created on your Shopify store.

Click “Save.”

Step #4: Call the Lazysizes.min.js File from Your Theme

Head to Themes → theme.liquid.

At the bottom of the <head> section (right before you see </head>), paste the following line of code:

<script src="{{ 'lazysizes.min.js' | asset_url }}" async=""></script>

This means your store will execute the code in the Lazysizes library right before it loads.

Now we’re all set up.

Step #5: Add the Lazysizes Class to the Images You Want to Lazy Load

This is the most time-consuming step.

You need to add the class="lazyload" snippet to every <img> and <iframe> tag on your store that you want to lazy load.

First, go to the page or post you want to edit.

Navigate to the Shopify post or page you want to edit

Then go to the HTML editor in the post.

Change to the HTML editor in that post

From there, do a Control + F (or Command + F) for all <img tags. Then add the class="lazyload" and replace the src tag with the data-src tag, like this:

Image showing the slightly different source code for lazy loading an image with the lazysizes library in the Shopify page editor

Remember to save your changes!

Shopify Speed Optimization: Download the Free Checklist
Want it all in one place?
Download the one-page Shopify speed optimization checklist.
Replace sliders and carousels with hero layouts.

14. Engage More Buyers by Scrapping the Carousels for Hero Layouts

Carousels—those automated marquee slideshows that display different images—look great…but they’re slow.

Here’s some tough love:

Your customers don’t care about carousels.

They look bad on mobile devices, add distracting movement to the page, and don’t inspire people to take action.

It’s time to throw the carousel in the compactor and get with the times. Use a Hero Layout.

Here’s how:

Step #0: What’s a Hero Layout?

A Hero Layout, or Hero Image, is a large image with catchy text.

It’s usually at the top of the homepage because it’s meant to capture attention and deliver a gut-punching impact to the potential customers that arrive to your store.

A winning Hero Layout has three key components:

  1. High-Quality Image: Use a captivating, high-resolution visual that catches the eye. Remember: you can resize your image down, but never resize up. High-resolution images rarely look fuzzy.
  2. Clear Message: A great hero image must represent your brand mission to users as soon as they arrive. What are you offering? Why should users care about you?
  3. Call to Action: Inspire some action with a strong CTA that encourages users to browse your products or check out a special deal.

Your hero layout is your you-get-it-or-you-don’t power play. It’s your nonverbal signal to your #1 buyer persona: this is what we’re about and we’re perfect for people like you.

Here’s an example of a Hero Layout we created for our client, To Have or to Borrow:

Hero Layout from our client, To Have and To Borrow

Pretty effective, right?

Here’s how to make one:

Step #1: Identify Your Buyer Persona

You probably have one of these already, but just in case you don’t—a buyer persona is a demographic/psychological profile of your ideal customer.

The reason you identify the buyer persona you want to target is because it lets you get specific with your messaging.

Once you know what your ideal buyer is looking for, it’s time to move on to the next step.

Step #2: Deconstruct Your Carousel

Which image in your carousel appeals the most to your ideal buyer persona?

That’s the image you want to use for your hero layout.

If you aren’t sure, talk to your customers and ask them.

Or you can put up a different section each week, record the click data, and then make your decision.

Either way, you should leave this step with a single winning layout idea.

Step #3: Create Your Hero Layout

If your slider already looks like a Hero layout, then most of the work is done for you.

But otherwise, here’s how to make one:

Hero Layout Step #1: Select/Create an Image that Features Both Your Product and Ideal Customer

You probably have some product photos that already fit the bill.

But in case you don’t, you’ll have to collaborate with your product designer or photographer to take some.

Don’t have access to a photographer? You can substitute a stock photo from Unsplash or Pexels that fits your brand, but generally featuring one of your products is a better idea.

(Make sure you optimize it for the web! Large images kill your load time.)

Also, it should have plenty of room for your copy and call to action, like the one from To Have or To Borrow. Notice how the entire left half of the image is empty space for the text and button? That’s about right.

Once you’re happy with your image, it’s time for the next step.

Hero Layout Step #2: Craft a Compelling Message

Your current tagline or message might be converting well. But take this opportunity to revisit it and make it better.

Let’s look at the message from To Have or To Borrow:

Every accessory is custom made for you, whether you rent or purchase.
Handcrafted Artisan Accessories for the Modern Bride.

To Have or To Borrow knows what their ideal customer wants: custom-made, high-quality accessories for the special day that’s all about them.

But they also know their audience wants to feel modern and unique—hence that headline: the presence of the words handcrafted, artisan, and modern are subtle hints that what you get from To Have or To Borrow is contemporary, crafty, and unique.

Stuck on some examples? Our friends over at Wordstream have a great post on how to create hero layouts.

Hero Layout Step #3: Create your Call to Action (CTA)

Simple is better.

The best calls to action are clearly visible and promote a benefit—while “Shop Now,” “Order Now,” and the like are classics because they work, you should also test things like “find your perfect fit,” “snag it now,” and “yes, I want a new x!”

Your CTA should stand out from the rest of the page—you can test this with live users or heatmaps to ensure people see and click on it.

Hero Layout Step #4: Make and Test

Once you (or your coder/designer) have built the hero layout on your store, make sure to test it.

Test the call to action to make sure it actually takes your customer to the right place, yes, but also test that it’s converting better than your slider.

(Of course, your page should load a lot faster now too.)

And that’s how you create a Hero Layout.

…and if you have to keep the carousel (although we think you shouldn’t), at least lazy load your images.

Learn how to use GTMetrix to spot-treat problematic assets

Bonus: Use GTMetrix for Expert Shopify Speed Optimization Insights

GTMetrix is a free tool to help you benchmark the load times of your Shopify store (and any other websites you might own/want to study).

It’s easy to use, too—just pop in your store’s URL and click “Analyze.”

Paste a URL into the GTMetrix's tool and click 'Analyze'

Interpreting the results is where things can get a bit confusing.

That’s what the rest of this tip is for.

The Overview

Once your analysis is finished, GTMetrix gives you an at-a-glance overview of your store’s performance.

The at-a-glance overview of a website's performance in GTMetrix

Take a look at the two bottom sections—Performance Scores and Page Details.

Performance Score is an overall grade your store gets from the 2 tools GTMetrix uses to perform its analysis—Google’s PageSpeed Insights and YSlow, an open-source website loading testing kit/browser extension.

We typically don’t pay too much attention to the performance scores.

The Page Details are the more granular data points: the number of seconds it takes to fully load your store, the size of the page, and the number of requests your store had to make in order to fully load.

As you may have guessed, getting these scores as low as possible correlates with a faster store (and fewer lost customers!).

The arrows next to your scores are indicators of how your store measures against an average website; you can hover over the arrows to get more specific information.

Arrows in GTMetrix's analysis that indicate how this URL measures against the average website

The Waterfall Chart

The next section shows you a breakdown of suggestions and scores from PageSpeed Insights and YSlow. This is pretty self-explanatory, and we don’t think it’s the most valuable piece of information.

Instead, click the tab to go to the waterfall chart.

Navigating to the waterfall chart in GTMetrix

A waterfall chart is a request-by-request visualization of how your store loads.

In other words, you can visually check which of your store’s elements take the longest to load.

(And therefore you know where your greatest returns are!)

The chart, at first glance, can be a little overwhelming:

A screenshot of the waterfall chart in GTMetrix

We suggest looking at GTMetrix’s guide to reading a waterfall chart.

The two most important things to pay attention to are the brown and purple colors.

Brown is for blocking elements. JavaScript or CSS can sometimes be render-blocking; that is, they prevent the rest of the page from loading until they’re done.

Brown is for blocking elements.

This creates a bottleneck unless you’re loading asynchronously. Not ideal.

Using Google Tag Manager to asynchronously load your tracking snippets and minifying your CSS and JavaScript can reduce or eliminate the amount of blocking time.

Purple is for waiting. In GTMetrix, it refers to something called the time to first byte (TTFB), which is how long it takes for your store to receive the first byte of data from whichever resource it’s loading from.

Time to First Byte tells how long it takes for your store to receive the first byte of data from whichever resource it's loading from.

You can reduce your waiting times by upgrading your Shopify hosting plan. (You could also switch your content-delivery network (CDN), but the Shopify CDN already performs quite well!)

For a more thorough breakdown of how to read the GTMetrix waterfall chart, head over to the fantastic guide at Kinsta.

When you learn how to use GTMetrix’s waterfall chart, you can spot treat your store’s performance and see the biggest performance gains for the least amount of effort.

That’s efficient.

Wrapping Up: Your Lightning-Fast Shopify Store

There’s your list of insanely actionable Shopify speed optimization tips.

You’ll quickly notice the difference in your store’s speed after you tackle a few of these.

And your customers will too.

(Which means you’ll sell more products!)

Which tip will you try first? Drop a comment below to tell us or to ask any questions you still might have. We’re here to help.

READERS ALSO LOVED

What do you think?

Have feedback? Maybe some questions? Whatever it is, we'd love to hear from you.

4
Leave a Reply

2 Comment threads
2 Thread replies
1 Followers
 
Most reacted comment
Hottest comment thread
3 Comment authors
  Subscribe  
newest oldest most voted
Notify of
colin

Can i just copy the code in point one that you included in the custom html if i want my shopy JS elements to load asynchonously. You did a good job in the guide up to that point, but never made it clear what we should put in the tag to get the page to load asynchonously.

José

Hola, excelente artículo. Una pregunta. He observado que para el theme debut (predeterminado de Shopify), ya existe una clase lazyload y he observado que se utiliza en algunos lugares de theme (Página de producto tiene 3 img tags y en 1 de ellas se utiliza esa clase). Sin embargo, al pasar la web por Pagespeed me recomienda que posponga la carga de todos los thumbnails en la página de producto. Es posible aplicar lo que comunicas sobre lazy load a la Product Page? La implementación sería la misma? Tenemos que agregar el archivo .js si ya existe una clase lazyload?… Read more »