Tithe.ly Engineering

Over the past year, we’ve worked on building the new Giving Form to be highly performant and feature-rich. You probably just rolled your eyes, thinking, “Highly performant and feature-rich? Yeah, right.” Site performance absolutely gets worse as you scale. The more features you add, the harder it is to maintain optimal site performance.

However, that doesn’t mean that we should give up features for the sake of performance. Feature-richness is an excellent thing to make your product competitive. In this post, I’ll outline the techniques we used to mitigate and optimize the common pitfalls of building a complex web app.

1. Take advantage of <script async>, <script defer>, and rel=preload

Third party packages or scripts can slow down your site via synchronous loading, font loading, or stylesheets. These resources could compete for bandwidth, which is exacerbated on mobile browsing experiences.

• <script async>: async downloads the file during HTML parsing and will pause the HTML parser and execute when the file has finished downloading.
• <script defer>: defer downloads the file during HTML parsing and will execute after the parser has completed, in the order that they appear in the document.

Generally, you can try using async for scripts independent of the page content e.g. trackers or background analytics, whereas defer should be considered when you have multiple scripts that depend on each other. DebugBear has a great article that does a deep dive into these attributes.

Tip: For fonts, ensure that you’re utilizing the font-display: swap property.

2. Prioritize what’s above the fold

Examine what critical network calls your app needs to make to render your first meaningful paint.

In the Giving Form, we have specific flows for authenticated and unauthenticated users which determine which networks calls to make. We fire off these requests the moment we have enough data from the user, to create a seamless giving experience with no unnecessary or intermediary load times.

3.Pay attention to infrastructure, especially during high-traffic times.

If your budget permits, employing multiple CDNs hosted in different regions (specifically where your most active customers are) can reduce load times. The new Giving Form is hosted on AWS Amplify, which leverages the AWS CloudFront Global Edge Network and distributes the web app globally. According to Shopify, bounce rates can go from 9% to 38% (source) in the extra seconds it takes a page to load. Even if your app has all the bells and whistles, you could potentially lose customers from poor browsing experiences or if it simply takes too long to load.

Okay, I get the picture. What can I do?

Improving site performance requires difficult trade-offs that can take away from the user experience and vice versa. Arguably, you can link site performance to financial performance. It’s tough to balance site performance and features, but I hope the steps I mentioned can help you identify areas for improvement.