Nowadays, enhancing customer experience is paramount to driving engagement and achieving business success. One crucial aspect that significantly impacts customer satisfaction is the speed at which a website loads.
Studies have revealed that 40% of users abandon a website if it takes longer than three seconds to load, while even a mere one-second delay in page response can lead to a 7% reduction in conversions. It's clear that every second counts!
In the web's pursuit of fast loading times, we have a number of different technologies to help us. One approach is to minimize the underlying code your site will use without affecting how it functions. "Compression" algorithms are one way to achieve this, most modern web browsers understand or “accept” content encoded in one of three algorithms:
- Deflate
- Gzip
- Brotli
To learn how to speed up your website, please checkout here.
What is GZIP Compression?
GZIP, developed by Jean-loup Gailly and Mark Adler, is a widely used compression format and software application. The initial beta release was made in 1992. The first actual version, version 1.0, was released in early 1993. It was originally created as a versatile compression library and drew inspiration from the DEFLATE compression algorithm.
GZIP offers 9 levels of file compression, ranging from level 1 for smaller file savings and faster compression speed to level 10 for maximum file savings at a slower compression speed. It is commonly able to achieve compression ratios of up to 80%. It is particularly effective for compressing data like text files, JavaScript or CSS codes, and other types of HTTP content.
GZIP Compression Algorithm
GZIP is a lossless compression algorithm that builds upon the deflate algorithm, which combines LZ77 and Huffman coding techniques. As a lossless compression method, it ensures that the decompressed data remains identical to the original.
Let's dive into how GZIP works in practice:
- When a server receives a web page request, it checks the request header for GZIP compression support.
- If GZIP compression is supported, the server generates compressed markup for the page.
- GZIP converts markup into a compressed data stream for efficient delivery to end users.
- The user's browser decompresses the received stream, restoring the original markup.
In short, GZIP identifies repetitive patterns, replaces them with shorter representations, and assigns variable-length codes based on frequency.
This compression method significantly reduces file sizes, enhancing data transmission efficiency.
Comparing the Effects of Using GZIP
For example, after bundling with webpack or rollup, the resulting JavaScript file may be quite large. Although we can use `chunk` to separate the files, the overall size may still be significant. Let’s see the effect of using GZIP compression on static resources in Chrome:
Comparing the compressed sizes of three files before and after compression:
What is Brotli Compresion?
Brotli, initially developed by Google for woff2 usage and later expanded for broader applications, is an exceptionally efficient compression algorithm. It achieves compression ratios comparable to the most effective general-purpose compression methods currently available
Brotli introduces 11 compression quality levels, ranging from 1 to 11. Increasing the quality level improves the compression ratio, but it's worth noting that higher levels may affect the compression speed
Brotli has gained widespread adoption and is supported by all modern web browsers. As of now, about 97.28% of users use browsers that support Brotli.
You can examine the accept-encoding request header to check if your browser supports Brotli. When Gzip and Brotli compression algorithms are enabled at the same time, Brotli compression level has higher priority than Gzip. It looks like this:
Accept-Encoding: br,gzipBrotli Compression Algorithm
Brotli is an open source compression algorithm launched by Google, which is more efficient than the common Gzip. It compresses data through a variant of the LZ77 algorithm, Huffman encoding, and second-order text modeling, helping us to compress various file sizes in web pages more efficiently. , improve loading speed.
It uses a dictionary of common words and vocabulary in English, Spanish, Chinese, Hindi, Russian, and Arabic, combined with machine language, especially common terms in HTML and JavaScript, to compress data than gzip, bzip2, LZMA, etc. Further compression is performed on the basis of the algorithm, which reduces the capacity of the data content and makes the web page load faster.
Let's dive into how Brotli works in practice:
First, Brotli looks for repeated patterns in the data and replaces them with shorter codes. This helps to eliminate redundancy and make the file more compact.
Second, Brotli uses a method called Huffman coding. It assigns shorter codes to the most common words and longer codes to the less common ones. By doing this, Brotli can represent frequently used words with fewer bits, reducing the file size.
Another trick that Brotli employs is called context modeling. It analyzes the context or surroundings of the data to make smarter predictions. By understanding the patterns and relationships between the data, Brotli can make more accurate guesses about what comes next. This helps in compressing the file more efficiently.
Overall, Brotli's combination of advanced techniques, comprehensive static dictionary, and transformative mechanisms make it a highly effective compression algorithm. It delivers impressive compression ratios and file size reduction, outperforming other algorithms like GZIP, bzip2, and LZMA.
Brotli vs GZIP
From a usage perspective, Based on HTTP Archive data from January 2024, Brotli is actually used more than gzip for JavaScript and CSS!
Use the Paul Calvano's Tool to test the compression performance of gzip and brotli.
Brotli's Advantages Over GZIP
Brotli offers an advantage over GZIP by utilizing a dictionary, allowing it to send keys instead of full keywords. Because of this, Brotli achieves significant file size reductions compared to GZIP compression.
These improvements in file size contribute to more efficient data transmission and storage in web environments.
Reducing the number of transferred bytes not only improves page load times but also helps lower the costs associated with CDN.
GZIP's Advantages Over Brotli
While Brotli offers impressive compression capabilities, GZIP still possesses certain advantages in specific scenarios. Here are a few advantages of GZIP over Brotli:
- Compatibility: GZIP has been widely used since the 1990s and is supported by virtually all browsers and web servers. It has become a standard compression format, ensuring widespread compatibility across various platforms.
- Established Ecosystem: GZIP has a well-established ecosystem with abundant tools and libraries available for implementation. Its long-standing presence in the industry makes integrating and working within different software environments easier.
- Compression Speed: GZIP generally has faster compression speeds compared to Brotli. It can quickly compress files, making it suitable for scenarios where speed is a priority.
- Lower Server Load: EdgeOne's Smart Compression is performed at their edge network, not on your origin server. This means that the compression is done on EdgeOne's servers, not yours. Therefore, using Brotli compression through EdgeOne does not use up your server's resources. This is one of the advantages of using a Content Delivery Network (CDN) like EdgeOne, as it offloads tasks like compression from your server to theirs, freeing up resources on your server.
- Support for Streaming: GZIP is well-suited for streaming scenarios, where data is compressed and delivered in real time. Its compatibility and support for streaming applications make it a preferred choice in certain use cases.
Learn About Zstandard Compression
Zstandard is a newer compression method developed by Facebook. Its purpose is to provide a compression ratio similar to the DEFLATE algorithm, but faster, especially for fast decompression algorithms. It is tunable with compression levels ranging from negative 7 (fastest)[5] to 22 (slowest in compression speed, but best compression ratio). however, as of August 2024, only Chrome 123+, Firefox 126+, Opera 109+ these browsers support zstd content encoding. While most CDNs do not have support for zStandard yet, many could feasibly vary the cache key for origin compressed responses similar to the way they support Brotli. Learn about Zstd vs Brotli compression benchmark.
Learn more about smart compression, or sign up for EdgeOne. We have now launched a free trial, click here or contact us for more information.