Improving App Performance by 200%

CLIENT INFO

AutoZone is a major player in automotive retail. It’s a huge e-commerce company operating through a complex application on mobile and web.

Industry

Automotive

Company type

Enterprise

Region

USA, Mexico, Puerto Rico, Brazil

tech INFO

We addressed performance challenges in AutoZone's React Native apps, focusing on optimizing the underperforming web app.

Technologies

React | JavaScript | Next.js | Node.js

Platforms

Web (Desktop & Mobile)

Tech Stack

Lighthouse | Bundle Analyzer | Source Map Explorer | React Dev Tools

highlight

200%

is how much we enhanced the app performance

Let's connect

Before 14.5s

After 2.5s

35k

lines of code

months of work

800

code commits

88%

decreased shimmer render time

50%

quicker load times for chats on subsequent visits

50%

faster rendering time for chats

18%

less frame junk when scrolling

before

The refresh time was 5-11 seconds

after

The refresh time was reduced to ~2 s

Instant Preview

Developers can instantly preview code changes on real devices without a complex setup.

Let's connect

CHALLENGE

When AutoZone sought our expertise, the challenge was to address performance issues with their internal React Native apps, particularly the ones for delivery drivers and B2B auto parts ordering.

As we delved into the project, our focus shifted to the AutoZone web app, already in development for two years with unsatisfactory performance. Recognizing the client's goal to improve web performance and SEO rankings on Google, we geared our efforts to help them achieve the desired results.

SOLUTIONS

CORE WEB VITALS

Working closely with the client's SEO team, we focused on Core Web Vitals metrics, including:

Time To Interactive,
Largest Contentful Paint,
First Contentful Paint,
Cumulative Layout Shift with Time To First Byte

LIGHTHOUSE MONITORING

Continuous monitoring with Lighthouse resulted in:

200% improvement in app performance,
faster loading times,
and a significant boost in SEO rankings.

Our efforts included optimizing a large shared JS bundle and leveraging tools like Bundle Analyzer and Source Map Explorer.

define

Identified confirmed/reported issues such as re-renders and created a backlog for potential improvements.

measure

Used Macro tool measurements.

ANALYZE

Selected the most promising performance changes.

IMPROVE

Implemented changes following React Native best practices.

CONTROL

Re-measured with the Marco tool and compared to the 4.58.0 native version.

Deployment

Developed the release process for both Android and iOS.

API DESIGN

Proposed an API based on the Rive Android library features.

INTEGRATION

Implemented Rive SDK integration for Android and created an example app for testing.

iOS SUPPORT

Extended the integration to iOS after successful Android testing.

AUTOMATION

Created a Github Action workflow for automated library releases.

PUBLIC RELEASE

Made the library publicly available on platforms like CocoaPods and Maven.

DEPENDENCIES

Managing dependencies, including Expo and react-native packages for each new release.

RELEASES

Automating the release process with custom GitHub Actions.

TRAINING

Providing React Native training through pair programming, code reviews, and workshops.

RESULTS

We improved web app performance by 200% and increased SEO rankings.

We achieved these results by taking the following steps:

CODE REFACTORING

Kicked off the project with refactoring the whole socket.MIGRATION Migrated the codebase to TypeScript.

MIGRATION

Migrated the codebase to TypeScript.

DEPENDENCIES

Upgraded major dependencies such as Expo, React Navigation, and React Query.

PAYMENTS

Created two options: In-app purchase with Google Play or App Store and credit card payment.

linking

Sorted out links, integrated content, and implemented html rendering.

We provided full front-end support, project configuration, feature parity, and expert advice on technical and user experience. We also implemented a new design guideline, including dark mode with auto theme detection.

RN PAPER

Forked the React Native Paper library.

Established continuous integration for automated code updates.

testing

Set up a Storybook for component testing.

design

Developed the basis of the design – color, layout, and typography.

Once we had the basics down, we started working on the UI library components. The components we developed included: AppBar, TextField. Button, Icon Button, Toast, which included animation and swipe-to-dismiss, Match Status, Search, and many more!

Apart from all the fixes and improvements, we provided metrics that should be tracked over time so the client knows exactly what to monitor and correct to maintain great performance levels long term.

16.8s

App start time, before 48.5s

8.6s

Report screen load time, before 15.9s

2.5s

Sending a message, before 14.5s

60FPS

Average FPS on LHN

2.6s

Search screen load time, before 11.8s

Together

we acted as staff augmentation within Advantys’ team.

Engaged

in collaborative problem-solving and solution exploration.

supervised

by Advantys' CTO, the project utilized GitHub, Notion, and Slack for communication.

migrating

from a custom server-side rendering (SSR) solution to Next.js

Focusing

on Core Web Vitals metrics

Optimizing

a large shared JS bundle

Introducing

Fast Refresh for accelerated development iterations

The introduction of Fast Refresh in Next.js further accelerated development iterations. All in all, it contributed to an enhanced user and developer experience.In a span of several months, our team effectively overhauled the AutoZone app's performance, which initially struggled on both desktop and mobile devices. To find out more about the whole AutoZone project, head over to the case study on main case study title.

strong

architecture with professional maintenance and continuous updates

high

code coverage with quality-compliant unit and integration tests

Comprehensive

testing, including end-to-end.

Faster

time-to-market with mobile process automation.

New PoC

features like biometrics and mobile health kit integration.

Last but not least, our collaboration significantly enhanced the knowledge of Thriva's development team regarding React and React Native.

Students new to programming and React Native
Web developers unfamiliar with device APIs and native apps
Native developers exploring web app frameworks and React Native's UX potential
React Native developers prototyping and sharing ideas
Library maintainers creating examples and documentation
Users providing reproducible cases for bug reports
Speakers and workshop presenters conducting live coding sessions

CALLSTACK APPROACH

Leading-edge technologies

Operating within the React Universe, we harness advanced solutions in React.js and React Native. This enables perpetual app refinement, ensuring your platform evolves with your needs.

Agile collaboration

From the beginning we embed ourselves within AutoZone's teams, fostering alignment and transparency. Our collaborative model involves knowledge sharing - by joining an in-house team our developers become expert colleagues who can help.

Your Success Story is Next

Let's connect

CALLSTACK APPROACH

Case studies

“Callstack played an essential role in helping us release our mobile app to the market. They helped us set up and optimise our mobile ecosystem.”

Donovan Isherwood - Engineering Manager

Thriva

get in touch

Trusted by

“The team at Callstack are the most experienced and trusted engineers in the React Native community and ecosystem.”

Nader Dabit

DevRel + XD at EigenLayer / EigenDA

at Amazon Web Services

This information will be used only to contact you. For details, check our Privacy Policy.

In brief

Leveraging tools like Lighthouse and Next.js functionalities, we significantly improved the app's performance, reducing loading times by at least 200%. The SEO improvements achieved exceeded the client's expectations, marking a successful collaboration that optimized the app for superior user and developer experiences.

Table of contents:

Heading 2

Introduction

AutoZone is a major player in automotive retail with almost seven thousand stores worldwide. It’s a huge e-commerce company operating through a complex application on mobile and web.

In a span of several months, our team effectively overhauled the AutoZone app's performance, which initially struggled on both desktop and mobile devices.

Challenge

When AutoZone sought our expertise, the challenge was to address performance issues with their internal React Native apps, particularly the ones for delivery drivers and B2B auto parts ordering.

Solutions

Working closely with the client's SEO team, we focused on Core Web Vitals metrics, including:

Time To Interactive,
Largest Contentful Paint,
First Contentful Paint,
Cumulative Layout Shift with Time To First Byte

Continuous monitoring with Lighthouse resulted in:

200% improvement in app performance,
faster loading times,
and a significant boost in SEO rankings.

Our efforts included optimizing a large shared JS bundle and leveraging tools like Bundle Analyzer and Source Map Explorer.

Results

We improved web app performance by 200% and increased SEO rankings. We achieved these results by taking the following steps:

migrating from a custom server-side rendering (SSR) solution to Next.js,
focusing on Core Web Vitals metrics,
optimizing a large shared JS bundle,
and introducing Fast Refresh for accelerated development iterations.

The introduction of Fast Refresh in Next.js further accelerated development iterations. All in all, it contributed to an enhanced user and developer experience.