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 tips 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 TipsChapter 1: Streamline Your Store With google Tag Manager
Chapter 2: Ditch The Dead Weight to Have a Faster Homepage
Chapter 3: Reduce Image Size to Eliminate Browser Scaling
Chapter 4: Minify Assets to Improve Page Speed
Chapter 5: Upgrade Your Hosting Plan to Stay Sharp... Even on High Traffic Days
Chapter 6: Beat Bloat by Hosting Videos On External Servers
Chapter 7: Reach Users On The Go With A Mobile Responsive Theme
Chapter 8: Offer Smooth Navigation By Reducing Redirects and Broken Links
Chapter 9: Enhance Mobile Performance with AMP
Chapter 10: Delete Unnecessary Apps to Stop Losing Sales
Chapter 11: Analyze Quick view Pop-ups to Understand User Interest
Chapter 12: Beware of Nested Collections (for Big Shops)
Chapter 13: Lazy Load Images to Lower Wait Times
Chapter 14: Enhance More Users by Scrapping the Hero Carousels
Chapter 15: Use GTMetrix for Expert Shopify Speed Optimization Insights
Let's get started.
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.
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:
Click "Create Account" to create an account with GTM.
On the next screen, you’ll need to fill out some information:
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:
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).
From there, select "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.
Click on the file name to open the code in the right editor.
Look for the
<head> HTML tag.
Now all you have to do is paste your Google Tag Manager code.
When you’re done, your code should look something like this:
Now you need to copy the second block of code into the
<body> section of "theme.liquid."
You’ll find the
<body> tag the same way you found the
When you’re done, your code should look something like this:
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.”
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:
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:
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.
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.
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.
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 ecommerce homepage design 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:
- Accessible: Your store needs intuitive navigation with a clean interface.
- 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.
- Valuable: People want content that addresses their questions, pain, and desires.
- Actionable: Your call to action should be clear, bold, and easy to spot and understand.
- 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:
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
...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.
The rest is pretty straightforward.
- Give your heatmap a name.
- Select the number of views you want to track (in this case, 2,000 is plenty).
- Enter your homepage’s URL so that Hotjar only records data from that page.
- 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.
If a section of your homepage looks ignored, that's a clear signal that you should remove it.
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.
Then click "Submit."
If it was successful, you can download the resized image.
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)
A new modal will pop up where you can specify dimensions, among other things.
Then click "Save." All done!
4. Minify Assets to Improve Page Speed
Code can be scary to mess with.
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.
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.
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
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 Page Load Time
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.
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.
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.
Option #1: Upgrading Your Shopify Plan
Shopify has a few different 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.
From there, click "Compare Plans."
Now you can see each of the existing plans and upgrade to the one that feels best for you:
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:
- Unlimited accounts
- API access
- Access to Shopify Plus Partners
- Unlimited Bandwidth
- Tax automation
- Dev environments
- Wholesale order management
- 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.
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!)
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 Shopify 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.
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.
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.
Then press "Download."
Super easy. Now it’s time to upload them on a dedicated video server.
Step #3: Upload Your Videos
(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.
Then follow the on-screen directions to upload your video.
Once that’s done, navigate to your video and click the "Share" button.
Click on the Share button and grab the embed code.
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.
Then paste the embed code you grabbed from Vimeo.
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.
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 mobile performance isn’t good, 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.
You’ll see something that looks like this as a popup or on the right side of your screen:
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.
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:
- Do all images look good on mobile?
- Does the navigation look clear on mobile devices?
- Are the buttons big enough and user-friendly? (Think about people with big fingers!)
- Is it easy to scroll up and down? Does it scroll at a reasonable pace?
- How is the checkout experience?
- Is it a seamless customer journey with minimal touchpoints?
- 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: Test and optimize Your Website Site 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.
Now click "Start Test."
Then you’ll see a list of optimizations Pingdom wants you to make:
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.
But most importantly, you can see how long it takes your store to load.
If it's under 3 seconds, congratulations! You’re in the clear.
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.
Step #1: Identify Your Redirects
First, open up your store’s backend and navigate to your URL Redirects portal.
This displays most of your store’s active redirects.
You can even filter for specific pages, like this:
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…
...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.
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:
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?
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.
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.”
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.
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:
(We assume you chose AMP by Shop Sheriff.)
Once you’ve installed your app, scroll down in the Dashboard and publish your AMP pages.
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.
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.
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.
Shopify displays your currently installed apps.
Step #2: Audit Your Apps
For each app in your store, ask:
- How often do you use this app?
- Does this app help you hit your goals?
- 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!
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.
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.
(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.
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.
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.
(One that doesn't require hiring a developer to refactor your store's code?)
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.
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?
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.
Super easy. You’ve done this before.
Step #2: Create a Lazysizes.min.js File
Click on “Add New Asset.”
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:
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.
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="" 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 <
<iframe> tag on your store that you want to lazy load.
First, go to the page or post you want to edit.
Then go to the HTML editor in the 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:
Remember to save your changes!
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.
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:
- 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.
- 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?
- 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:
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.
(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.
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."
Interpreting the results is where things can get a bit confusing.
That's what the rest of this tip is for.
Once your analysis is finished, GTMetrix gives you an at-a-glance overview of your store's performance.
Take a look at the two bottom sections—Performance Scores and Page Details.
A 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.
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.
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:
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.
This creates a bottleneck unless you're loading asynchronously. Not ideal.
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.
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.
Wrapping Up: Your Lightning-Fast Shopify Store
There’s your list of actionable Shopify speed optimization best practices.
Improving ecommerce site performance takes time, but you’ll 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.