Hi, I'm Alisha, and today, I'm going to show you how to enable gzip compression to speed up the WordPress site. (upbeat music) One of the easiest and most efficient ways to speed up your WordPress site is to compress all its wanted resources by enabling gzip compression on your web server. All modern browsers include support for gzip compression by default. However, to serve the compressed resources to your users with no hiccups, you must configure your server properly. In this video, you'll learn the basics of data compression on the web, what Giza compression is, its various benefits, and how you can use it to speed up your WordPress sites on different service setups. But before we get too far, I want to let you know that there will be links to more resources in the video's description, and remember, subscribe and ring that bell to get notifications for future helpful content. All right, let's decompress. Data compression on the web is the process of reducing the size of data transmitted by websites. Depending on the data type, text, images, style sheets, scripts, fonts, there are various ways to go about compressing data. For instance, minification of HTML, CSS, and JavaScript is a simple way to reduce the amount of data sent by browsers. Here, the minifier compresses the text by removing unnecessary characters, such as comments and white spaces from the source code. In this example of a simple HTML document, there are three content types. HTML markup, CSS styles, and JavaScript code. Each content type has unique syntax semantics. Overall, this HTML document has 357 characters in total. This code is easy to read and follow. It's ideal for development, however, it's unnecessary for the browser to read comments and have perfectly indented tags. As you can see here, a smart compressor can analyze this document and remove all the unnecessary bits from it. After minification, the HTML document reduces to just 141 characters. That's a 60.5% savings in the number of characters. It's not as easy on the eyes, but that doesn't matter to the browser. It'll still display the same page to the user. To take advantage of both the versions, you can maintain the original document as a development version. But many find the code before pushing it live. Most WordPress performance plugins take care of this automatically for you. As an example, the uncompressed version of jQuery 3.5.1 library is more than three times bigger than the minified version of the same file. Likewise, the same compression techniques described before can optimize other content types, like images, videos, fonts, and more. Content-specific reductions like these are the first step in optimizing the size of your website's text-based assets. But there's more to data compression than just minification. Using advanced math techniques, data compression algorithms can further reduce the size of data. One of the most popular examples of such a data compression method is gzip. It enables efficient data transmission, and has contributed significantly to make the internet a viable global communications medium. gzip, short for GNU Zip, is the most popular lossless data compression method on the web. It allows you to reduce the size of your site's HTML pages, style sheets, and scripts. Apart from being a data compression algorithm, gzip is also a file extension, and a software used for file compression and decompression. It's based on the deflate algorithm, which is a mixture of LZ77 encoding and Huffman Coding algorithms. A gzip compressor takes this set of raw data and compresses it losslessly. The raw data could be from any file type, but gzip works best with text-based assets, like HTML, CSS, and JavaScript. The next section covers how gzip compression works in depth. To begin with, the gzip compressor runs the LZ77 compression algorithm on the raw data to remove redundancies. This algorithm works by finding repeated patterns in a predefined sliding window, a small section of the raw data. It then replaces all the repeated strings with two pulls to compress the raw data. In this example, the sliding window size is just 13 characters long, or 13 bytes. However, gzip compression can use a maximum sliding window size of 32 kilobytes, or 32,768 bytes. The size of the sliding window plays a key role in LZ77 compression performance. After compressing the raw data with the LZ77 algorithm, the gzip compressor then uses the Huffman coding algorithm to compress it further. It does this by assigning characters appearing more frequently the least number of bits, while assigning rare characters the highest number of bits. This technique is like the one used in Morse code, wherein letters occurring more frequently in the English language get the shortest sequences. To understanding how Huffman coding algorithm works, consider the word bookkeeper. It's 10 characters long, but it has only six unique characters. This word has a good mix of single, double, and triple letters. Almost all websites use UTF-8 character encoding to represent letters and symbols. Every ASCII character in UTF-8, which also includes the English alphabet, uses one byte, eight bits. A 10-character string like bookkeeper will require 10 bytes, or 80 bits of memory. You can see that it contains one instance of the letters B, P, R, two instances of the letters O and K, and three instances of the letter E. The Huffman Coding Algorithm uses this knowledge to losslessly compress the string. It does this by generating a binary tree with every unique letter as a leaf. Letters with the lowest frequency, B, P, R, will find themselves at the bottom of the tree, while those that appear frequently, E, O, and K, will ideally find themselves at the top. The top-most node in the tree is the root, and its value is equal to the total number of characters in the string. After generating the Huffman tree, all the left-branching and right-branching arrows are given zero and one numbers respectively. You can then generate the Huffman code for any character by tracing the root to leaf path, and joining all the zeroes and ones. You can notice that letters with the highest frequency have Huffman codes with the smallest bit sizes. The Huffman coding algorithm can generate alternative binary codes by using a different ordering strategy for characters with the same frequencies. However, the total size of the encoded string will remain the same. That's a 68.75% reduction in memory required to store the original word. Using the Huffman tree with a 01 convention generates binary codes that satisfy the prefix property. It ensures that the Huffman code of any specific character isn't a prefix of the other character's code, making it easy to decode the encoded string using the Huffman tree. This plays a primary role in gzip decompression speed. The gzip compressor uses Huffman coding algorithm to further optimize the tuples generated by the LZ77 algorithm. This results in highly compressed files with GZ extension. Typically, gzip achieves a compression ratio of around 70% for small files, but it can reach up to 90% for larger text-based assets. In this table, you can see that compressing minified files with gzip can reduce their size further. You can compress any file type with gzip, but for assets already compressed with other methods, like images and videos, it won't amount to any savings. Sometimes, it may even increase the file size. The strength of a compression algorithm doesn't just depend on its compression ratio, but also how quickly and efficiently it can compress and decompress data. That's where gzip excels for most use cases. Since gzip decompresses swiftly using a streaming algorithm, it's a great fit for web protocols, where speed is of the essence. Plus, gzip uses minimal resources to both compress and decompress data, making it ideal for both servers and clients alike. These charts compare the compression performance of various compression algorithms. gzip loses out in compression ratio test by a slight margin, but for compression and decompression speeds, it beats the competition outright. Looking at the compression speed graph, we can conclude that gzip is ideal for real-time compression in HTTP servers and other data streams on the web. Considering all its positives in advancing the web, IETF ratified gzip as one of the three standard formats for compression in HTTP 1.1. Let's take a closer look at the most important advantages of gzip compression. Delivers a decent compression ratio. As discussed before, gzip doesn't have the best compression ratio compared to its competition, but it's not that far off from them either. Typically, it can help you reduce the size of text-based resources by 70 to 90%. Super fast compression and decompression. For data compression and decompression speeds, gzip is the clear winner. It's highly desirable for on the fly compression in HTTP servers and other data streams. Requires very little memory. gzip leaves a minimal memory footprint, making it suitable for servers and systems with limited memory capacity. Hence, you'll find it supported by even the cheapest web hosting providers. Doesn't expand much, even in worst cases. Lossless data compression algorithms like gzip, have a strict limit beyond which they cannot compress data. Typically, this happens when the resource is compressed well already, or if it's tiny, and the overhead of adding the gzip dictionary is higher than the compression savings. We can attribute this phenomenon to a concept called entropy encoding. gzip is highly resistant to this effect, free to use, and open source. gzip was primarily created as a free open-source replacement for the patented compressed program used in early Unix systems. Thus, it's not encumbered with any patents, and can be used freely by anyone. Enjoys universal support. According to W3 text, gzip compression is used by 82% of all the websites they track, making it the most widely-used compression algorithm across the web. gzip is supported by almost all servers and clients. No matter which server you host your site on, you can speed it up by enabling gzip on it. Next to minification, enabling gzip is one of the simplest and most effective speed optimizations that you can implement on your website. It's also one of the easiest ways to optimize WordPress. Despite this, many WordPress sites still don't use it. When you visit a website, your browser checks whether the web server has gzip enabled by checking for the content encoding gzip response header. If the header exists, it retrieves the compressed files, decompresses them, and then serves the smaller files to you automatically. If the browser doesn't detect the gzip response header, it downloads the uncompressed files. In most cases, the difference in page load speeds can be multiple seconds. Hence, if you don't have gzip enabled, you'll see warnings and website speed testing tools. Google PageSpeed Insights throws up a warning when you don't have any text compression enabled on your website. In this example site, compressing text-based resources can reduce the page weight by over 78%, and speed up the page load time by 2.1 seconds. PageSpeed Insights relies on the response headers returned to your browser by the server. Sometimes, it may show a false warning, even when you have gzip compression enabled. It may be because of running the speed test on your machine that uses an intermediate proxy server or a security software. They may interfere with downloading compressed files from external servers. GTmetrix shows a warning if your website doesn't serve compressed text-based resources. Like Google PageSpeed Insights, it'll also show you the potential savings you can achieve. Note, GT Metrix is updating its speed test algorithm to replace the old PageSpeed Insights, and Wiselow libraries with the latest Google Lighthouse metrics. You can expect its gzip compression warning to be similar to the one shown by Lighthouse. Pingdom Tools throws up a straightforward warning to compress your website components with gzip. In the Description section, Kingdom Tools also gives you a few stats about the importance of gzip, cool beans. Webpage test shows a warning in its performance review tab if it detects that any compressable responses aren't being served in the most optimized way. Webpage test will also give a graded score to show how severe a warning is. For instance, it ranks this warning 23 out of 100, which means you should fix it as a priority. The except encoding, gzip, deflate HTTP header is supported effectively by all modern browsers. Hence, most web hosts, including Kinsta, enable gzip compression by default on all their servers. When web servers see this header sent by a browser, they recognize the browser's support for gzip and respond with a compressed HTTP response using content encoding gzip header. But if you're using another WordPress hosting provider, or if you just want to confirm whether your website is serving gzip compressed content properly, always check whether it's enabled. Let's go over a few straightforward ways to check for gzip compression. Using an online tool is the easiest way to check if gzip compression is enabled on your website. I recommend using the free Check gzip Compression or HTTP Compression test tools. Simply enter your website URL, and hit the Check or Test button. Both of these online tools will show you a brief report on whether or not gzip is enabled, and the amount of data transfer you've saved or may save by serving the test URL with gzip compression enabled. The first tool will also show you other relevant information, such as your website's server type, content type, and compression time. You should note that gzip optimization doesn't just stop at your webpage, but it also includes its static text-based assets, like style sheets, scripts, and fonts. If you're using a CDN to serve these assets, then you need to ensure that the CDN also serves them with gzip compression enabled. Most modern CDNs support gzip compression. You can test assets served by CDN for gzip compression by linking directly to the assets. In this report, you can see that Kinsta CDN uses key CDN engine, which is a traditional pull CDN. If you're using Kinsta to host your WordPress site, you don't have to worry about a thing about gzip compression, as it's enabled by default. The second way to verify whether a website delivers gzip-compressed content is by verifying the content encoding, gzip HTTP response header. You can open up Chrome Dev Tools or Firefox Developer Tools and look for this response header under the Network section. I've already shown how it looks in Chrome DevTools earlier. Here's how it looks in Firefox Developer Tools. You can also enable the Use Large Request Rows option in the Chrome Dev Tools Settings panel to see both the original and compressed size of the page. As you can see here, the original page's size reduced from 118 kilobytes to just 22.9 kilobytes after compressing it with gzip. Most website speed testing tools will warn you for not using compression like gzip to serve your webpages. Many viewers of this video are probably coming because of exactly these gzip warnings, many of which we've already covered in depth. You can use tools like Page Speed Insights, Gtmetrix, Pingdom tools, and WebPage Tests to check whether you have gzip compression enabled on your WordPress site. If you don't have gzip compression enabled on your web server, there are many ways to go about enabling it. The exact method depends on which web server you're using to host your website. As always, take a backup of your site and server configuration files before editing them. The easiest way to enable gzip compression on your WordPress site is by using a caching or performance optimization plugin. For example, if you host your WordPress site on Apache Web Server, W3 total cache includes an option to enable gzip compression under its Browser Cache Settings panel. Likewise, WP Rocket lets you add gzip compression rules automatically. These plugins enable gzip compression by adding Apache's ModDeflate module to the HT access file. WordPress plugins require permissions to modify files on your web server. If they don't have the right permissions, then they'll fail or show you an error. In such cases, you need to contact your hosting provider or modify your web service configuration files manually using the code snippets in the resource section of the video's description below. Kinsta has optimized its platform for high performance, reliability, and security. This also includes enabling gzip compression by default for all its hosting plans. According NetCraft, Apache serves more active sites than any other web server in use today. It's also one of the two recommended web servers by WordPress. To enable gzip compression on Apache servers, you need to use the mod filter and mod deflate modules to configure them properly with the right directives. They will direct Apache to compress server output before sending it to clients over the network. You have two options to edit Apache's server configs based on the access level you have. One, if you can access the main server configuration file, usually called HTTPD.config, you're recommended to use it to configure Apache, as HT access files can slow down Apache. Two, if you can't access the main server configuration file, which is usually the case with most WordPress shared hosting providers, then you need to configure Apache using HT access file. The first option is strictly for system admins, as hosting providers rarely allow you to edit the main server configuration file. Explaining how to do it this way is out of this video's scope. You can refer to our resource section in the video description below to the sample Apache server configs shared by the HTML5 boiler plate project and Apache documentation to get started. The second option is ideal for most WordPress site owners, as many shared hosting providers allow you to edit HT access files. To get started, using SFTP or your host's online file manager to find the HT access file in your WordPress site's root directory. Then, add the code snippet noted in your resources in the video description below. It's important to make sure that the mod filter module is active on your server. Most web hosts have it enabled by default, but if it's not, the Add Output filter by type directive won't work, and many throw up an HTTP 500 error. You can check your server's error logs if you have any issues after adding the code snippet. Add the code only after the existing directives of your HT access file. Save the file, and then check whether it enables gzip compression on your server. Your web server should now serve compressed files for all the file extensions we just saw. You can confirm this by using any of the methods mentioned before. If you want to ensure that proxies and security software on the client side doesn't interfere with the gzip compression, try code snippet number two, noted in the resource section below. As per Netcraft, Nginx is the most used web server by web-facing computers. If the current trend continues, it'll soon overtake Apache to become the most-used web server by active sites. Even Kinsta uses Nginx to power its performance optimized hosting solutions for WordPress. You can enable gzip compression on your Nginx web server by using the directives defined in the Nginx HTTP gzip module. To start off, open your Nginx.config file, and add the directives noted in the Resources section in the video description below. Microsoft's Internet Information Services is the the third most popular web server used today. IIS is mainly deployed in enterprise environments running on Windows, especially for setting up company-specific intranet and extranet servers. It's rarely used to host WordPress sites due to various compatibility issues. Yet, if you find yourself in one of those rare situations where you need to enable gzip compression on IIS, you can refer to Microsoft's documentation to get started. You may also find the Stack Overflow thread helpful, noted in the resources below. The world of data compression on the web is always advancing. With the average page weight size increasing constantly, web technology is trying to catch up with it too to make transferring data over the web more efficient. A new compression algorithm has gained widespread popularity over the past few years, brotli. Compressing Woff2 web fonts was brotli's main focus originally, but has since expanded to support compression for any type of data. Brotli compresses data better than gzip, but it requires considerably more time and resources to compress the data. However, its decompression time is comparable to that of gzip, though it's still a tad slower. Most browsers support brotli today, but using it on WordPress sites is still somewhat complicated. You must host your site with a hosting provider that supports brotli, or allows you to install the brotli library. Most managed WordPress hosts don't support it outright yet, but if you use a CDN has such as CloudFlare or keyCDN, you can enable it easily. A well-optimized web is great for everyone. Users love snappier websites. Website owners love the reduced hosting charges, and web hosts love the optimization achieved on their servers. Compression techniques like gzip are one of the best ways to speed up your page load times for your visitors. WordPress site owners can speed up their sites instantly by enabling gzip compression. Kinsta enables it by default on all its servers, but for others, this article covers multiple ways to enable gzip compression on various web servers. Speed is critical for any website, just compress. Kinsta's WordPress hosting can speed up your website by up to 200%, and you'll get 24/7 support from our expert WordPress engineers. Let us show you the Kinsta difference. Try a free demo of our MyKinsta dashboard at demo.kinsta.com. Thank you for watching, don't forget to subscribe for more tutorials, explainers, and helpful content like this. (upbeat music)
