Enable Text Compression: Definitive Guide for Developers

Are you sure your website’s main thread is not overburdened? How much time does the browser that sends a request to your server have to spend to load all the content that will be brought before the user? So how much of this time is associated with loads of text-based files on the web page in question? Hey, the Google Lighthouse metric “enable text compression” is directly related to these questions!

With Screpy, you can easily perform audits integrated to Google Lighthouse and you can learn how to do optimization work with easy-to-follow tasks by examining enable text compression and similar warnings.

You know that after compressing the text-based sources on web pages with the correct format, your web page will provide a faster and user-oriented experience, right?

Today, we will examine the text compression process in full detail with you. You are definitely in the right place to examine everything from text compression tools to the advantages of this process, from the style of calculating your score to the process of passing the audit.

To learn more about page performance, let’s dive in, folks!

Do you want to increase your website traffic?

Try for free to boost your website traffic!

Register Now

What is Text Compression?

Text compression is a process that allows the text-based sources in CSS, Javascript, HTML format files to be reduced to smaller sizes. This process does not change the content itself, but compresses it, reducing its size. In this way, make it possible for browsers to render, download and load these files faster.

The logic of compression for text files is as follows: Especially in code languages where syntax is repetitive, compression works great. For example, because HTML is this type of language, generally the best compression rates are obtained in HTML. What is done is to detect duplicate information in the source code and shorten and remove them temporarily. For example, tags such as <div> or <p> are used repeatedly in HTML. Algorithms like gzip remove them temporarily, resulting in smaller file size.

At the end of the job, compressed text files will mean content that reaches the user much faster than before. As you know from the page speed and bounce rate studies, a slow loading time is one of the first reasons to choose your competitors for the user who wants to reach what they are looking for as quickly as possible. You can also use text compression to increase the value of your website, contribute to its ranking and to strengthen the total SEO score, and by reducing the workload, you can create pages with higher performance.

Text Compression Tools & Process

There are three different tools you can use to compress within the suggestions of Google Lighthouse. These can be listed as follows:

1. Gzip
2. Brotli
3. Deflate

When using Gzip and Brotli from the above, the size of the files in question can be reduced by 70 percent. It becomes much easier to operate, thanks to effective compression. The size, which shrinks by 70 percent, speeds loading time by 50 percent, according to the studies. This means an excellent improvement for possible conversion rates.

If you want to ease the workload of the browser during loading on your website, you can follow the steps below:

1. First, check out the source code on your site.
2. Delete any unused or unnecessary code fields.
3. Perform code minification. This process will optimize unnecessary whitespace in the code source, code that is written longer while it can be encoded shorter. In this way, you will significantly reduce the load of the code resource even before doing any compression.
4. As the next step, you can compress. Actually, you don’t need to do the above steps for compression. However, we recommend that you follow this sequence first to maximize the yield from the last step.

Important tip: Compression is not preferred for all file types. For example, you shouldn’t compress image files on your website with Gzip style tools. Instead, it may be advisable to change your image file formats to jpeg. The load this file type puts on your page will be much less.

Text Compression By Using Gzip

While doing your work with Google Lighthouse, your optimizations in text-based content will greatly reduce the content size. You can use Gzip to do this. Let’s get to know this tool closely together.

1. Gzip provides a compression service for all text-based content on your website. You can easily process CSS, Javascript, or HTML files and obtain lower-dimensional data.
2. Another advantage is the following: As you know, it is very important that different files on your website are of the type supported by modern browsers. Honestly, this is one of the most important things in the W3C validation process. All of the files you get as a result of your compression with Gzip are supported by modern browsers.
3. According to a recent study, more than 99 percent of users who compress files in the web world use GZIP. The universality of the vehicle is the most important feature that makes it different from the others.
4. To use gzip, the server you use must allow this.
5. The same is true for some CDNs.

What else do you need to know? What Gzip does is basically remember the previously seen part of the content and find areas in the content code that have been renewed to make them change. Gzip is often recommended especially for compression of text data because the tool works best in this area. When you use Gzip on your text-based files, it will be possible to compress the file size between 70 and 90 percent. However, you cannot use Gzip for images.

Text Compression By Using Brotli

Brotli is a compression method just like Gzip. It was developed directly by Google and is preferred for the compression of text-based content. The main reason the algorithm provides a strong enough compression is that it uses common keywords on the client and server sides.

Brotli is supported by almost all modern browsers. Still, you can check the table below to make sure of this. If your browser supports Brotli, it should be sent to you with gzip in the accept-encoding request header. If your browser supports the format you demand, you can easily use the compressed text content in the Brotli method on your pages.

To use Brotli, you have to choose one of two ways to use compressed items:

If you wish, you can enable Brotli on your web servers.

If you want to enable Brotli on your web server, you need to follow the steps below:

1. You need to install the brotli service on nginx.
2. Thanks to Google, you will be using a module that allows nginx to be loaded into Brotli from source.
3. Complete the setup. Next you need to make sure the following code is placed in nginx conf file:

brotli on;

brotli_static on;        # for static compression, explained later

brotli_comp_level 11;    # this setting can vary from 1-11

brotli_types text/plain text/css application/javascript application/json image/svg+xml application/xml+rss;

What still needs to be done is to complete the compression. All of the content you specify in the brotli_types setting will be compressed and delivered by the tool. But remember, if you’re using a client that doesn’t support br, you need to keep gzip as well. In this way, in case of no support, the compression process is automatically performed with gzip and your work will not be interrupted. In case both gzip and br are supported thanks to the code we give you, the client will prefer br.

If you wish, you can activate Brotli on the CDN you use.

If you want to enable Brotli compression on your website, it is also possible to do this directly with CDN. If you do the process with CDN, unlike just before, you don’t need to use any code. Also, you never had to add a snippet to infrastructure. Instead, you can choose Brotli from Origin services. You will have to pay additional money for this.

Text Compression By Using Deflate

How about learning another tool that enables you to do text compression? This tool, which compresses your content using LZ77, Huffman coding, and a highly sophisticated algorithm, is also extremely popular. It is possible to say that the file load reduction results produced by Deflate compared to Gzip are less successful. Additional blocking tools and some heuristics used in gzip allow compression rates to be much better.

Other Type of Compression Formats for Your Text-Based Contents

GZIP or Brotli is not the only method you can use to compress different text-based content on your website. In addition to these, there are numerous additional methods that enable the powerful compression of data blocks and greatly reduce the content size.

It is possible to say that BZIP2 and LZMA are two well-known and competitive compression formats. These can reduce file sizes a little more, with better compression than GZIP. Moreover, these formats are extremely useful when it comes to re-decompressing compressed files.

But there is a reason they are not used often: They are not supported by a large number of browsers. Most browsers, especially locally, do not decompress files with these tools.

But we still have good news: people who want to use these formats right now can use Javascript ported versions of the files and compress their data offline and open them in the client. Remember that you always have lots of options in the internet world.

Well, does it make sense to do this? Honestly, if you care about the decompress time of the compressed files, it may not always make sense. Because the decompress time of some files may take a little longer due to this method. However, if the files you use on your site are interactive and detailed, you can get much faster results and reduce the file sizes with this method.

BZIP vs. LZMA: Which one to choose?

Let’s explain the difference between the two different text compress methods as follows:

• What BZIP2 does is basically built around Burrows Wheeler Transform and Move To Front Transform. These two transform methods actually do not reduce the file size directly. Instead, they make the file in question available for compression by the Huffman / arithmetic encoder. That’s exactly why BZIP may require a slightly higher amount of memory than other formats. However, looking at the result, it is possible to say that files compressed with this tool can be much smaller than Gzip compressed files.
  
• LZMA is more similar to GZIP in terms of structure and mode of operation. This tool works with dictionary compression. Then, the size reduction process continues by using the range encoding system. Although it is similar to LZMA Gzip, it can produce files with a smaller size than it. It owes this to matching and windowing features / algorithms in general.

Data Compession: What It Is and What It Is Not

The compression process for text-based files is as follows:

• Using fewer bits to encode information simply means compressing that information. The tools we mentioned above can also be used to compress the coding process.
• During the compression of the code source, unnecessary data on this source is eliminated. However, the file continues to work properly.
• Multiple different compression techniques are actively used in the web world.
• It is preferable to reduce the size of the data in order to get the best result from compression. This compression process basically affects the speed of the file and the memory requirement of the file. In these respects, the less resource to be allocated for the file, the faster your website responds to the user’s requests and shows the content to the user faster.

Is Data Compression Same with Minification?

No. Data compression and minification are operations that are completely separated from each other. First of all, let’s say this: Both of these operations are used to do the following:

1. Reducing the size of the files.
2. Increasing the speed of the pages.

But the way to achieve the above objectives is different. Data minification means changing the content of the code source. This requires deleting customized characters, removing white spaces and code lines, and so on. In the data compression, the content of the code source is not tampered with. Instead, the existing file is compressed (repetitive parts are removed temporarily) and made smaller in size.

Hey, we have told you detailed information about minifying CSS files. We also listed some WordPress plugins to use to minify your folders easily. Go to Unminified CSS article we have shared for more!

Text Data Compression: Mobile First Optimization

Remember the mobile-first indexing content we shared with you:

1. Speed is a very important metric, especially on mobile devices. The speed optimizations you make will closely affect the mobile experience and allow you to keep your visitors on your site in a dynamic life that is constantly in motion.
2. Researches show that 5 billion internet users will be reached very soon.
3. Today, there are 650 million mobile device users in Africa.
4. In Asia, mobile phone users have reached 3 billion.
5. Approximately half of the users in these regions prefer to connect to the internet only with their mobile devices.
6. In addition, (according to mobile-first indexing) the primary version of your site for Google has become the mobile version.

So when compressing or removing certain content from your website, consider the screen the mobile user will see:

• Does the item in question need to appear on the mobile screen?
• Does the item in question delay loading in terms of its dimensions?

Asking these and other questions allows you to do the right optimization work.

How To Check The Compressed Text-Based Content?

After doing the compression process, your operation may not be performed because the format in question is not supported by your browser and the response may be processed in an uncompressed way. So a little check isn’t a bad idea at all. You can perform your check by following the steps below:

1. First, open Chrome DevTools – Hey, it will soon be integrated with Screpy DevTools. For that, you can press Control + Shift + J (or Command + Option + J on Mac).
2. Then go to the Network tab.
3. If you want to find exactly what you want, you need to choose that request.
4. Continue by going to the Headers tab.
5. You will then find the Response Headers section. Here you need to find the text “content-encoding”. If this is there, you have successfully compressed the file.
   
   

Remember: In whatever format you are doing the content compression process, you will see the word opposite content-encoding. If you did the process with Gzip, you should see content-compression: gzip, and content-compression: br if you did it with Brutli.

FAQ

You May Also Like

• Compress Text-Based Elements on the Web Page
• How to speed up your website?
• Sitemap.xml Files Have Format Errors
• The Size of the Images
• The Best Web Site Analysis Tool: Take The Full Control!