9 Ways To Increase Site Speed On Your Shopify Store And Crush Conversions

It should come as no surprise that mobile now accounts for more than half of all web traffic. That’s right—it’s surpassed desktop as the platform of choice for browsing the web.

But here’s a figure that our team finds much more remarkable: 70% of mobile pages take more than seven seconds to load the full page. In web browsing terms, that’s an eternity.

Today’s digital consumers are savvy and impatient. 53% of them will leave a mobile site that takes more than three seconds to load, and if they leave, the majority won’t bother to come back.

As the prevalence of mobile grows, the need for speed becomes even more urgent for eCommerce merchants. On top of that, site functionality is getting more complex every day, which compounds the necessity for agility.

Here, we’ll discuss some of the most prominent reasons to focus on improving your site speed as well as some practical ways to start working on it today.

Why Site Speed Matters

Search Placement

We already touched on the impact site speed can have on your visitors, or more specifically, your ability to keep them on the page. That’s not only important for conversion rates; it’s a key metric Google weighs in search placement.

In mid-2018, the search giant announced that page speed would be a ranking factor in mobile search results (it’s been a factor in desktop search results for years). And site speed plays into another big ranking factor: bounce rate.

Bounce rate measures the proportion of visitors who exit your site after viewing only one page.         While Google hasn’t directly stated that bounce rate is part of its algorithm, it’s been widely documented by leading search experts that it has an effect on search placement.

Of course, as an eCommerce retailer, you want to achieve the highest search placement possible. Thus, it’s wise to be mindful of your site’s load time.

Revenue

Perhaps even more compelling for online retailers is the impact of search speed on revenue.

A one-second delay in page response time can result in a 7% reduction in conversions. If you’re making $100,000 per day, that tiny lag could cost you $2.5 million in sales every year. As the seconds of delay add up, the revenue loss increases exponentially.

A slow load time also impacts your customer satisfaction and retention rates. For these reasons, it makes good business sense to work on getting your site to load as fast as possible while retaining functionality.

How To Improve Your Site Speed

1) Before You Do Anything, Test

To measure your efforts, you need to have a baseline to start with. Before starting any redesign project, we run a thorough site speed test to assess the site’s starting point. You can do this with a free tool like GTmetrix or Google’s Page Speed Insights.

‍

Also, it’s important to test other sites in the same category, like your key competitors, so you can compare apples to apples when analyzing your performance. Some industries inherently call for more complex sites, while others are simpler. At the time of this post, automotive, retail and tech sites typically take the longest to load.

2) Focus On Speed From Step 1

All too often, we work with clients who haven’t given speed a thought in their previous web development efforts. It’s much more challenging to correct a slow site than to build a fast one. When designing or revamping your eCommerce site, speed should be considered as early as the design stage.

Note that for every piece of complex functionality you add, there will be an impact to site speed. That’s not to say you shouldn’t pursue complex design; yet, you should weigh its value to the user compared its costs in page load time.

3) Develop For Mobile First

Traditional practice is to develop desktop design first, mobile second. If we want to reach peak site speed performance, we must flip this way of thinking.

Instead, develop your site’s mobile design first. This way, you’re starting with a clean slate and building elements that work right out of the box on mobile rather than trying to adapt elements that were made for desktop into often-buggy mobile versions. We think you’ll be pleasantly surprised how much easier it is to adapt a mobile site for desktop than the other way around.

4) Develop On Two Themes

When implementing your design, consider developing on two versions of the theme—one non-compressed and one compressed. Compressed code can save on load time, but it’s more challenging for developers to read and make changes to in the future.

To remedy this, develop first on your non-compressed theme, then push the changes to the compressed version. It makes the design process take a bit longer up front, but can save you time and headaches down the road when making site updates.

5) Beware Of Themes With Tons Of Bells & Whistles

Be wary of picking a theme based on aesthetics alone. Many themes have far more elements than an eCommerce retailer needs, which can slow down the site with no upside whatsoever.

It’s best to build on a skeleton template and tweak it to look the way you want than to pick a theme for how it looks and try to overwrite the existing code. Approaching design this way can save on development time, too.

6) Identify Consistent Speed Issues

Most websites have anywhere from a handful to a long list of speed issues that occur on a consistent basis. Monitor these and keep a running list of action items to improve them so you can keep them top-of-mind during your development process.

Some of these issues might include minifying CSS and JavaScript, avoiding landing page redirects, deferring parsing of JavaScript, etc.

7) Beware Of Apps

Apps are awesome…until they’re not. Sometimes the cost in site speed outweighs the convenience of using certain kinds of apps.

Of specific concern are applications that use jQuery, which almost always results in a negative impact on site speed. We use JavaScript, which requires more lines of code but is faster for accessing DOM (in layman’s terms, it’s like cutting out a middleman which saves time on the user’s end).

8) Take Advantage Of AMP

AMP stands for Accelerated Mobile Pages. It’s a tool designed by Google that delivers stripped-down, ultra-fast versions of web pages that provide a better mobile experience for the user. If you’ve read articles from any major newspaper online, chances are you read it on an accelerated mobile page.

AMP works great for site pages that require minimal design elements, like blog posts and simple single product pages. It’s not great for pages with more complex elements, like smart opt-in forms or dynamic image switching. Your best bet is to learn more about AMP so you can decide if and where it’s appropriate to implement on your site.

9) Test, Test, And Test Some More

We conduct site speed tests throughout the development process to stay ahead of potential issues. This is better than waiting to test site speed at the end of development, as it allows you to correct problems as they arise and saves time in the long run.

If you’re working on improving an existing site, change one thing at a time and test the results. This will allow you to get an accurate assessment of the impact each change makes before you move on to trying something else.

For a deep analysis of how every element on your site affects its speed, create a skeleton copy of your theme and test the base site speed. Then, re-add elements one at a time and test to see which of them hinder your site’s speed the most.

Some of our most frequently used tools for testing include the Lighthouse extension (run it incognito), Pingdom, and GT Metrix.

Take The Next Step

Are you ready to find out how fast your site can be? Our team of eCommerce experts is eager to speak with you about improving your site’s speed and performance to benefit your bottom line. Contact us today for a complimentary consultation.