{"id":4589134,"date":"2022-07-26T07:42:03","date_gmt":"2022-07-26T05:42:03","guid":{"rendered":"https:\/\/wp-rocket.me\/?post_type=core_web_vitals_hub&p=4589134"},"modified":"2022-09-20T12:23:52","modified_gmt":"2022-09-20T10:23:52","slug":"enable-text-compression","status":"publish","type":"core_web_vitals_hub","link":"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/enable-text-compression\/","title":{"rendered":"How to Enable Text Compression to Speed up Your Site"},"content":{"rendered":"

Enabling text compression on WordPress is one of the best performance techniques to keep your website loading fast. When you run a speed test on Google PageSpeed Insights, you may see that \u201cEnable text compression\u201d is one of the recommendations coming from Lighthouse: <\/p>

\"\"
Opportunities section Lighthouse report listing all text-based resources that aren’t compressed – Source: PageSpeed Insights<\/a> 
<\/figcaption><\/figure>

In this article, we explain how data compression works, how to activate it on your WordPress site and how to check that it\u2019s enabled. <\/p>

What\u2019s Data Compression<\/h2>

Data compression is the process of reducing file sizes thanks to the LZ77 and Huffman coding algorithms before sending them to browsers. There are several compression methods such as GZIP or Brotli that play a key role in showing billions of pages to users daily. <\/p>

\"Files
Files with GZIP compression – Source: WP Rocket<\/a>
<\/figcaption><\/figure>

To give an example, that\u2019s how a compressed HTML file looks like before and after the minification process: <\/p>

Before Compression: 329 characters<\/strong><\/p>

<html>\n<head>\n    <style>\n    \/* my-banner for desktop only *\/\n    .my-banner { font-size: 150% }\n    .my-banner { width: 75% }\n<\/style>\n<\/head>\n<body>\n    <!-- my banner START -->\n    <div>...<\/div>\n    <!-- my banner END -->\n    <script>\n    my Scripts(); \/\/ just some scripts used on the web page\n    <\/script>\n<\/body>\n<\/html>\n<\/code><\/pre>
With GZIP Compression: 142 characters<\/strong><\/p>
<html><head><style>.my-banner{font-size:160%;width:65%}<\/style><\/head><body><div>...<\/div><script>myScripts();<\/script><\/body><\/html>\n<\/code><\/pre>
Let\u2019s go over the 2 types of compression algorithms recognized by Lighthouse, namely:<\/p>
  1. GZIP Compression<\/a><\/li>
  2. Brotli Compression<\/a><\/li><\/ol>
    What’s GZIP Compression?<\/h3>
    GZIP is an open-source compression algorithm that locates and removes the duplicate characters in your text files. It aims at compressing web pages on the server-side and decompressing them in the browser. The goal is to reduce the file size of your site (HTML, JS, and CSS) to get faster code.<\/p>
    According to W3Techs.com, 88.2% of the websites on the internet use compression, and 52.7% of all websites use GZIP. <\/p>
    \"GZIP
    GZIP compression on the internet (July 2022) – Source: W3techs.com<\/a>
    <\/figcaption><\/figure>
    What’s Brotli Compression?<\/h3>
    Similar to GZIP, Brotli is a compression algorithm developed by Google allowing text compression of a web page. Brotli was designed from the beginning to compress streams on the fly. Overall, Brotli is faster at compressing content on the server and decompressing it in the browser than in GZIP.<\/p>
    Do you want to see a more in-depth comparison between GZIP and Brotli<\/a>? Check our guide!<\/p>
    How GZIP Compression Works<\/h2>
    Data compression follows the same process for each web page on the internet. With the help of LZ77 and Huffman encoding, the whole technique can be broken down into 5 key steps: <\/p>
    1. When a server receives a request for a web page, it checks the header of the request to determine if the browser supports GZIP.<\/li>
    2. If it does, the server generates the markup for the web page and then applies GZIP.<\/li>
    3. GZIP converts the markup into a compressed data stream, which is then transferred to the browser.<\/li>
    4. When the browser receives the stream, it decompresses it and displays it to the user.<\/li>
    5. What if the browser doesn\u2019t support GZIP? The web server serves up an uncompressed data stream.<\/li><\/ol>
      \"How
      How data compression works  – Source: WP Rocket<\/a>
      <\/figcaption><\/figure>
      To go a little bit further in our explanation, let\u2019s understand how the LZ77 and Huffman encoding work. <\/p>
      First, GZIP compression runs the LZ77 algorithm to remove redundancies in a small section of the raw data:<\/p>
      \"GZIP
      GZIP compression running the LZ77 algorithm – Source: WP Rocket<\/a><\/figcaption><\/figure>
      Then, the GZIP compressor uses the Huffman coding algorithm to compress it even further. The characters occurring more frequently get the least number of bits, while more rare characters get the highest number of bits:<\/p>
      \"GZIP
      GZIP compression running the HUFFMAN encoding – Source: WP Rocket<\/a><\/figcaption><\/figure>
      Finally, if you want to see a real-life example Kinsta made an interesting explanation with the word \u201cBookkeeper\u201d. <\/p>
      It has 10 characters but only 6 unique ones (2 \u201co\u201d, 3 \u201ce\u201d etc.). <\/p>
      \"Duplicate
      Duplicate characters in \u201cbookkeeper\u201d – Source: Kinsta<\/a> 
      <\/figcaption><\/figure>
      The Huffman coding algorithm losslessly compresses the whole text string by generating a binary tree with every unique letter as a leaf. It gives a binary code to each character according to its frequency:<\/p>
      \"Huffman
      Huffman algorithm gives unique binary codes for every character – Source: Kinsta<\/a> 
      <\/figcaption><\/figure>
      Result: GZIP saved us almost 70% of memory. It went from 80 bits to 25 bits, thanks to the Huffman conversion.<\/strong><\/p>
      \"Bookkeeper:
      Bookkeeper: 80 bits word encoded as a 25 bits string thanks to the Huffman algorithm  – Source: Kinsta<\/a> 
      <\/figcaption><\/figure>
      <\/div>\n\t