5 Ways to Speed Boost Your Shopify Store, and Increase Sales by 7% - Guest Blog from Devscale

Wednesday, November 4, 2020Eric Zegarski

5 Ways to Speed Boost Your Shopify Store, and Increase Sales by 7% - Guest Blog from Devscale

“I want it all, and I want it now” - Freddie Mercury

The quote from the famous Queen song embodies the spirit of the times. We all want everything on demand. The same thing goes for your eCommerce clients.

Put simply: they want your site to load now. Immediately. Without pause. 

Failing to meet that demand leads to a loss in revenue because you risk losing customers because of this quite solvable issue. 

Here’s a quick number to back up that claim: 37% of visitors will click away from your website if the loading time exceeds five seconds. 

If you don’t want to lose out on major sales, then make sure to follow our thorough Shopify speed optimization guide.

 

Why Is Shopify Store Speed Important?

The world of eCommerce is quite saturated, which is precisely why every move counts. Speed optimization is a great place to start :)

 

 

Here are some other numbers that will support this claim: a one-second delay will result in a 7% loss in conversions and 11% fewer page views. 

So if your store is bringing in $100K in sales, you could be losing out on $7,000 just because your website is taking 1 more second to load than it is now. 

Walmart noticed a 2% increase in conversions for every second of speed improvement -- just to give you an idea of what’s possible. 

However, money isn’t the only issue... 
 

1. Stop Using Homepage Sliders

Homepage sliders are widely present in the eCommerce world - they do look pretty, don’t they? 

However, they pose a significant issue in regards to website loading time. Tests have shown that homepage sliders cause an additional 1-2 second delay in loading time.

That’s no good. 

Research states that less than 3% of your shoppers will actually wait for the next slide. Customers often confuse sliders for promotions, which is why they stay clear of them. 

That’s also known as banner blindness - a term that describes when people subconsciously learn to ignore all content that looks like an ad.

Need proof?

The Nielsen Norman Group performed an interesting usability test, which looked at whether customers interact with sliders in any way. They discovered that sliders are generally ignored by visitors.

So why are these cumbersome bells and whistles so tempting to use?

Sliders consist of text, images, and videos, which generally account for 50-70% of your overall website’s weight. Say you add three 1920 x 1080 px slides. Your page now has to process and load three huge images at once.

Three or more high-quality slider images will go way beyond the recommended 1MB limit for the total page size.

So to sum it up - the better the image quality is, the longer it takes for the page to load. And you can’t use blurry 300px images on your sliders cause they just look bad. 

Another common issue related to sliders is their responsiveness -- or lack thereof. 

Sliders tend to glitch and break, which impacts your website’s overall quality. They’re also known to break on slightly older mobile phones.

If you’d like to include other visually-appealing alternatives, you can always feature high-quality images, collages, or a short, informative video. But be careful with videos because they can also slow down your pages if they’re too large.

2. Remove Unnecessary Apps

Shopify apps were created to make things easier and more convenient for merchants but they can harm your website’s speed. 

Let’s look at it this way…

If you install six different apps or plugins for Shopify, that means six requests are made on six different servers. Each of these requests includes a set of handshakes to exchange information -- that takes some time. 

Each of these apps can then make even more requests independently -- downloading scripts, images, files, and so on. While modern browsers were built to support these simultaneous connections, they weren’t built to do it without any wait time.

A lot of merchants simultaneously run over twenty different apps on their stores. 

But compare the value…

Will the benefits of using these apps outweigh the possible speed issues that could arise once the app is installed? 

Almost always, the answer is no.

We’re not saying that you should remove ALL apps from your store... just be pickier when it comes to selecting them.

Here’s how you can diagnose whether an app is slowing down your website:

1. Open one of the product pages in your store.
2. Locate the network tab on your browser of choice (Firefox - Ctrl + Shift + Q; Chrome - F12).
3. Refresh the webpage.
4. Once done, you will see columns with file names. Take note of the Time column.
5. Click on the column and sort all requests by time.
6. The slowest requests will be shown at the top of the page.
   
7. Go through all requests thoroughly, and match them with names of the app that you’re using in your store.
8. If you see some matches, that means that that particular app is causing a slower page loading time.
    

3. Optimize Your Product Images

Videos, sliders, and photos take much longer to load than plain text. Fortunately, there are ways to compress the size of all these cumbersome media. 

Compressing images can decrease the load time by 54.88% and decrease the page size by a staggering 80.27%. In other words, try to reduce the size of their images as much as possible, without compromising the quality.

There are two main types of image compression: lossy and lossless. 

Lossless compression decreases the image size without compromising its visual quality. You can use one of many different software solutions for lossless compression to optimize your images. 

The process is quite easy:

1. Take all product images from your website
2. Run them through a compression software
3. Download the result and replace your old image with it. 

It may take some time to optimize all product images on your website, but it will be worth your while. Just make sure to compress all future images that will be posted on your website to avoid facing the same issue all over again.
 

4. Remove Duplicate Liquid Loops

Liquid is a coding language used by a wide variety of services, including Shopify. It employs loops that instruct the code to search through a collection of data until it finds the result.

Since many Shopify stores offer thousands of products, looping each request will take longer to complete. Liquid loops have a specific ‘forloop’ instruction that processes all sets of data until it finds the target. 

The processing requirements will negatively impact your website’s speed if your store has more than one nested loops going through all your products. 

Looping large catalogs takes longer in the following cases:

• Mega-navigation implementation and advanced collection filtering
• Swatches - the code first loops through variants, then images to render the color image association
• Paginating large product collections

These duplicate loops are often hidden in plain sight and they have a negative impact on your store’s speed. 

This mistake happens when, for example, multiple coders work on a theme and they accidentally add conflicting code, or they accidentally duplicate tasks.

So reach out to code developers and perform occasional code reviews to ensure that this doesn’t happen. 

Not sure where to look? Check out Shopify’s own guide on how to review your code.
 

5. Optimize Your Code

Optimize code with the process of minification to ensure that your website runs smoothly and efficiently. 

What’s minification, exactly?

In short, minification is a process that removes any redundancies that are found within the code. These include line breaks, white spaces, block delimiters, as well as comments. This process works on HTML, JavaScript, and CSS.

Here’s how minified code looks:

See?

All unnecessary lines and breaks are gone, leaving a cleaner and easier code to work with.

Code minification can reduce the overall file sizes by 30-50%, which speeds up the page loading time.

That’s why you should clean your code as much as possible through minification. 

There are three main ways you can minify code:

• Refresh-sf.com (HTML, CSS, JS)
• Cssminifier.com (CSS and JS)
• Htmlcompressor.com (HTML, CSS, JS)

• HTMLMinifier Webpack Plugin
• CSSNano
• Plug in Speed Optimizer
• Hyperspeed​

You don’t have to have any special programming knowledge to minify code. However, as best practice, we recommend hiring experts so you don’t break any elements. Also, always keep a backup of the original code in case something goes wrong.
 

Conclusion

Improving your website’s speed will bring in a lot of benefits, namely:

• Improving customer experience by decreasing the page loading times
• Boosting sales by reducing the click-away rate
• Improving your SEO by increasing the number of pages that Google can crawl and index

The Black Friday/Cyber Monday (commonly referred to as “BFCM”) season is approaching and you should be ready to support the demand. 

Remember that we are in a pandemic where most states enforce stay-at-home orders. This is precisely why eCommerce sales are expected to boom, so start working on your Shopify store speed optimization as soon as possible and get those sales! 

Luckily, optimizing your Shopify store’s speed is easy if you follow our tips above, but if you need some help, give Devscale a shout and we’ll be able to jump right in. 

Have fun selling!

 

---

 

ABOUT Devscale

We take care of your Shopify store, so you can focus on getting customers :)

We are long-term technology partners for businesses who focus on ecommerce and software tools. Our team consists of product-first experts working to define, design, and develop custom Shopify / ecommerce websites. CLICK HERE to get in touch with us, and we’ll be happy to have a conversation to learn more about you. We are here to help :)

 

>>  Request a Demo
>>  Map Your Ideal Integration