Performance and Stability: Fanthem's Web Application Caching Overview

At Fanthem, we understand that one of the most important considerations in selecting an online giving platform is stability and performance. For me, as Principle Software Engineer at Fanthem, that boils down to choosing the right technology and protecting our platform from spikes in traffic that are inherent in our business model.

95% of the time our platform experiences moderate traffic that's nothing out of the ordinary - but it's the 5% we plan for and focus on. During that 5% of the time, our platform can see a 10x-20x increase in requests.

For example, our Give716 event with the Buffalo Bills Foundation and the Buffalo Sabres Foundation features matching hours and sponsored grant opportunities. Charities with qualifying donations during each matching hour can be eligible to have their donations matched, or can be selected as a grant recipient if they have a qualifying donation. With over 500 charities participating in the event, we see a large spike in traffic during these windows of opportunty while potential donors access their favorite charity's custom web page on the Give716 website to submit their donation.

With the right caching strategy, our web application handles the spike in traffic and we can confidently ensure each and every visitor who wants to donate will be able to process their transaction. Similarly, our online 50/50 raffles for the Buffalo Bills, Buffalo Sabres and Boston Bruins can see large spikes in traffic as the jackpot totals climb to new highs.

Cache saves us from doing work we've already done. A common example would be sending a copy of your resume with a job application instead of having to type out your entire work history every time you want to apply for a job. By using the version you've previously saved on your computer, you are saving yourself time and effort.

At Fanthem, we use content and file caching to improve the performance and speed of our online fundraising web application. These caching mechanisms reduce the load on our servers and decrease the time it takes for visitors to access and view our client's custom-built fundraising websites. Here are a few common caching techniques that we employ at Fanthem to ensure peak performance:

1. Content Caching

Content caching involves storing a copy of a web page's content, such as HTML, CSS, JavaScript, and images, on the user's device and on one of our servers in the cloud (we use various Content Delivery Networks - CDNs). When a user visits a website, the cached content can be retrieved and displayed quickly, without the need to fetch the data from the origin server each time.

How it works

• The first time a user accesses a webpage, our web application generates the content and sends it to the user's browser.
• The web application also saves a copy of the content for the next visitor to that page. This content is saved for a specified amount of time and is updated periodically ensuring our server has access to cached content.
• The browser stores the received content in its cache, associating it with the URL of our client's custom web application.
• On subsequent visits, if the user requests the same page, the browser checks its cache. If the cached content has not expired, the browser loads the content from the cache, avoiding the need to make a new request to the server.

Advantages

• Faster page loads for recent visitors: Since the content is stored locally, subsequent visits to the same page are much faster, resulting in a smoother user experience.
• Faster requests for new visitors: Since much of the content for the web page is cached on our servers, new users can receive a lightning fast response from one of our CDNs.
• Reduced server load: Cached content reduces the number of requests reaching the server, lowering the server's workload and resource usage.

2. File Caching

File caching is similar to content caching, but it specifically pertains to caching static files, such as images, CSS stylesheets, JavaScript files, and other media resources.

How it works

• When a user accesses a webpage, the browser downloads static files associated with the page (e.g., images, CSS, and JavaScript files).
• These static files are then stored in the browser's cache or intermediate caching servers.
• On subsequent visits to our client's web pages, the browser can load those same files from the cache instead of re-downloading them.

Advantages

• Faster rendering: By caching static files, subsequent page visits that use the same resources can render quickly since the browser doesn't need to fetch them again.
• Bandwidth savings: Since cached files do not need to be re-fetched, users on mobile devices save precious bandwidth which results in a better user experience. As much as 75% (or more) of our traffic is from mobile devices. Depending on the quality of a visitor's connection, they may or may not have access to what we consider "high speed" internet. Leveraging file caching means that event users on lower quality connections can have a high quality experience on our platform.

Overall, content and file caching greatly improve web performance by minimizing extra requests and reducing the time it takes to load our web pages. The caching described here is only one part of the Fanthem engineering team's performance optimization plan. If you would like to learn more about the Fanthem platform please contact us.