Some of the links on this page are affiliate links, which means that if you choose to make a purchase, I will earn a commission. This commission comes at no additional cost to you. Please understand that I have experience with all of these apps, and I recommend them because they are helpful and useful, not because of the small commissions I make if you decide to buy one. Please do not spend any money on these apps unless you feel you need them or that they will help you achieve your goals.
Join our newsletter and we'll send you our guide of how to create high-converting product pages.
June 28, 2021
Imagine this scenario: A user clicks a link on Facebook or Google to visit your site. They’re interested in one of your products or perhaps a piece of content you developed. They know it takes a few seconds for a site to load, especially if they haven’t been there before. After four seconds, they start to get impatient. At seven seconds, they give up.
In other cases, a user might reach your site, but grow annoyed with how long it takes to bounce around pages. They know your pages load eventually, but it's not worth the hassle.
If you’re like many ecommerce stores, these scenarios happen all the time. Your products are great, your shipping is fast and reliable, and your prices are reasonable, but your conversions are low because your site takes too long to load. Sadly, we see this all the time.
In this article, we’d like to talk about how your page speed affects your conversion rate. Then we’ll break down some important metrics to consider and teach you some effective tips to make your pages load faster.
Countless studies have confirmed that website performance has a measurable effect on conversion rates. The faster a page loads, the more likely users are to perform your desired actions.
Countless studies have confirmed that website performance has a measurable effect on conversion rates.
The following graphic explains this pattern, though the exact numbers differ from site to site. As you can see, just a few extra seconds of loading can obliterate your conversion rate.
Real companies have experienced these kinds of results. Walmart found that they could increase conversions by 2% for every 1 second improvement in page load time. COOK reduced page load time by 0.85 seconds and increased conversions by 7%. Mobify found that each 100ms improvement in their homepage's load time produced a 1.11% conversion increase.
Furthermore, page speed has been an SEO ranking factor since 2010. Now Google is all-in on page with Core Web Vitals, a set of page speed and user interaction measurements that affect how their algorithm ranks your site. The bottom line: Faster websites appear higher in Google’s results.
While your SEO performance doesn’t directly influence your conversion rate, stores that appear high in the search results definitely get more traffic and are seen as more authoritative.
So which metrics should you concern yourself with?
Load time is the length of time for an entire web page to complete every HTTP request. Your pages most likely make dozens of requests. As of 2021, the median number of HTTP page requests to load a webpage on mobile or desktop was between 69 and 73.
Page size is the total file size of your page. This includes all resources, such as text, images, videos, and scripts. This impacts how long it takes for a browser to load the page. It’s especially important for mobile users who may be paying for data.
Time to First Byte (TTFB) is a measurement of the amount of time between a browser’s request for a web page and when the first byte of data arrives. It’s important to start loading the page quickly, but this metric has become less important lately because it’s easy to manipulate (by forcing a small element to load first).
Round Trip Time (RTT) is the amount of time it takes for requests to reach the origin server and for the response to travel back to the device (a round trip). Faster round trips means lower latency and faster loading.
First Meaningful Paint/First Contextual Paint: This is the time it takes a page to load enough of its resources for a user to be able to consume the content. It might take a page 10 seconds to fully load, but be useful after only 2 seconds. (This is a Core Web Vital.)
First Input Delay: This is the time it takes for a user to actually interact with your page. Interactions include clicking a link, choosing an option from your navigation, or entering data into a form field. (This is a Core Web Vital.)
Cumulative Layout Shift (CLS): This refers to a page's visual stability; how much the page shifts around as it loads. If your elements move around a lot as new ones appear, that's high CLS, which isn't good. (This is a Core Web Vital.)
Before you start taking steps to improve your page speed, we recommend getting a baseline by running your site through a page speed checker. You should check your pages again after implementing any changes.
Google’s Page Speed Insights is undoubtedly the best tool to check your page speed. It provides you with lots of data on your page’s performance and offers suggestions for improvement.
We recommend combing through your pages using this tool and implementing all of its recommendations. These will help your conversions as well as your SEO performance.
Additionally, Google has another tool to test mobile pages. We like it because you can calculate the increase in revenue per tenth of a second in speed improvements. Whereas Page Speed Insights reports on a single page, this tool reports on your entire site’s mobile performance.
Lastly, in case you want to evaluate multiple pages at the same time, EXPERTE offers a great, free, bulk pagespeed checking tool.
Now that you understand why page speed is important and how to check yours, let’s talk about what you can do to improve it.
Images often take up the majority of a page’s size, so making them smaller is an easy quick win. Compress your images by making their dimensions only as large as you need them to be. So if an image appears in a content area that’s 600 pixels wide (at full size), then your image should only be 600 pixels wide. Be sure to follow your theme’s guideline for image sizes as well as Shopify’s guidelines.
Then run your file through an image file compressor like TinyPNG. You can reduce their file sizes 60-80% without affecting the quality much. Avoid having any images larger than 100 KB. Furthermore, some Shopify apps can automatically compress images.
A redirect tells your browser to look somewhere else for the page. This is another step in the loading process that adds time. Try not to use redirects if you can help it.
Adding the final slash in a URL tells the server that this page is the final destination. There are no file directors that need to be searched. This won’t save a huge amount of time, but every millisecond counts.
Minifying your code means removing all the spaces, comments, and additional markup that developers use to make the code easier to work with. Servers don’t need all that fluff. Every character you eliminate is one less character the server has to send to the browser.
Now that you understand why page speed is important and how to boost yours, we implore you to take action immediately. The sooner you increase your loading speed, the sooner you’ll enjoy the results (revenue!) of higher conversions.