Expert Q&A: Performance-Focused Integration Management For Ecommerce

Integrations with the ecommerce tools used to run your store are vital. But, with the increased ease of adding them to a website with just one click comes risk.

The tradeoff with click-to-install apps or plugins is that you get short-term functionality but are often left with code bloat and performance issues in the long run due to the extra code.

Adding one-click install apps to your site without a strategy on a whim means accidentally putting your site performance at risk, which can impact your conversions and search rankings.

Additionally, as brands choose to go headless for ultimate control and flexibility—many often realize the way they’ve managed integrations ad hoc is not necessarily strategic or easy to maintain.

So how can you improve integration management for your store? We explored the issue with agencies well-versed in taking clients headless.

We sat down with two Certified Shogun Agencies: Trellis Commerce and PeakActivity to learn more about how each approaches integration management with clients.

We heard from ecommerce experts Christy Megalo, the Director of Frontend Engineering at Trellis Commerce, Loan Laux, the Director of Headless Ecommerce at Trellis, and Dominic Gozza, Principal Technical Architect at PeakActivity.

Here’s our conversation edited below for brevity and clarity:

Q: What is the status quo of integration management today? What are merchants currently doing?

DG: In Shopify or BigCommerce, it’s pretty easy to add and manage a new app in one place.

From your dashboard, you can flip between the 10 or 12 different apps you might have added to your site.

For other integrations that don’t offer a direct way to manage via your dashboard—you manage these differently.

But managing integrations like this is kind of a risk because anyone with access to your account can go into any app and make changes. Without the proper documentation and reasoning for adding the app, you risk making unwanted changes.

A big reason why [ecommerce operators] might be seeing issues as they scale is they aren’t planning properly. For Shopify, BigCommerce, and other ecommerce platforms users, anyone with access to their brand’s platform can access a plugin, which can be dangerous.

For example, someone can add a plugin that adds more complexity and slows your site down, which can impact conversions.

The implications are endless.

Q: What are the most common integrations used by ecommerce brands?

DG: I see AfterPay time and time again or something similar to AfterPay.

Then you have standard business functions integrations like Klayvio or MailChimp—for enabling your marketing team.

What I would like to see more of is testing and telemetry. I think that’s really important, especially as you’re going headless, to understand what your website’s doing and how it’s affecting customers.

It’s always been an afterthought for a lot of brands, so it’s one thing I’d like to see more.

LL: Yeah, was going to say buy now pay later (BNPL).

It’s definitely the hottest integration right now and a side effect of COVID. It doesn’t matter which one; there are so many out there.

Another one at the checkout level is Apple Pay or Google Pay. It used to be a gimmick, but nowadays, you have to have it.

Q: How do integrations impact site performance?

DG: This question always bothers me a little bit because in some cases, with integrations on SaaS platforms, they can be modified to be more performant.

But, because it’s so easy to just install one-click apps, people do just that and run with it.

This goes back to the issue of not planning properly; no documentation is read to understand what you can do to make the app more performant after you install it onto your site.

A lot of the time, brands will grab JavaScript snippets from, say, Klaviyo, for example, and drop those throughout the website. They don’t realize that’s pretty dangerous and can impact CRO, SEO, and site speed.

CM: Yes, whenever you throw those JavaScript scripts onto your site without a strategy, usually those things tend to show up in the render-blocking resources list and the unused JavaScript list, which tanks your site performance.

Loan Laux (LL): The thing is if you have control over the way these integrations work— which you do when your site is headless—you can load them asynchronously, for example, depending on whether the integration is vital to your site or not.

For apps that aren’t vital to the [baseline] functionality of your site, like analytics, that can load maybe half a second after your page has loaded.

Loading non-vital apps async can fix a lot of your performance issues.

Q: Why does integration management become a problem as brands scale past 5M GMV?

Christy Megalo (CM): From my experience, I see that as companies get larger, they get a larger management structure.

And a lot of times, those people get really excited about a new integration.

They basically create an internal task to add it. And then, once it’s added, they’re not the ones necessarily doing the work.

And so there’s never a plan to audit that integration, see if it was implemented in the best way, or if it is impacting site performance.

Things like that.

Q: How does your agency tackle integration issues with clients? Do you have a process when approaching a new build?

DG: My process doesn’t change whether it’s headless or not. It’s usually a discovery that leads into an understanding of what the website is and what the brand’s goals are.

Then, we’ll go over the integrations and other components during the planning phase with my team, which will lead us to implementation.

For example, we’ll audit a brand’s integrations—like, “OK, you have Klayvio and MailChimp. Let’s look at why you have both at the business level.”

Then, we’ll build a change management document, which would be our integration plan essentially.

A few big things about the integration management piece is understanding that many brands have several apps that solve the same problem.

We look at ways to reduce and remove duplicates.

A lot of companies are coming to us—especially with the way the market is—and looking at the total cost of ownership over time and how to reduce costs.

So, we’ll look at different paths for implementation.

Sometimes we’ll do a direct implementation. Sometimes we’ll add things like React and Vue and Angular into Shopify Liquid or BigCommerce Stencil and gain a bit more control over integrations that way, but it’s still a bit limiting.

CM: Yeah, we do something similar at Trellis.

We run technical and performance audits where we look for those duplicate scripts, see if the integration is providing the business value they’re looking for and if there’s a better way to incorporate the integration into their existing experience.

It all comes down to having that strategy.

#cta-visual-fe#<cta-title>Simplify your approach to a headless frontend and integrations<cta-title>Learn more about Shogun Frontend.Learn more

Q: What do you recommend from an integrations lens when approaching a headless build?

LL: I would say it depends on the kind of headless we’re talking about, first.

There’s a wide array of options [with headless]. Shogun Frontend is one of them, which is for mid-sized brands.

For larger brands looking to take a bespoke approach, there’s a lot you can do. But that can be complicated in terms of management.

[To do this successfully], you need good software engineers who know what they’re doing and who are aware of the performance impacts of integrations.

Using a tool like Shogun Frontend, on the other hand, simplifies integration management quite a bit.

For brands getting into headless who don’t want to worry about integration performance, a tool like Shogun Frontend simplifies that side of things.

DG: There’s one thing I want to add to that, which goes back to us talking about how merchants manage their integrations and how you can log into Shopify and manage your apps from there.

One thing that’s different when going headless is your integrations don’t have one “home” for you to navigate between the different apps and manage settings.

One thing we see a lot with our clients who have been running in an API-first manner—and are doing $5M in GMV with a team of 20—have, like, 12 logins for each integration.

So they have to remember 12 passwords and log into each of these apps to make changes, which is difficult.

It’s something to think about when going headless; you want to reduce the amount of stress on your business by eliminating duplication.

#cta-visual-fe#<cta-title>Simplify your approach to ecommerce integrations<cta-title>Learn more about Shogun Frontend.Learn more

Q: What should merchants considering a headless build know about integrations? Is there anything specific they’d need to sort out before?

DG: For me, it all starts with the business goals.

At Peak Activity, we really want to understand what the brand wants to get out of their website move.

A lot of times, brands will come to us, and they’ll have a pretty great website already, but they might not know how to A/B test it and turn those insights into action.

We always ask, “What are your biggest goals?” which might be “get rid of their dependency management or integration management nightmares they’re currently facing.

In my experience, a lot of brands see issues driven by business KPIs and understanding how those will lead to their ideal outcome.

For example, why are they going headless? What benefits are they really seeking?

Q: What advice do you have for rapidly scaling brands looking to streamline their integrations as they go headless?

LL: If they want to get ready for wartime, then my advice is to build a middleware for your headless API.

But you typically wouldn’t see companies with the need for centralized middleware who are running on Shopify, but for argument’s sake, why not?

This would give you one API to tap into from your storefront.

All your integrations will be managed either within the middleware or in your ecommerce platform, so you have a centralized place to manage your integrations.

To me, that’s the cleanest way to handle integrations, but it’s not always the most cost-effective.

DG: With integrations for a headless site, I would focus on the actual software development lifecycle and getting PR reviews done properly.

Allocating the proper time to those things is essential. Sometimes we’ll have engineers from other teams look at my team’s work just as a fresh set of eyes.

Cross-functional review is key.

LL: That’s a great point. I want to add to that.

Something I say to most retailers who want to go headless is that the moment they do go headless [the traditional way], they become a tech company.

They’re not a retailer anymore, and they have to think of themselves as such. It’s a huge mindset shift.

99% of retailers are not built to be tech companies, and that will require a lot of effort for them to get this right.

Even if they’re going through an agency or if they’re outsourcing this, they’ll need a CTO, and they’ll need to shift how they think about their company.

That’s where you see retailers fail with their headless strategies—when they are not thinking ahead enough.

Many think, “Okay, we’re working with an agency, let’s get them to build the site, and we’ll trust them with everything.”

Coming from an agency myself, that would seem like a silly thing to say, but taking a site headless requires involvement from the client.

It requires the client to be tech-savvy enough; you can’t just let your agency do absolutely everything and expect complete success.

DG: I want to add to that quickly.

Loan, that’s the most beautiful thing ever said, and it’s so important to understand. I think that merchants need to understand the level of complexity that goes into moving to headless as opposed to a SaaS platform where you’re in a structured environment.

Now, maybe that structured environment isn’t so great for you because you’re scaling so fast.

But [as a consequence) now you need to think about becoming more of a tech-first company.

Brands really need to double down on the tech if moving into the headless space because, outside of integrations, there’s so much to consider, like security and compliance.

As a result, sometimes we’ll see clients come to us who are just not ready for a solution like headless, or they haven’t planned properly.

It’s imperative to understand the implications of a move to headless tech.

That’s where a solution like Shogun Frontend comes in as an opportunity to become headless without a lot of risk. Shogun Frontend is more managed and there are fewer risks with integration management because everything you need is bundled together.

#cta-visual-fe#<cta-title>Skip becoming a tech company. Take a unified, bundled approach to going headless<cta-title>See how Shogun Frontend helps you focus on the customer experience instead of infrastructure.Learn more

Q: How does an all-in-one Frontend Platform like Shogun Frontend and progressive web apps (PWAs) help with integration management?

LL: The main thing is you get control over how things are integrated.

That’s really the name of the game with headless is complete control. From a performance perspective, with Shopify, you see the performance impact of integrations, but there’s little you can do about them because of platform limits.

With Shogun Frontend, if you see a performance issue, you have the opportunity to do something about it because you have that platform flexibility headless offers.

DG: Well said. One thing I’ll add is that when I think about implementing a new integration, you can chalk it up to two main pieces:

One is building the integration, and the other is implementing the integration.

First, you have to build the connection and declare the endpoints you want to hit and what data you want to send to it.

Then, you have to write the code in the React application against the proper lifecycle methods of React and implement it, which is where things can go wrong.

What Shogun Frontend does for us is build the integration with the third-party service we want to use. Not only that, but we know it’ll be built in the proper manner.

Then, Shogun will give us the implementation guidelines on the best way to do it. This makes it much easier.

Nothing is left to interpretation, which helps us [as an agency] move faster.

If we’re working with a fast-moving brand that needs to keep moving fast with performance benefits, things can move much faster with Shogun Frontend’s pre-built integrations and codeless updates.

#cta-visual-fe#<cta-title>See how Shogun Frontend is changing the way brands go headless<cta-title>Taking a radically different approach to going headless can help you avoid becoming a tech brand.Learn more