App Performance: How the Wiser Team is Keeping Stores Fast

Store performance is serious business: it’s a well-known fact thatslow stores lead to lower conversion rates, so if your app slows down a merchant’s store, there’s a good chance you’re hurting their bottom line—and, in turn, your own. That’s why we emphasize minimal effects on store performance as part of ourrequirementsto be listed inthe Shopify App Store.

But what happens if your app is slowing down a merchant’s store? How do you address the issue?

We sat down with Amit Porwal, creator of personalized product recommendations appWiser, to discuss just that topic. Earlier this year, Wiser was demoted in the app store for contributing to a merchant’s slow load times. When they got the news, Porwal’s team sprang into action, optimizing Wiser and ultimately making it one of the fastest product recommendation apps out there.

In this article, Porwal shares the methodologies, tools, and techniques his team followed to make Wiser so speedy.

What are the app performance requirements?

在我们深入了解如何去做, let’s talk about the why. We’ve already touched on the importance of load times for merchants: a site speed improvement of one secondcan increase mobile conversions by up to 27 percent. It’s important that developers keep performance top of mind, especially since apps have a tendency to slow stores down significantly.

That’s why Shopify has minimum requirements for app speed. In order to be published in the Shopify App Store, your app must not reduceLighthousescores on a store by more than 10 percent. If it does, your app could be rejected from the app store, or pushed down in app rankings.

Thankfully, slow apps are fixable. By following the process Porwal and his team followed, you can test your app speed, make optimizations, and keep your app fast. Here’s how they did it.

1. Figure out where you stand

To speed their app up in the most effective way, the team started by establishing a baseline of performance. It was important for them to understand where they stood, so they could figure out the most effective optimizations.

To start, they installed a fresh theme on theirdevelopment store, tested the theme’s performance, and then retested with their app installed to determine the difference. To make sure they had an accurate baseline established, they ran this test a few times.

“Whenever you test with Lighthouse, it gives you a different score,” Porwal explains. “So we averaged out over three tests to find our app’s average performance.”

Once they had an average set, they were ready to start making optimizations, starting with API calls.

2. Cut down on API calls

Wiser is a product recommendation app, which means it made a lot of API calls: hitting the Product API, finding the collection, finding the product, and pulling the price. It made for a long process, and it was the biggest factor impacting the app’s speed.

To fix this problem while still keeping their app functional, the team came up with a solution. Instead of calling the API again and again, they instead reworked their app to add Liquid code to the store’s theme, which fetched all the data they needed from the user’s store itself. This allowed them to get the data they needed for the recommendations, while avoiding the API and loading the store quickly. This method meant they could cut down on six API calls.

"Cutting down on API calls would account for 40 percent of the improvement in app speed. But they weren’t done yet."

Once they implemented the change, the team retested their app (always averaging out their results).

“每当我们做任何改变,我们在incogn重新测试ito mode. On your normal browser, you use plugins and add-ons that affect Lighthouse, which is why you should always use incognito orGoogle PageSpeed Insights, which is independent,” Porwal explains.

In the end, cutting down on API calls would account for 40 percent of the improvement in app speed. But they weren’t done yet.

You might also like:User Testing Your Shopify App: Public App Use Cases You Should Test.

3. Clean up your code

After API calls, the most important thing you can do to improve your app performance is to tidy up your code. When it comes to app performance, small things add up quickly.

For Porwal’s team, the small thing that had a big impact was font files. Instead of images, the team was using fonts for icons like arrows. That meant loading a lot of unnecessary CSS.

“We removed it and coded the icons into our own code,” Porwal explains. “Instead of fetching hundreds of lines of code for some small icons, we could instead use a couple lines of code.”

Other small changes also had a big impact. These included removing unused JavaScript, compressing what they did use, merging CSS files, and reducing their file count.

“When you test your app in PageSpeed Insights, it gives you all the information about what’s affecting your speed, and how to optimize,” Porwal says. “Pay attention to JavaScript execution time especially, because the tool tests this very well. For us, this was a big factor because we had a slider that called multiple files. We merged them into one file, so only one call to the server. It fixed the slider and kept the app fast.”

These changes all added up: combined with reducing their API calls, their app was almost there. But there was one more step the team took.

You might also like:Implementing API Rate Limits in Your App.

4. Update your server cache policy

Lighthouse will flag any static resources that aren’t cached, and it can demote your score if your cache policies aren’t set.

“Set a proper cache policy for your CSS and JS files,” Porwal says. “You cannot do it into the files, you need to do it into the server.”

"Set your cache policy, and your Lighthouse score will thank you."

The Lighthouse tool will give you an estimate of how much data users will save if you cached the resource in question, and the difference can be big. Set your cache policy, and your Lighthouse score will thank you.

The results

By starting with the biggest factors limiting their app performance and working their way down, the Wiser team was able to bring up their Lighthouse score. This significantly improved the speed of their app, reducing the impact on merchant stores and making sure their users didn’t miss out on sales from slow-loading stores.

Now we can say that our app is one of the fastest recommendations apps.

Once they were satisfied with the changes, they emailed the Shopify apps team. Once their app met all the requirements, their demotion was quickly lifted.

"Now we can say that our app is one of the fastest recommendations apps," Porwal says proudly.

You might also like:Shopify App Store Staff Picks: Everything You Need to Know.

The tools

The Wiser team’s quick actions meant their app wasn’t demoted long, and came back a faster, better-performing app. To move so quickly, they relied on a series of tools to optimize their work:

• Google PageSpeed Insights: “It is a very complex tool and will help you because it’s very strict,” Porwal says, “but if you follow their guidelines it’s easy to optimize your app.”
• Minified.js: To compress JavaScript.
• Amazon Web Services (AWS): “Use a better server. Don’t use shared hosting,” Porwal recommends. “We use an AWS server for our app andAmazon CloudFrontfor files.”
• And of course,Lighthouse: To be listed as a public app in the Shopify App Store, your appmust not reduce Lighthouse performance scores by more than 10 percent.

Keep merchant stores fast

By prioritizing performance from the very start, you’ll avoid facing penalties or having unhappy users because of a slow app. Taking the time to consider the impact your app has on load times, and optimizing it to move faster, means a better experience for your users, their buyers, and ultimately, your app’s reputation.