Improve your web application load time

Does your web application take ages to load? In our fast-paced digital world, speed and efficiency are imperative. Thus, 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. This is 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 reduced 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.

Compression can be enabled in many ways. In the next few paragraphs, we will examine some of the most common methods for enabling response compression on the web and discuss their advantages and drawbacks.

Compression at the 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.

This approach allows developers to create in-depth configurations for the MIME types that should be compressed, the minimum size of files, route-specific configurations, and extra configurations. However, 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.

The 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 gives you more control over security, allowing mitigation of 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.

The disadvantages

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

Compression through Web Server Configuration

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

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 server’s responses. This approach is very flexible and configurable depending on the web server engine and doesn’t require any additional changes at the application layer.

The advantages

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

The 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, such as Azure CDN, Amazon CloudFront, or Cloudflare CDN, support data compression and offer granular configurations for different file types and compression levels.

This method significantly improves the load time and reduces the bandwidth consumption, but its configuration needs special attention 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 reducing the size of the responses will diminish the costs.
• Predefined Configurations: many file formats are already compressed out of the box by some CDNs, which will reduce the number 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.

I included this method in this list 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 reviewed some of the most common methods for enabling response compression. These methods allow you to unleash your web application’s full-speed potential, reduce bandwidth usage, and improve its load time. As you probably noticed, most of these methods offer flexibility over your infrastructure and architecture while 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 to be notified about my future articles, and don’t hesitate to share it with someone who 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.