60% Uplift in .NET & React Performance & 50% Reduction in Infrastructure Cost

How we uplifted our .NET APIs & React application performance by 60% and reduced the cost of our application by around 50%. This is a full guide on our journey for performance improvement and cost reduction.

Background

When we released the first version of our platform, we had terrible performance in terms of request/response and page load. Specially that we didn’t have a large user base, and our applications would go cold from time to time, although we had ‘Always On’ enabled. This is the full story of what we did and areas we investigated to optimise the performance and cost of our ecosystem by 60 and 50% respectively. There were a few suspicious areas we investigated with no luck, and eventually we applied a few major and minor changes to get where we are today.

Where we optimised?

The optimisations we applied were across the board, from UI, to API and more importantly Infrastructure. We moved our entire infrastructure and it was a gamble that paid off handsomely in terms of the performance of our backend APIs, and the entire application responsiveness and user experience. It also decrease the cost of our infrastructure by a large sum which is always positive.

Now I am going to cover what changes we made in each layer, as well as the initiatives we tried that didn’t have any impact on the overall performance.

This was our initial architecture before we applied the performance improvements. Later on, I will cover our current architecture, along with our new performance and cost optimised infrastructure.

Entity Framework

The first suspect was Entity Framework, considering the history it has for performance issues. We applied the below improvement and it helped, however EF was not a major contributor to our performance issues, thanks to all the enhancements gone to it for a few years now.

EnableServiceProviderCaching

This option enables the caching of internal service providers and should only be used in testing scenarios. Disabling this would have considerable negative impact in production.

To read more on our EF implementation, refer to Database with Entity Framework (Code-first).

React

There are a few areas that will help you with performance improvements in React, however the main ones for us were the following.

A — Lazy Load vs Import

When a user types https://your-domain.com, you fetch a set of React packages for that request. If you have imported all your components directly in each page, the package will be too big for the client to process. Hence it’s best if you fetch these packages as you need them using lazy loading, so simply instead of importing your components, you just lazy load whenever you need them:

const PerformanceUplift = lazy(() => import('./screens/Content/Blog/Posts/Infrastructure/PerformanceUplift'));

And then use that component the same way you do in the import, at the top of your pages.

B — Optimise Imports to React Components

B1 — Size Matters: Whenever you import a library, a package or a component into your React screens, you are basically including them in the final bundle. So the more libraries you have the heavier the final bundle is. That would impact your build time, as well as your end user experience as they browse through your website. To know how heavy each package is, you can use a VS Code extension called Import Cost:

And then it will tell you how big each import is:

B2 — Unused Imports: You should also delete any unused imports to your components:

B3 — Import What You Need: Often times you don’t need to import the whole library into you components, and you just need a small method in there. Hence it’s best to be specific, and only import what you need. For example, below in the first line, I have made a mistake to include the whole momentjs library into my component, but in the second line I have been more specific and I am pulling in only what I need:

C: Fetch Static Assets from CDN

As you have seen above, it matters what you import into your components. One of the assets that could make your packages super heavy is the images you include in your pages. Try to push those images to CDN, and only reference them by a URL. This has a few benefits:

• Bundles will load faster on the user-browser as they are lighter
• Faster deploy time as it takes less time to build your bundles
• Faster page load time as the images are being loaded from an external source, and user won’t even notice they are being loaded down the page

D — Redux

In our case, Redux was NOT a contributor to our performance problems. To see how we have configured Redux, refer to Redux in Plain English.

Asp.NET Caching & Compression

Caching React bundles really helped us with our page load time problems. We are using Asp.NET as our Web Server to serve React packages to browser, and caching those bundles was a major contributor:

For more information on how we have set up our web server with Asp.NET to serve React bundles, refer to here.

You could also configure response caching for Api calls at the endpoint level:

Infrastructure: Move to Kubernetes

When it came down to improving the performance for backend API calls, infrastructure overhaul should take all the credit. The performance of our API calls improved by 60% by using Docker containers and kubernetes supported by Ingress Routes and Azure DNS. The below image outlines our infrastructure and architecture after we moved to Kubernetes. To learn more about how we did it, have a look at Kubernetes with Asp.NET and React and Azure DevOps.

Pellerex: Infrastructure Foundation for Your Next Enterprise Software

How are you building your current software today? Build everything from scratch or use a foundation to save on development time, budget and resources? For an enterprise software MVP, which might take 8–12 months with a small team, you might indeed spend 6 months on your foundation. Things like Identity, Payment, Infrastructure, DevOps, etc. they all take time, while contributing not much to your actual product. These features are needed, but they are not your differentiators.

Pellerex does just that. It provides a foundation that save you a lot development time and effort at a fraction of the cost. It gives you source-included Identity, Payment, Infrastructure, and DevOps to build Web, Api and Mobile apps all-integrated and ready-to-go on day 1.

Check out Pellerex and talk to our team today to start building your next enterprise software fast.