Saving Time and Money with Gzipping

Application performance is critical to user experience and a slow site can increase costs, but many developers fail to address the slower loading speeds that can affect an application once it is deployed. While an application might be performant when tested locally, once it is deployed to a remote server the time to load resources is increased dramatically due to the slower connection speed.

This article focuses primarily on loading performance, and download speed improvements that can be made for non-local environments. In particular, we will examine how gzipping can save on loading time, and how that translates into money savings as well.

What is ‘Loading’?

Typically, when someone refers to ‘load time’ they are likely talking about 3 metrics:

1. First Contentful Paint (FCP), the time to render the first piece of content in the viewport.
2. Largest Contentful Paint (LCP), the time to render the largest image or text block visible in the viewport to the user (this may be an image or block of content).
3. Time Till Interactive (TTI), the time the user must wait until they can interact using user input devices with the content on the page.

These three metrics are critical for users. If a page has not yet displayed anything, then the user is blocked from making any input. If the majority of the content is not painted to the screen, the user may not be able to make meaningful input even though the page may be interactive. Users have limited attention spans, and excessive load times can cause them to abandon a page. Google developers have laid out a decent case for ‘best practice’ timings, which can be found here.

Below are some graphs from Web.dev that present goal posts for performance.

Fig 1

Fig 2

Fig 3

Figures 1,2, and 3 represent FCP, TTI, and LCP respectively.

Now that you can see what a good loading time is, lets extract some data from the diagrams above.

How Do Loading Times Directly Impact the Bottom Line?

If we take these Google metrics at their word, then we should be aiming to get our page load times down to a 1.8 second FCP and a 2.5 second LCP. Ideally, we want to do that and save money at the same time.

To show how impactful saving time on each page load is, let’s calculate the value of a second on a hypothetical project.

Let us assume there are 50 members on a project and on average they have 50 page loads a day. For simplicity we have based all calculations on 238 working days per year. Using these numbers, we can extrapolate the impact of even small changes in page load time.

If we can save just one second for our team while they interact with the application that comes out to around 166 working hours over the year.

In a situation where the cost of work is $100 per hour this is $16,600 lost annually to one second of waiting. This only accounts for the hours of those working on the project. The true cost could be higher as slow application speed impacts the experience of end users.

Where Is This Time Lost?

Slow load times impact an application throughout its development lifecycle. Human testing on hosted environments (the loss calculated above), User Acceptance Testing (UAT), and even automated end to end tests all take longer than they should. The problem persists when an application is deployed and users experience slow performance in the field.

This problem of slow page loading often becomes worse as a site grows. Websites can balloon with assets, libraries, and features that increase the time needed for individual page loads. It can resemble the parable of the frog that is boiled in slowly warming water.

What is Gzipping?

Gzipping is a process by which files are zipped on the server and served to users using browsers that can accept zipped files. This gzipping process can drastically reduce the size of files served over the network.

What Do the Benefits of Gzipping Look Like?

Here is an example of gzipping in the wild and the performance improvements it provides:

Fig 4 & 5

The network download speed of the measuring computer was 60Mb/s. There was a 5.98 second difference before and after gzipping for the FCP, and 10.95 second difference saved on time to finish downloading all the page content. This result also required code splitting which is a separate change that was required to enable gzipping as per AWS’s 10MB singe file gzip limit. This is why the gzipped code also requests fewer total resources.

This loading time could have been costing around $99,251/year (using the same equation from above). The improvements provided by gzipping can have a material impact on an organization’s bottom line.

How to Save Time Gzipping

Implementation steps will vary based on your project and client, but it is not necessarily difficult. On AWS, for example, it’s just 3 steps.

In addition to these steps, you may need to invalidate the cache on CloudFront to see results of enabling gzipping with AWS. This task takes a relatively minimal amount of time to complete by a cloud services team member. It only involves a checkbox and clicking through a few pages.

Once gzipping is enabled on your host you will notice in the network tab of your browsers developer tools will display a different number of bytes for transferred and resources

Fig 6

Loading Impact and Savings

FCP, LCP, and TTI are the core metrics that represent load times. Poor scores in these areas negatively impact user experience and can affect the bottom line. By meeting recommended benchmarks, we can avoid user abandonment and save on development costs. Introducing gzipping is one of the most significant and quick ways to reduce file sizes and improve network transfer speed. Reducing loading times by leveraging gzipping can enhance perceived application performance and user satisfaction while eliminating the costs of wasted developer time.

More recommendations for better performance

Gzipping is one of the quickest ways to improve your application’s performance, but it is not the only one. By setting a ‘performance budget’ early in a project lifecycle and ensuring developers are aware of code splitting and modules, teams can create an culture that prioritizes loading speeds. The greatest gains from gzipping occur when it is enabled on deployment servers as early as possible, so a proactive plan to implement performance improvements is critical. These practices might be all you need, but if you must go faster review the advice given by https://web.dev/fast/.