How we optimised our software loading time by 5x?

How we optimised our software loading time by 5x?

Unisala was initially written in ionic react. The reason? Ionic is one stop cross platform development framework. You can develop

1. Web app
2. Android app
3. Ios app

all from one single code base. It sounded so good, why would anyone just pick ionic to build there app?

I have developed couple of application on ionic before unisala. I created e-commerce app on it before this. I never got to deploy it to real time user thus I was not exposed to the limitation of ionic app.

Discovery Phase:

We then started seeing the downside of the framework. We'd share university link or our thread page to the user and they'd come back saying hey the site is down. This was a common issue to us.

We moved on, cause we can see the site was up and running from our side.

This pattern often repeated when we send links of site to new user. As the complain increases we decided to do something, we started paying attention app's performance and user experience especially our build size, app loading times and compared it

• new user vs returning user

For Returning User:

Since the browser download the app size on the first fetch, for returning user it was not taking significant time to load the app.New users experienced long loading times

New user:

Initially, our app first build size was 6mb. We found out that to download the app for the first time user it was taking 2 mins on normal 3g internet which is our phone network.

We discovered then we optimised trying to reduce the the size, we were able to reduce it to 3mb, with simple efforts. Just trimming heavier packages out of the app. But it was still taking 1 min to download i.e 3mb app size.

When app takes more time to load, the drop rate increases, no way a user would wait 1 mins to try a new product. An ecommerce site like amazon would loose millions of dollar every second the site takes longer to load.

We then tried our best to trim all the heavier package out of the product. The best we could optimize app size was to 2.2 mb. At this point we were even discussion whether to include ionic-icons package or not, this alone was 700kb.

As we wanted our site to load in less than 5 seconds for 3g .e phone network, This clearly was not our solution.

Then we started looking for other solutions:

How can we reduce our bundle size so it loads faster?

1. Should we have a micro front-ends?
2. landing page static app with current ionic app
3. where landing page would have a static site that will load faster
4. then on the background we will download the bundle of ionic app while user is getting to know us.
5. At least the app loads fast.

So then second question, chime in.

How should the landing page be added?

1. Explored static HTML/CSS/JS landing page
2. A new micro service what is running on the server

1. Static Page:

Initially we experimented with just one single static page with html ,css , js.

we could just go to one of these sites like: colorlib

A nice site was around more than an 1 mb, which is not what we wanted.

2mb took around 40 seconds to 1 min, 1 mb would still take more than 20 sec.

2. Microfrontend:

This was something new to me as a developer,. I have worked with micro services before but on the backend, i never created/worked on project where frontend had micro service.

We started experimenting with different library and framework our top choices was Next.js.

1. Next Js
2. This is more robust framework, since we only wanted the landing page initally
3. This might be a overkill for just a landing page
4. Astro
5. A newer, lightweight static site generator
6. Astro’s focus on content as a static site builder have can sensibly scale up to performant, powerful, dynamic web applications
7. The island concept was very powerful, allows to use multiple frameworks in the same project
8. Enables partial hydration, loading JavaScript only where it's needed
9.  Significantly improve performance by reducing the amount of JavaScript sent to the client
10. This was a perfect for us.

So we experimented with both next js and astro,

1. Core Web Vitals: A report card for websites. Google uses them to check if a website is fast and easy to use.
2. Web vitals (app performance) in astro than compared to other frameworks like next.js or gatsby,
3. Astro's score: 60% of Astro websites pass the test. That's really good!
4. others tools:
5. WordPress and Gatsby: 38% pass
6. Next.js: 24% pass
7. Nuxt: 20% pass

What this means: Astro helps make websites that are faster and work better for users than most other popular tools.

we decided to stick with Astro.

3 The result:

a. Faster loading times 5X:

i. Ionic app takes about 23 seconds for new user to see the thread

ii. Astro loads in around 4seconds

So , we see almost 5X improvement in speed.

b. Seo performance 90+ score:

1. Seo is not so great as react inserts into a html dom object
2. Seo with ionic is around 80/100 by lighthouse
3. Whereas in astro it's 90+

c. All web-vitals reported by google light house has gone up.

i. Ionic web-vitals reported by lighthouse:

ii. Astro web-vitals:

d. Clean Readability:

ionic app has nav-bar, search-bar, and other mobile app looking feel, which is more cluttered while reading a single article.While astro is more clean

Conclusion:

Key Takeaways for developers:

1. Performance Matters: Fast loading times are crucial for user retention and SEO.
2. Choose the Right Tool: Sometimes, a simpler, more focused tool (like Astro) can outperform a more comprehensive framework (like Ionic) for specific use cases.
3. Measure and Optimize: Regularly check your app's performance and be willing to make changes if needed.
4. Consider Your Users: Think about both new and returning users when optimising.
5. SEO is Important: Choose technologies that support good SEO practices.
6. User Experience: A clean, fast-loading site often provides a better user experience than a feature-rich but slow one.

if you think this is helpful, let me know by upvoting or commenting.