
Better compression of web pages
Appetizers
For nearly 20 years, web servers have relied on Gzip compression to compress HTML, CSS, and miscellaneous text files, which the browser then receives and unpacks again, speeding up data transfer at the network bottleneck.
Gzip compression of dynamic content takes place at the server on the fly. The web server reads the file from the filesystem, pipes it through Gzip, and then delivers the result to the browser. Before the Gzip step, the server often calls a PHP module.
For static (e.g., CSS) files, the server sometimes performs compression beforehand and then stores .gz
files in the filesystem, saving CPU power on the server. Another option is Google's Zopfli [1] compression software. Although its performance is far slower than Gzip and uses more CPU capacity, it provides superior results that are still compatible with Gzip.
Over the past 20 years, better compression methods than Gzip have emerged from time to time. However, they have never made it into the web browser, simply because they all took too much time for on-the-fly compression. After all, if it takes longer to compress than it does to transfer the original files, it hasn't helped anyone when all's said and done.
Kneaded
In 2015, Google provided a solution to this dilemma with the MIT-licensed Brotli [2] software, which compresses files at the same speed as Gzip, but with a higher compression rate – as demonstrated (Listing 1) with the use of both tools on this example HTML document:
<html> <head> <title>Brotli Test</title> </head> <body> <p>Hello World!</p> </body> </html>
Buy this article as PDF
(incl. VAT)
Buy ADMIN Magazine
Subscribe to our ADMIN Newsletters
Subscribe to our Linux Newsletters
Find Linux and Open Source Jobs
Most Popular
Support Our Work
ADMIN content is made possible with support from readers like you. Please consider contributing when you've found an article to be beneficial.
