Improve Your Ecommerce Site Speed With These 8 Advanced Fixes

June 28, 2022
by
Kaitlyn Ambrose

Improve Your Ecommerce Site Speed With These 8 Advanced Fixes

June 28, 2022
by
Kaitlyn Ambrose
Back to the blog
Get the latest straight to your inbox
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Share on:

To meet customer expectations around fast, highly performant ecommerce sites (load times over two seconds can hurt your conversions), you likely implement standard site speed optimization tactics. 

However, if you’re looking for speed fixes that go beyond the usual speed optimization suspects—like making image sizes smaller—you’ve landed on the right blog post.

With our network of experts at Shogun—from incredible Shopify-certified agencies to awesome multi-channel brands—we’re bringing you more advanced speed fixes. 

In this post, we explore lesser-known, in-depth ways you can improve the speed of your site outside of reducing image files and JavaScript optimization.

Let’s get started! 🏁

Page speed’s impact on ecommerce brands

As a scaling ecommerce brand, you’re all too familiar with the importance of site speed for your online store:

  • 53% of shoppers say encountering a site with slow load time makes them unlikely to return;
  • Mobile sites that load in two seconds or less have a 15% higher conversion rate than those with sluggish load times;
  • Customers who have a negative experience on a site are 62% less likely to make a future purchase with that brand, no matter how stunning your design

And aside from customers bouncing due to lag, a slow website increases your ad costs. Google notes that “landing page experience” and “expected CTR” are two Quality Score components that make up their Ad Quality standards

So not only is your store’s revenue impacted if your site’s too sluggish but so is your marketing budget and your ability to appear in paid and organic search results. In short: site speed and performance matter.

What factors affect ecommerce site speed?

To help diagnose or remedy your site speed issues, it’s helpful to know what causes an ecommerce site to be susceptible to speed issues:

  • Installing many third-party apps: Many merchants need to add several third-party apps to create the ecommerce experience they envision. But more often than not, it comes at a cost in the form of code bloat. Third-party apps usually result in major slowdowns (even for the apps that promise to improve site performance…ironically). This is especially common for merchants with custom ecommerce themes that can only withstand so many apps and workarounds.
  • Cache issues: Caching is a great technique to boost site speed but it can also cause speed issues. If your site isn’t serving cached pages, it could overload your server.
  • Hosting: Not all website hosts are created equal. Make sure your host is reliable and has ample storage for your needs.

#cta-visual-fe#<cta-title>An ecommerce experience built to be lightning-fast<cta-title>With PWA technology via Shogun Frontend, you transform your store into a blazing fast app-like experience. Learn more

8 Advanced ways to improve your site speed

Most site speed issues can be traced back to one of the above factors, but there are many reasons why your site could be facing slow load times. That’s why having a variety of site speed fixes in your back pocket is essential. 

#cta-paragraph-fe#If you’re experiencing slow load times with your non-Shopify build, check out our checklists for Magento and BigCommerce.

Let’s look at eight not-so-obvious ways you can improve your site speed.

1. Consider an open-source lazy-loaded library like Partytown

Speed issues are often found at the code level of an ecommerce site. And the scripts needed to add pixel trackers, widgets, and more to your site—as well as eye-catching visuals—weigh site performance down a lot

Here’s what happens: Third-party scripts used for said pixel trackers and widgets battle with your website’s own JavaScript code for the browser’s main thread, which causes the page slowdowns. 

Lazy-loading libraries like Partytown allow you to offload these third-party scripts to web workers, which run in background threads. 

Partytown lazy-loading library
(Image Source)

Web workers communicate asynchronously with the main browser thread, so your website’s code doesn’t have to fight for the #1 spot. In other words, third-party script processing can happen in the background and doesn’t interfere with your website’s main functions, lessening the negative impact of external scripts on site speed.

2. Shopify merchants: Assess your Liquid loops

If your store runs on Shopify, you’ll want to pay special attention to your forloop iteration—or when your system loops every product in a collection when it’s looking for a condition, like price. 

(Image Source)

For example, if a collections page on your site allows shoppers to browse by color, the code will loop through every variant (and every image) first before rendering the images tied to that color. 

This is particularly an issue for brands with large product catalogs, as looping takes time. 

To fix this and improve site performance, look for instances of Liquid forloops throughout your theme code that look for the same information (like a color) and remove duplicates. Removing duplicates should improve your site speed. 

3. Add a preconnect for faster load times 

Your site is doing the most when shoppers are shopping—like fielding DNS lookups and redirects. Because of this, your site can seem slow. 

Speeding up the time it takes for your site to establish a server connection can help tremendously. 

This is done by adding a preconnect (<link rel=”preconnect”>). Preconnects tell your browser that your store intends to connect with another origin ahead of time, which starts the server-establishing process sooner. 

Connect with your developer team to help with this, as this is done differently for different tech stacks. 

4. Lazy load your site

Lazy loading means only loading required sections of your site at a time and delaying the loading of the remaining sections until they’re needed. 

Shoppers only see the essential parts of your site (like what’s above the fold on your homepage) until they request them (like when they continue to scroll). 

The biggest advantage of lazy loading is to mitigate wasting data, processing time, and other system resources loading content your customers might never see.

Let’s say a customer clicks on a product page and instantly heads to the checkout, the product reviews, brand images, and other page assets were loaded unnecessarily. This contributes to slow site speed.

Take this good lazy load example from Bite Toothpaste Bits:

Bite Toothpaste Bits
You can see the rest of the page beginning to load as you scroll.
As you scroll, the images load fully. 

Where should you add lazy loading? Sean McGinnis, the President & Integrator at KURU Footwear, says:

“Consider lazy loading wherever it makes sense, especially in sections like product reviews that typically live well below the fold.”

As a rule of thumb, if site content is lengthy and involves several sections, lazy load can be a great thing to implement with your ecommerce web team to ensure customers perceive a highly performant experience. 

#cta-visual-fe#<cta-title>An ecommerce storefront built for speed<cta-title>Achieve unrivaled site speed with an all-in-one ecommerce platform, Shogun Frontend. Learn more

5. Maintain clear and frequent communication with your entire web team 

No matter the size of your team, it’s likely there will be multiple people working on your ecommerce site at some point as your brand grows. 

So it’s critical to keep the lines of communication open. This is to not only ensure everyone is on the same page about what’s happening on the site (like updates and changes) but that no one accidentally undoes the performance work of another team member.

Duncan Fairly, co-founder of design agency Form Factory, shares:

“Fast ecommerce sites require a holistic approach to building frontend features and capabilities. If a company has separate teams handling operations and marketing, they need to maintain close contact to make sure the optimization efforts of one team aren’t undone by the additions of another.” 

Get into the habit of regularly updating your team on what changes are happening to the site, who’s responsible for sharing the updates, and when they’ll happen. 

A website update log can help your team manage this communication. In your log, include columns for:

  • Update owner (who’s doing the update)
  • Date (when the update is happening)
  • Priority (does this need to happen now or can it wait?)
  • Status (is this update complete or are there blockers?)
  • Notes (a great way to add context, share details, and keep your team on the same page) 

Whether you use Notion or Google Sheets, make sure your entire team has access to help with transparency. 

6. Consider hiring an independent site speed consultant

You’re super close to your ecommerce experience—it’s your pride and joy! But sometimes it can be hard to zoom out and see things from another lens.

This is where you can hire external expert help, like independent website speed and performance consultant Erwin Hofman

Erwin offers services like: 

  • A quick page scan/consult
  • A pagespeed audit
  • Pagespeed training

Erwin also has an ecommerce ROI calculator that allows you to test your site performance and see not only if your site is passing the Core Web Vital standards, but how much money you’re potentially missing per month due to site speed issues.

Erwin Hofman pagespeed expert
Erwin Hofman pagespeed expert
(Image Source)

An outside perspective can help you see your site issues in a new way and figure out the best way to move forward. 

7. Be cognizant of the third-party apps you add for functionality

Apps are a powerful way to customize the ecommerce experience—but they come with a hefty price. Code bloat occurs when excessive code is placed throughout your site, causing it to become sluggish. 

Even the apps that promise to improve your site speed can cause an effect opposite of the intent.

Duncan of Form Factory says that more often than not, the main culprit behind performance issues on an ecommerce site is third-party apps:

“In our experience, the performance degradation almost always comes when companies add important third-party apps to their site. Add too many of these tools without careful consideration and it’s easy to bog down your performance delivered by your frontend framework.”

The average Shopify store has six third-party apps installed, but some brands outgrowing their themes in a maturity curve, like PlayBetter.com, have upwards of 30.

So how do you fix this?

Audit your third-party apps for the essentials and remove the ones that you no longer use. Make sure if you remove an app, all the code is removed with it. Sometimes code likes to linger!

8. Leverage the benefits of PWA technology via an all-in-one Frontend Platform 

Sometimes, all the speed fixes you can try can only get your ecommerce experience so far. Optimizing essential third-party apps and rich imagery help…but to an extent. There are diminishing returns to manual, minor fixes.

When you’ve hit a wall with common speed fixes, this is when you can start considering transformations of your site with the underlying site architecture or technology it runs on.

Progressive web apps (PWAs), for example, are websites served over HTTPS (in a browser). But unlike traditional websites, they don’t reload completely after each click. Rather, they swap out the sections of the page that need to change—they’re surgical about it—making the clicks between pages feel instant. 

Many scaling brands are turning to PWAs to achieve unrivaled site speed via all-in-one Frontend Platforms like Shogun Frontend. Shogun Frontend allows growing brands to achieve the benefits of headless commerce (speed and total storefront control) via PWA technology. This without the cost, complexity, and multiple vendors typically associated with having to assemble your own headless tech stack and many components.

For example, prestige skincare brand, TULA Skincare, boosted their site speed by 35% after launching their Shogun Frontend-powered ecommerce site. It outputs as a PWA and is blazing fast—spurring conversions.

All-in-one frontend platforms like Shogun Frontend help thriving brands future-proof their ecommerce experience with flexibility, and the best technology available.

Remember: speed solutions aren’t one-and-done—it’s a continuous optimization

Optimizing your site for speed requires frequent site testing and action. As your site evolves, so will your needs for improving performance.

What works for your site at one stage of your brand’s growth might not work at the next.

And that’s when you might consider moving beyond advanced fixes for speed tweaks, and into the underlying technology powering your customer experience.

#cta-visual-fe#<cta-title>An ecommerce storefront built for speed<cta-title>Achieve unrivaled site speed with an all-in-one ecommerce platform, Shogun Frontend. Learn more

Kaitlyn Ambrose

Kaitlyn works on all things content at Shogun. ⚡