Ever since Google announced that page speed is a ranking factor under its “page experience update,” ecommerce brands have been frantically looking for ways to improve their site performance.
Aside from SEO, Shopify speed optimization is important for creating a positive shopping experience—and a slow website can have a major impact on your conversion rate.
People will point fingers at their Shopify theme, their apps, or their content as the source behind their slow page speed score, but the truth is the problem can’t be pinpointed to one area. All of these factors contribute to your page speed.
Hannah Beasley, one of our developers, explains it well: “Every single element you add to a website, or to a website page, is going to have an impact on page speed. It's super important to be mindful about any additions you make.”
Time is the new currency, and speed equals revenue. That being said, let’s look at the ways you can improve your ecommerce website’s page speed.
In this article, we’ll touch on the following:
- Why page speed matters
- Page speed and the consumer expectation
- How to measure page speed
- The truth about Google PageSpeed Insights
- 19 ways to improve your page speed
- Our page speed experiment
- Recommended page speed tools
Why page speed matters for ecommerce brands
It’s no secret page speed affects conversion rates. And Jake Loveless, CEO of Edgemesh (a headless ecommerce platform), even compares it to a silver bullet:
“Page speed is like a bullet. A fast site can be the silver bullet for problems like conversion rate, abandonment rate, and ARPU. A slow site can be the bullet that kills the business.” Jake told us.
When it comes to page speed, a 1-second delay in page speed time can cut conversions by 7%. But it goes so much deeper than sales alone. In fact, page speed has an impact on four key areas of your business, including…
- Conversions: Customers won’t stick around on a website that takes too long to load. They’ll drop off at some point during the shopping journey, meaning money left on the table for you.
- SEO: There are three Core Web Vitals that Google uses to measure the overall performance of a website: loading time and reaction speed are two of them. And one experiment by Sistrix found that slower pages are ranking 3.7 percentage points worse in the algorithm.
- Consumer trust: A website that takes too long to load leads to customers questioning whether or not they can trust purchasing from it. They’re already wary of online brands they’ve never purchased from before, so building credibility with a well-functioning website is important.
- Adwords cost: Your overall quality score will impact your Adwords pricing—and page speed is one of the metrics considered under the “landing page experience” category. A higher quality score leads to lower CPC prices.
Page speed can also impact how mobile users interact with your site, your bounce rate, the overall customer experience, and, like we said, your revenue. The chart below shares some additional shocking page speed facts.
Simply put, page speed matters for your overall website performance, and every second that goes by without your site fully loading makes for a frustrating user experience.
“It’s important to keep the user experience as the focus of what you’re doing. You might score really high with Google page speed, but it can still feel like your website is slow to users. I'm not saying that your page speed score doesn't matter, but the user experience is just as important—if not more important.”
- Hannah Beasley, Developer at Fuel Made
Page speed and the consumer expectation
In terms of page speed, fast equals less than three seconds.
John Mueller, Senior Webmaster Trends Analyst at Google, admitted that sites should aim to load between 2 to 3 seconds. Even though John shared this back in 2016, it still holds true today.
In fact, page speed impacts 70% of consumers’ willingness to purchase from an ecommerce store, according to Hubspot. Additionally, Google shared that bounce rate and page speed have a direct correlation, with the probability of bounce rate increasing by 32% if the page takes between 1-3 seconds to load.
Meeting and exceeding your customers expectations in terms of page speed will definitely help your brand stand out from competitors and drive more conversions.
How to measure and run a page speed test
The first step to improving your speed performance is to start with a test.
This process helps reveal the elements on your site that need some help. When testing your site, it’s important to do so for both desktop and mobile, as well as the homepage and product pages.
One of the more popular and important tools merchants lean on for testing page speed is Google PageSpeed Insights. (This produces the benchmark that we can presume Google uses, and it’s the benchmark that Shopify uses as well when scoring your site, which is viewable in your admin.)
When you run your website through the tool, you’ll get your speed scores for mobile and desktop, and whether your score passes the Core Web Vitals assessment or not. Next, it will list recommendations on where you can make improvements.
What is a good speed score on Shopify?
If you’re using Shopify, you get a daily update of your speed performance (available in your store’s admin), which will give you a score between 0-100.
Your page speed score is calculated based on your Lighthouse Performance scores from your homepage, your product page with the most traffic over the last 7 days, and your collection page with the most traffic over the last 7 days.
A speed score over 50 is considered good. And if you scored over 70... Congrats—you’re in great shape!
The Truth about Google PageSpeed Insights
Before you go implementing Google’s advice for website speed, you should remember there are a couple factors at play here:
- Your ecommerce store may need certain functionalities that require third-party apps or large file sizes, meaning you can’t fix Google’s suggestions for those, and/or…
- You might not have control over some of the recommendations they make (which can definitely happen if your website is on a hosted platform, such as Shopify).
While these recommendations provide a good reference point for optimization, aiming for a perfect score isn’t necessarily the goal.
Google PageSpeed Insights is based on a set of standardized rules—Google’s rules. There is perceived performance at play here, versus your site’s actual performance. And many aspects of a site may appear slow in automated tests but aren’t impacting user experience (such as background events that users don’t see).
In other words, Google PageSpeed Insights doesn’t perfectly account for user experience as it relates to a website’s loading time.
Either way, you might be a bit overwhelmed by the issues it does flag. Words such as, “Eliminate render blocking” or “leverage browser caching” may sound like another language, and you’re not alone.
So let’s translate, shall we?
Note: some recommendations require advanced coding, and the end result can be minimal. It might not be worth the cost to change them.
19 ways to improve page speed on your ecommerce site
Before you make any changes to your site, collect user metrics to understand what experiences customers have when navigating through your pages.
While PageSpeed Insights can give you a list of recommendations to tackle, seeing how customers interact on your site can help you prioritize what recommendations are actually necessary to improving the shopping experience.
"Your best bet is to do your research, ask around, see what's working and what's not. Page performance is an ever-evolving space, and we all learn the new ‘best way to do things’ every week, if not everyday. If you don't believe me, just ask your SEO guy!”
- Branden Brooker, Account Partner at Edgemesh
1. Use a reliable ecom platform
Web hosting services play a critical role in the performance of your site. We recommend Shopify because it has key advantages for ecommerce brands. Since it’s a hosted platform, the server is scalable and is optimized to handle the needs of an ecommerce store, meaning site load times are often quicker than they would be if you use your own server.
What does this mean? Basically, Shopify provides most of the back-end, server-related needs for businesses, such as the hosting service, server quality, content delivery network, and anything else to do with the server side of a website.
This gives developers more time to make front-end improvements, including cleaning up the HTML, CSS, and Javascript, which can have a more immediate impact on page speed anyway.
If you aren't on Shopify, make sure you're using a reliable hosting provider.
2. Keep your code clean
HTML code errors, additional Javascript libraries, and unnecessary CSS all contribute to slowing down your page load time.
For coding mistakes, it takes longer for the browser to load because it’s looking for elements it can’t reach. Additional JavaScript and unnecessary CSS both make the website work harder to load items that may not be necessary for the user experience.
Every single thing that you add has an impact. Keep the JavaScript as small and as purposeful as possible, make sure it's not bloated, and be really careful with what's written in your CSS by not adding unnecessary code.
We recommend writing vanilla Javascript, which is essentially Javascript in its base form without using any additional libraries.
What does this look like? Check out our story with Tuft + Paw, where we carefully structured the theme’s code to prioritize the most important items to pre-load, what to lazyload, and the best way to load other files for each area of the website.
3. Use Shopify apps sparingly
As a store running on Shopify, we understand you rely on third-party apps for pop-ups, subscriptions, UGC, etc. But adding a lot of apps to your site can actually be a big contributor to page speed delays.
When choosing which apps to download on your store, keep an eye out for ones that are responsibly created, meaning the developers have prioritized keeping code succinct. It’s best to have a developer assess an app first to make sure it’s optimized for page speed.
“Some apps are pretty irresponsible with how they add scripts. They’ll have way more code in them than is probably even needed, and they just weigh down a site.”
- Hannah Beasley, Developer at Fuel Made
To figure out what apps are impacting your store’s page speed, run a pagespeed test before the app is installed and then after to see how much of a difference it makes in site performance.
It’s best to remove any apps that aren’t absolutely necessary. (Some functionality can be coded directly into your theme without the need for an app.)
4. Optimize and compress your images
Images typically make up a huge chunk of weight on websites (around 65 percent), and you’ll see some big wins by compressing them—especially large images.
There are two ways to ensure image optimization:
1. Images should run through a photo compression website, such as tinypng.com.
2. Another option is to crunch the images and serve them via a CDN (content delivery network). This approach optimizes, delivers, and caches your entire image library, so you don’t need to re-upload your compressed images. (Thankfully, Shopify does this for you!)
Image size can slow a website down in a significant way, especially websites that have a lot of images that aren’t compressed.
Images should also be lazy loaded. Lazy loading is when you postpone the load time of images that are outside what the user is seeing on the web page. For example, when someone first lands on a website, the images that sit below the fold don’t need to load right away because the user won’t even see them.
Lazy loading helps pages load faster because the images aren’t using resources until just before they’re needed, so the webpage can focus on the resources that do need to load right away.
5. Use a Content Delivery Network (CDN)
Like we just mentioned above, serving images through a CDN is another way to deliver images to users.
CDN’s are a group of optimized, high-quality servers that are dispersed around the world. It means that copies of your site content—images, Javascript, and CSS files—are cached and stored in the server. When a visitor enters your site, these assets are downloaded from the server closest geographically, which speeds up download time.
Since the nature of ecommerce means you can sell internationally, you should strongly consider a CDN.
Side note: Shopify provides a CDN for all static assets (images, CSS and Javascript). This is a big perk for using Shopify as your platform since you won’t have to worry about setting up a CDN for your assets.
6. Avoid hero slides and carousels
Not only do rotating image sliders and carousels carry a lot of weight (which take a long time to load), they are also a website accessibility nightmare and a big conversion killer.
And since they’re usually one of the first things present on a homepage (being used above the fold), it’s a big download request for the browser right away.
It’s most effective to just use one image.
7. Add videos with lite embeds
Believe it or not, the way you embed videos on your website has an impact on your page speed. In fact, the standard embed code from YouTube makes your site bloated because the files will start to download before the user decides to even click “play.”
Using lite embeds, you can load the videos directly to your webpage. When the browser then goes to load the page, it will only embed the thumbnail image. The rest of the video will only load once the user decides to interact with it.
If the video is placed below the fold, you can lazy load them, so the video will not be downloaded until the user scrolls to them.
“Lazy-loading is a technique that defers loading of non-critical resources at page load time. Instead, these non-critical resources are loaded at the moment of need. Where images are concerned, ‘non-critical’ is often synonymous with ‘off-screen’.”
- Jeremy Wagner and Rachel Andrew at web.dev
8. Replace icon fonts with SVGs where possible
Fonts take up a large amount of space on your website, so if you’ve got multiple fonts on your website, keep it simple and choose one, if you can.
Since it’s common for websites to use icon fonts for cart and account pages, we recommend replacing those icon fonts with SVGs (scalable vector graphics). SVGs come with a few improvements: they are not limited to single-color, are lighter in weight, and can be better for accessibility and SEO.
Note: There are two ways to include SVGs on your site:
- Using an actual image with the SVG file type, which has the advantage of being cachable by the browser.
- Using the raw code that makes up the SVG. These are called Inline SVGs, and they don’t require a request to the browser to download and see.
Both options are valid and depend on the website being developed.
9. Set image dimensions
There are two image dimension recommendations you should use to improve page speed:
- Use srcsets: This is an attribute of an image tag. When using srcsets, the developer adds links to the image that are all different sizes—large and small. This allows the browser to only download the image best suited for the screen size. On mobile, the browser would download a smaller version of the image. On desktop, it would download a larger, more high-res version.
- Set the image width and height: This tells the browser what the image’s aspect ratio is, helping it know in advance how much space the image will take up. It prevents the page from jumping around when loading, since the browser can essentially reserve the space needed for each image before it's actually downloaded.
10. Reduce your number of “requests”
Anytime you have a resource linked in your Shopify theme code that has to be downloaded, it’s called a “request.”
Common requests include images, JavaScript files, and CSS files. Every single one of these is its own request. The more requests you have, the more the user has to download, and the harder the browser has to work to open them all.
Keep your number of requests limited (because they can definitely add up quickly), and make sure the requests you do have are properly optimized for your website (i.e., image files aren’t so large that they take forever to load).
11. Use HTTP/2 to bundle requests
First off, you want to use HTTP/2 (not 1.1), and here’s why:
“HTTP/1.1 loads resources one after the other, so if one resource cannot be loaded, it blocks all the other resources behind it. In contrast, HTTP/2 is able to use a single TCP connection to send multiple streams of data at once so that no one resource blocks any other resource” (CloudFlare).
Essentially, with HTTP/1.1, your website will take longer to load requests because it has to finish one before it starts the next one. But with HTTP/2, which Shopify uses, you can signal many requests at the same time so they load faster.
How do I know if I’m using HTTP/1.1 or HTTP/2?
Using Developer tools, you can learn if your website uses HTTP/1.1 or HTTP/2. For example, the HTTP/2 and SPDY Indicator tool adds a lightning bolt to your browser’s toolbar, and it changes color depending on if the browser is on HTTP/1.1 or HTTP/2.
To check without downloading a tool, go to your website and go to dev tools > network tab. Then right click and enable the protocol tab and see which protocol version is being used. If it says “h2,” you’re using HTTP/2.
How do I switch to HTTP/2?
Shopify uses HTTP/2, so if you’re using Shopify you won’t need to worry about this. If you aren’t on Shopify, you’ll need to make sure your hosting supports HTTP/2. It’s best to work with an experienced developer if you plan to make the switch. Here’s a guide that can walk you through the process.
12. Leverage Browser Caching
Whenever you visit a website, you’re downloading a lot of different assets into your browser's local cache: HTML, CSS, Javascript, and images. This is so a website doesn’t need to retrieve these assets on every page load, and when a user revisits your website they don’t have to redownload all the assets.
Luckily, Shopify has fast servers and good systems in place for caching already, meaning developers don’t have to worry about setting up browser caching because Shopify does this already. This is one of the many advantages to using Shopify.
However, if you’re not using Shopify, there are tools that let you see if you already have an expiration date set for your cache. If you don’t have an expiration date, you should set your “expires” header to one year if you aren’t frequently updating your website.
For more information on leveraging browser caching, Google has a guide here.
13. Minify your code
Minifying your code can be tricky, so it should only be done by an experienced developer. It happens when Google detects the size of a resource can be reduced through minification.
Minification is the process of removing or fixing unnecessary data from resources such as JavaScript and CSS without impacting how a browser will process the HTML. It can remove duplicate code, make code shorter by stripping comments and white space characters, and make variable and function names shorter.
In return, all this saves a few kilobytes here and there.
If you’re on Shopify, the platform automatically minifies JavaScript and CSS. However, the most ideal setup is to handle preprocessing/minification before uploading to Shopify because it gives you more control over how assets are minified and processed. This is what most expert Shopify developers do, and how we do it here at Fuel Made.
To get the most out of minification, take away SCSS processing duties from Shopify and roll out your JavaScript and CSS build processes with things like Webpack, PostCSS, cssnano, and Purgecss. Uglify JS is a great tool specific to JavaScript.
Many ecommerce merchants rely on third-party apps, which are common culprits to this issue. You’ll most likely have to contact the app developer to manage these files.
14. Eliminate render-blocking JavaScript and CSS
Eliminating render-blocking resources means decreasing the amount of resources that prevent or delay the rendering of the page, so that the page, and especially above-the-fold content, will be visible as soon as possible. This means restructuring your code so that only critical assets and content are loaded first.
By prioritizing assets that provide necessary styling and functionality for above-the-fold content, you can ensure your users are able to access the most important part of the page as quickly as possible.
“The idea is you want the website to show up as fast as possible, and you want to make sure you're not delaying that process by adding a lot of resources that the browser has to download before it renders the rest of the website.”
- Hannah Beasley, Developer at Fuel Made
While everything on a website needs to be downloaded at some point, JavaScript and CSS files present their own unique bottleneck as they must also be executed.
Because the browser stops rendering to ensure the files are executed in the most efficient way possible, these files can momentarily prevent content from being accessed.
The solution is to put the JavaScript up as high as possible, so the browser starts downloading it quickly. Then, defer or async load it (these are attributes added to the script tag).
Defer and async both allow the script to be downloaded in the background without stopping the page from rendering. When downloaded, an async script will immediately execute (whether the page is done rendering or not).
A defer script won't execute until the page is done being parsed, and it will execute in listed order. So if you have three deferred scripts, the first one will execute, then the second, and so on.
Async scripts will execute out of order—as soon as each one is ready.
The goal is to get critical assets loaded as fast as possible, but in a way that doesn’t keep the page from being rendered.
Note: This can be tricky to implement, and it should be done by someone with advanced CSS and JavaScript skills, especially if your store lives on Shopify.
15. Avoid quick shop pop-up windows
Many Shopify themes include a quick view pop-up window which provides an overview of the product from the homepage or collection page. This does so without loading an entirely new page. Many times, users can even add the product to their cart from this pop-up.
As nifty as they are, these pop-ups often preload all of the information from a product page even if someone doesn’t click on the “Quick View” button. On a page full of thumbnail product images, this adds up to a hefty amount of data.
If it’s not necessary, we recommend removing them.
16. Reduce redirects
Moz defines a redirect as “a way to send both users and search engines to a different URL from the one they originally requested.” They’re often used when a URL is broken, you have a new page or website, or you’re in the midst of updating a page and need to send customers elsewhere in the meantime.
However, not only can redirects impact your SEO game if you choose the wrong type, but they also slow down your page load time because the browser has an additional HTTP request to go through.
There are two type of redirects:
- 301 redirects tell search engines that a website or page is moved permanently.
- 302 redirects tell search engines that a website or page is moved temporarily.
Try to avoid using redirects as much as possible. But if you must, Shopify recommends using a “cacheable redirect” or Shopify’s built-in redirects function. These are 301 redirects by default.
You should go through any redirects you’ve created in the past to check if
- You actually need them
- You’ve used the right type
- You’re redirecting to the right page
Google suggests not redirecting users to URLs that already have a redirect.
17. Clean up broken links
Have you ever tried to click a link from an article that ends up taking you to a 404 page? It’s frustrating for users, and it actually hurts your page speed because the browser will try to access the page through an HTTP request when loading the site.
Shopify suggests two ways to clean up broken links:
- Use a tool like Broken Link Checker to find broken links and manually remove them.
- Create a custom 404 error page to take users who have an incorrect URL.
18. Avoid creating too many liquid loops
Liquid is Shopify’s coding language. Creating a liquid loop happens when you want to create a page to (for example) show off all the collections your store has. In order to do this, you would need to loop through your collections to show them off.
A liquid loop essentially tells the website to do the following: "Go through my whole list of something (for example, collections), and for every single one that you come across, do this."
However, using too many liquid loops can get resource-heavy, putting a strain on the server. The more complex the liquid, and the more of it that there is, the slower the server response time will be. This is because the server has to take the liquid code, convert it to HTML, and then serve it to the visitor.
“Loops aren’t bad—they're actually very necessary. The key is handling them wisely and not over-using them. Loops should only be used when necessary, and liquid in general should be responsibly used. The more complex the liquid logic, the more work it is for the server,” said Hannah.
19. Consider going headless
Headless servers like Edgemesh become the front-end of your website, meaning you don’t have to rely on a slower server. They alleviate time to first byte (the time between the browser requesting a page and when it receives the first byte of information from the server), request time, and response time.
“We do something we call Dynamic Rendering, which is where we will catch Google crawler bots and serve them indexed HTML versions of the site. This is so the bot returns a super fast page load time to easily increase your google scores without having to do any heavy lifting with a developer,” said Branden Brooker, Account Partner at Edgemesh.
Our page speed experiment
A common theme among Shopify merchants right now: "we want the speed gains of moving to Online Store 2.0!"
Online Store 2.0 is Shopify’s latest evolution in theme building technology which they unveiled at their Unite event.
2.0 brings a lot of really cool bells and whistles, but by far the aspect that we’ve seen draw the most interest is page speed.
Shopify has worked hard to turn the interest up with this, and a lot of merchants want to rebuild on 2.0 to get the speed gains.
Shopify Debut vs Dawn — an apples-to-apples comparison
Seeing the interest in Dawn from merchants, we ran a test to see how much faster Dawn (Shopify’s flagship 2.0 theme) is than Debut (Shopify’s flagship 1.0 theme).
The goal? To learn if moving your website to Dawn for page speed alone is worth it.
In this test, we made all things equal, using...
- The same Shopify store
- The same content and data
- The same complexity
- No apps
Our hypothesis going into this was there wouldn’t be a huge difference between Debut and Dawn (Debut is really fast already).
On desktop, we were correct. There’s no real difference—both themes score in the high 90s.
But mobile was quite a different story…
Here are the final scores for both:
Analysis and conclusion:
2.0 is indeed faster, especially on mobile. A lot faster. The PDP going from 77 to 97 is pretty dramatic.
Again, let’s keep in mind the variables that impact page speed most are:
- Theme
- Apps
- Content
- Complexity
While 2.0 helps with the theme piece of that equation, we know the theme is not the only variable in page speed. AKA, if you take an app-bloated site with unoptimized content and complexity and squeeze it into a 2.0 theme, it won’t magically be faster.
But if you’re intentional and determined to improve site speed, the 2.0 technology can be a great resource to help you get there.
Recommended page speed tools
You can’t go wrong with a good page speed tool to help you test and optimize your website. Here are a few of our team’s favorite tools for testing web page performance and finding optimization opportunities:
When it comes to page speed and your ecommerce platform, every second counts
There are a lot of elements to consider that have an influence on page speed. It’s not an easy task to improve your speed, and some of these suggestions can be difficult to implement.
But remember… every second counts. So while a lot of these technical changes aren’t easy without professional help from a developer, it is worth optimizing your site.
“Faster pages keep users engaged better but they also get users to buy the things they want instead of just the things they need—or the things they came to the site to buy in the first place,” said Branden Brooker, Account Partner at Edgemesh.
Customer confidence will grow as a result of a speedy site, and so will their trust with your brand.
You just have to put the time in.
Looking to make page speed improvements for your Shopify brand? We can help. You can reach out to us here to learn about our process. Need proof? Here's how we helped Tuft + Paw improve page speed by 95%+ on mobile.
This article was co-written by Laura Kluz and Tina Donati.
