Compress Text-Based Elements on the Web Page

Google Lighthouse lists all text-based files used uncompressed for you as follows:

Lighthouse Handle Text Compression: But How?

Google Lighthouse scans the data in detail. Among them, it chooses responses that have the following properties:

1. Elements with text-based resource types
2. Elements that do not use compression methods such as br, gzip, or deflate
3. Then, the determined parts are compressed with GZIP by Lighthouse and the total potential saving is calculated by examining their size.

But not all results are listed by Lighthouse. For example, those with the following properties are not listed:

1. If the original size of the answer is less than 1.4 Kib,
2. Potential savings when compressed are less than 10 percent of the current size

How to pass the audit?: Enabling text compression on your server

To pass the text compression audit, follow the steps below:

When a browser requests a resource, it will use [Accept-Encoding](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Accept-Encoding) as the HTTP request header. Using this code, what it will do is present the compression algorithm it supports to the user-to you. Like below:

Accept-Encoding: gzip, compress, br

If the browser supports Brotli it might be a good idea to use it. Because Br has the capacity to maximize the saving to be realized by compression. Do a little research on the internet for this. Search for “how to enable Brotli compression” using the name of your server. According to the statements made so far, Brotli is supported by almost all major search engines. Including Explorer, Safari iOS, and Safari Desktop.

Use Chrome DevTools to check if a response is compressed

Using Chrome DevTools, you can check if the compression you make to a response is performed. Follow the steps below:

1. First, press Control + Shift + J (or Command + Option + J on Mac). This will enable you to open DevTools.
2. Then use the Network tab.
3. Then select the request related to your search.
4. Click on the Headers tab.
5. Go to the Response Headers section and examine the content-encoding header there.

You can also compare compressed one with other that are not:

1. First, press Control + Shift + J (or Command + Option + J on Mac). This will enable you to open DevTools.
2. Then use the Network tab.
3. Allow for large request rows.
4. Review the size part of the response you chose. The top value you will see here is the compression next value and it should be lower. The value below is the size before compression.