Improve Your Web Application Load Time Using 5 Traffic Compression Methods

Low-hanging fruit improvements with a significant load-time impact

Photo by Florian Steciuk on Unsplash

Does your web application take ages to load? In the fast-paced digital world of today where speed and efficiency are imperative, optimizing web content delivery has become a crucial aspect of enhancing user experience and reducing operational costs. One of the most effective strategies to achieve this optimization is through response compression, a technique that significantly reduces the size of data transmitted between servers and clients. By compressing files before they are sent over the network, web applications can ensure lower load times, improve performance on low-bandwidth connections, and offer a seamless experience to users worldwide.

What is Compression?

“Data compression, the process of reducing the amount of data needed for the storage or transmission of a given piece of information, typically by the use of encoding techniques.” ¹

In other words, compression reduces the size of data, by representing the duplicate bits more optimally.

Now, compression can be enabled in many ways, in the next paragraphs we will have a closer look at some of the most common methods to enable response compression on the web alongside their advantages and drawbacks.

1. Application Layer

Nowadays, most programming languages such as Java, C# and Python support adding response compression directly at the application level. The following code snippet enables response compression in a .Net web API using the Gzip algorithm.

builder.Services.AddResponseCompression(options =>
{
    options.EnableForHttps = true;
    options.Providers.Add<GzipCompressionProvider>();
});

app.UseResponseCompression();

This approach allows developers in-depth configurations for the MIME types that should be compressed, minimum size of files, route-specific, and extra configurations. On the other hand, these configurations can become harder to maintain as they are tightly coupled with the application code.

In this approach, we can see that the responses from the server are directly compressed.

Advantages:

• Granular Configurability, offers developers precise control over the content that gets compressed and how it is compressed, this allows optimizations for specific scenarios.
• Security Vulnerabilities Mitigations, compression at the application layer allows to have more control over security, allowing to mitigate vulnerabilities like CRIME or BREACH, by selectively compressing content or adjusting the compression strategy based on sensitivity.
• Compatibility and Content Negotiation, the application can dynamically adjust compression methods based on the client’s capabilities, ensuring maximum compatibility and efficiency, as well as serving uncompressed content to clients that do not support compression.

Disadvantages:

• Maintenance Overhead, implementing and optimizing compression strategies requires development time and expertise as well as keeping up with best practices and security vulnerabilities.

2. Web Server Configuration

Most of the web servers like Apache, Nginx, and IIS support enabling response compression out of the box. Below you will find an example of how to configure a Nginx web server to support compression.

server {
    gzip on;
    gzip_types      text/plain application/xml;
    gzip_min_length 1024;
    ...
}

Just with this configuration, we can enable Gzip compression for plain text and XML file types if their size is greater than 1Kb.

In the above diagram, we can see that the response returned from the application server isn’t compressed, but the Nginx web server will take care of this by compressing the responses from the server. This approach is very flexible and configurable depending on the web server engine and doesn’t require any additional changes at the application layer.

Advantages:

• Ease of configuration, the majority of web servers offer straightforward configurations to enable compression, without needing additional changes at the application level.

Disadvantages:

• Development and Maintenance Overhead, Developers and administrators might have less granular control over exactly how and when compression is applied compared to application-level compression.

3. Network Infrastructure Services

Services like Reverse Proxies, Load Balancers, and API Gateways can offer response compression out of the box, as well as many configurations to suit your needs while allowing full flexibility over your servers and resources.

Similar to the web server approach but with services that address different needs we can see in the above diagram that the responses received from the servers are uncompressed, and the infrastructure service will compress them before sending them to the clients.

Advantages:

• Offloading Server Tasks, handling compression at this layer reduces the CPU usage for data compression, and leaves the server to focus on processing the requests.
• Scalable Performance Optimization, easily apply and manage compression settings across multiple servers and services while keeping them consistent.

Disadvantages:

• Increased Infrastructure Load, implementing compression at the network level can increase the CPU and memory load on these services.

4. Content Delivery Network

A Content Delivery Network(CDN) represents a group of interconnected servers that are caching responses from a server in a closer geographical region for the user, by doing this the user’s experience will be significantly smoother because the content will be loaded faster as being closer to him.

The majority of CDNs like Azure CDN, Amazon CloudFront, or Cloudflare CDN have support for data compression and granular configurations for different file types and compression levels.

This method significantly improves the load time and reduces the bandwidth consumption, but needs special attention on its configuration to prevent possible quality reduction on certain media files and to avoid potential latency for dynamic content that can’t be cached and will need to be compressed on the flight before sending it to the user.

Advantages:

• Global-wise Efficiency, as CDNs are spread across the globe, will significantly reduce latency and improve load times.
• Reduce Costs, for many providers, the pricing plan is also based on the amount of transferred data, so by reducing the size of the responses, the costs will be diminished.
• Predefined Configurations, many file formats are already compressed out of the box by some CDNs, this will reduce the amount of manual configurations required.

Disadvantages:

• Caching Complexity, we’ll have to store both, the compressed and uncompressed response for the same request to be able to serve the requests for different clients and their compression support.

5. Transport Layer Security Compression

Transport Layer Security(TLS) is a security protocol mostly used for encrypting the communication channel between clients and servers. HTTPS implements the TLS protocol to provide secure connections.

Enabling compression directly at the TLS level might sound great, especially as it does not require any additional configurations or changes inside the application layer, but this method might make your application vulnerable to CRIME attacks because of a vulnerability of the protocol caused by the order of compressing and encrypting data transmitted over the connection.

The reason that made me include this method in this list was to raise a red flag if somebody is using it and is not aware of the security risks, however, in the latest version of TLS(1.3), the compression feature was completely removed due to the security implications.

Advantages:

• Isolation from the Application Layer, this approach allows using compression without any additional configurations required at the other levels.

Disadvantages:

• Potential Security Vulnerability, enabling compression at the TLS level might allow attackers to exploit the CRIME vulnerability.
• Newer versions of TLS don’t support compression anymore.

Conclusion

We went through some of the most common methods to enable response compression, which will allow you to unleash the full-speed potential of your web application, reduce bandwidth usage, and improve the load time of your app. As you probably noticed most of these methods offer flexibility over your infrastructure, and architecture, whilst still giving you an extra boost of performance.

There isn’t a best method to enable compression, the best way is the one that suits your specific needs, to find it analyze your application, identify your constraints, and choose the best approach based on the relevant metrics for you. Also, make sure to address the security implications of CRIME and BREACH attacks when working with sensitive data received from user input, and reflected in the response.

Thank you for making it this far!🙏 I hope that you found the information presented in this article valuable. Follow me if you want to be notified about my future articles, and don’t hesitate to share it with someone that you think will find this article insightful.

References:

1. Hemmendinger, D. (2024, January 12). data compression. Encyclopedia Britannica. https://www.britannica.com/technology/data-compression.