{"id":21728,"date":"2020-05-14T14:32:13","date_gmt":"2020-05-14T18:32:13","guid":{"rendered":"https:\/\/www.boldgrid.com\/support\/?p=21728"},"modified":"2024-10-10T12:32:29","modified_gmt":"2024-10-10T16:32:29","slug":"what-is-brotli-compression-and-why-do-i-need-it","status":"publish","type":"post","link":"https:\/\/www.boldgrid.com\/support\/w3-total-cache\/what-is-brotli-compression-and-why-do-i-need-it\/","title":{"rendered":"What is Brotli Compression and Why Do I Need It?"},"content":{"rendered":"<!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD HTML 4.0 Transitional\/\/EN\" \"http:\/\/www.w3.org\/TR\/REC-html40\/loose.dtd\">\n<?xml encoding=\"utf-8\" ?><html><body><div class=\"boldgrid-section\">\n<div class=\"container\">\n<div class=\"row\">\n<div class=\"col-lg-12 col-md-12 col-xs-12 col-sm-12\">\n<p class=\"\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-21729\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/05\/what-is-brotli-compression-and-why-do-i-need-it.jpg\" alt=\"Brotli Compression vs Gzip Compression - Which is better?\" width=\"780\" height=\"520\" srcset=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/05\/what-is-brotli-compression-and-why-do-i-need-it.jpg 780w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/05\/what-is-brotli-compression-and-why-do-i-need-it-300x200.jpg 300w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/05\/what-is-brotli-compression-and-why-do-i-need-it-768x512.jpg 768w\" sizes=\"auto, (max-width: 780px) 100vw, 780px\" \/><\/p>\n<p class=\"\">Compressing your <a href=\"https:\/\/www.boldgrid.com\/\">WordPress website<\/a> files is something you can do to improve your sites performance. Traditionally, this is done with <a href=\"https:\/\/www.boldgrid.com\/support\/w3-total-cache\/what-is-gzip-compression-and-how-do-i-enable-it\/\">Gzip Compression<\/a> as this has been the standard for quite some time. Recently Google released a new compression algorithm called <strong>Brotli<\/strong>. Brotli that optimizes text-based files like HTML, CSS, and JavaScript. It works by reducing file sizes, which leads to faster file transfers between the server and the user&rsquo;s browser.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"boldgrid-section\" style=\"margin-top: 60px;\">\n<div class=\"container w3tc-radius\" style=\"border-width: 0px; background-image: url('https:\/\/www.boldgrid.com\/wp-content\/uploads\/2023\/07\/upsell-darker-alt.png'); background-size: cover; background-position: 50% 5%;\" data-image-url=\"https:\/\/www.boldgrid.com\/wp-content\/uploads\/2023\/07\/upsell-darker-alt.png\">\n<div class=\"row upsell-column\" style=\"padding-top: 2em; padding-bottom: 2em; color: #ffffff;\">\n<div class=\"col-lg-1 col-md-1 col-sm-12 col-xs-12 hidden-sm\"><\/div>\n<div class=\"col-lg-5 col-md-6 col-xs-12 col-sm-7\">\n<p class=\"\" style=\"color: #ffffff; margin-top: 0;\">Use Brotli compression and speed up your WordPress website with <strong>W3 Total Cache Pro<\/strong>.<\/p>\n<\/div>\n<div class=\"col-lg-6 col-md-5 col-sm-5 col-xs-12 text-center align-column-center\">\n<p class=\"\" style=\"border-width: 0px;\"><a class=\"button-w3tc-white\" style=\"border: 2px solid #30BEC4; font-size: 18px; padding: 15px 30px;\" href=\"https:\/\/www.boldgrid.com\/w3-total-cache\/#pricing\">View Plans<\/a><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"boldgrid-section\">\n<div class=\"container\">\n<div class=\"row\">\n<div class=\"col-lg-12 col-md-12 col-xs-12 col-sm-12\">\n<h2 class=\"\" id=\"is-brotli-compression-better-than-gzip\">is Brotli Compression Better Than Gzip?<\/h2>\n<p class=\"\">Compared to Gzip, Brotli offers several advantages, including better compression rates, as it can compress files into smaller sizes, leading to more efficient data transfers and reduced bandwidth usage. This results in improved load times, with smaller files enabling faster downloads and quicker page loads. Additionally, Brotli has widespread browser support, as all major browsers&mdash;including Chrome, Firefox, Safari, and Edge&mdash;have supported it since 2020, making it an ideal choice for performance-focused websites.<\/p>\n<p class=\"\">Enabling Brotli compression within <strong>W3 Total Cache<\/strong> can significantly enhance your site&rsquo;s speed by reducing file sizes more effectively than Gzip. This reduction leads to faster page load times, as smaller files require less data for browsers to process, thereby improving the overall user experience. Additionally, Brotli can positively impact important performance metrics like <strong>First Contentful Paint (FCP)<\/strong> and <strong>Largest Contentful Paint (LCP)<\/strong>, both of which are crucial for Google&rsquo;s ranking algorithms.<\/p>\n<p class=\"\">Brotli and Gzip are both valuable compression algorithms, but Brotli outperforms Gzip in most cases:<\/p>\n<ul class=\"\">\n<li><strong>Compression Ratios<\/strong>: Brotli compresses files more efficiently than Gzip, especially for static assets like JavaScript, CSS, and HTML.<\/li>\n<li><strong>Speed<\/strong>: Brotli often results in faster load times due to smaller file sizes.<\/li>\n<li><strong>Compatibility<\/strong>: While Brotli is supported by modern browsers, Gzip remains essential for compatibility with older browsers.<\/li>\n<\/ul>\n<p class=\"\">For optimal performance, you should enable Brotli for modern browsers and fall back to Gzip where necessary. W3 Total Cache handles this automatically, ensuring that your site is always served with the best compression method available.<\/p>\n<h2 class=\"\" id=\"comparing-compression-levels-gzip-vs-brotli\">Comparing Compression Levels (Gzip vs. Brotli)<\/h2>\n<p class=\"\">When comparing compression levels, Gzip offers 9 distinct levels, with higher levels providing greater file size reductions. However, there is a tradeoff between compression efficiency and the time it takes for the server to complete the compression process. For example, at level 1, Gzip compresses files quickly, but at level 9, while the file size savings are more significant, the compression takes longer to finalize.<\/p>\n<p class=\"\">Similarly, Brotli follows a comparable structure, but with 11 levels of compression. Like Gzip, Brotli&rsquo;s higher levels also take more time to achieve maximum compression, meaning that both algorithms share this balance between time and efficiency when it comes to compression settings. The key difference lies in Brotli&rsquo;s ability to compress files into smaller sizes overall, providing even greater file savings at similar or higher levels compared to Gzip.<\/p>\n<p class=\"\">Here&rsquo;s a comparison list of Gzip and Brotli compression levels to further simplify:<\/p>\n<ul class=\"\">\n<li><strong>Gzip Compression Levels<\/strong>:\n<ul>\n<li>9 levels of compression.<\/li>\n<li>Higher levels offer greater file size reduction.<\/li>\n<li>Tradeoff: Higher compression levels take more time to complete.<\/li>\n<li>Example: Level 1 is faster but saves less space, while Level 9 takes longer but reduces file size more significantly.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Brotli Compression Levels<\/strong>:\n<ul>\n<li>11 levels of compression.<\/li>\n<li>Similar tradeoff between compression efficiency and time.<\/li>\n<li>Higher levels, like Gzip, take longer but result in smaller file sizes.<\/li>\n<li>Brotli generally produces smaller files than Gzip at comparable compression levels.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>By enabling Brotli compression within W3 Total Cache, you can further enhance your site&rsquo;s speed by reducing file sizes beyond what Gzip can achieve.<\/p>\n<p>This can result in:<\/p>\n<ul class=\"\">\n<li><strong>Faster Page Load Times<\/strong>: Smaller files mean less data for browsers to load, improving user experience.<\/li>\n<li><strong>Better Core Web Vitals Scores<\/strong>: Brotli can help improve key performance metrics like <strong>First Contentful Paint (FCP)<\/strong> and <strong>Largest Contentful Paint (LCP)<\/strong>, which are critical for Google&rsquo;s ranking algorithms.<\/li>\n<\/ul>\n<h2 id=\"how-to-enable-brotli-compression-in-w3-total-cache\">How to Enable Brotli Compression in W3 Total Cache<\/h2>\n<h3 id=\"step-1-install-and-set-up-w3-total-cache\">Step 1: Install and Set Up W3 Total Cache<\/h3>\n<p>If you don&rsquo;t have W3 Total Cache installed on your WordPress site, follow these simple steps:<\/p>\n<ul class=\"\">\n<li>Go to your WordPress dashboard, click on <strong>Plugins &gt; Add New<\/strong>.<\/li>\n<li>Search for <strong>W3 Total Cache<\/strong> and click <strong>Install<\/strong>.<\/li>\n<li>Once installed, click <strong>Activate<\/strong>.<\/li>\n<\/ul>\n<h3 class=\"\" id=\"step-2-check-if-brotli-compression-is-supported-by-your-server\">Step 2: Check if Brotli Compression is Supported by Your Server<\/h3>\n<p class=\"\">Brotli compression requires support at the server level, either on <strong>Apache<\/strong> or <strong>Nginx<\/strong>. To check if Brotli is supported:<\/p>\n<ul class=\"\">\n<li>Use browser developer tools: Right-click on your webpage, click <strong>Inspect<\/strong>, go to the <strong>Network<\/strong> tab, and reload the page. Click on any file and look for the <strong>Content-Encoding<\/strong> header&mdash;if it says &ldquo;br,&rdquo; Brotli is enabled.<\/li>\n<li>Alternatively, use online Brotli testers or tools like GTMetrix to check if your server supports Brotli.<\/li>\n<\/ul>\n<p>If Brotli is not enabled, contact your hosting provider or system administrator to configure it.<\/p>\n<h3 class=\"\" id=\"step-3-enable-brotli-compression-in-w3-total-cache\">Step 3: Enable Brotli Compression in W3 Total Cache<\/h3>\n<p>Once Brotli is supported on your server, enabling it in W3 Total Cache is simple:<\/p>\n<ul class=\"\">\n<li>Navigate to <strong>Performance &gt; Browser Cache<\/strong> in your WordPress dashboard.<\/li>\n<li>Scroll down to the <strong>HTML &amp; XML<\/strong>, <strong>CSS &amp; JS<\/strong>, and <strong>Media &amp; Other Files<\/strong> sections.<\/li>\n<li>Ensure the <strong>Enable Compression<\/strong> option is checked for all relevant file types.<\/li>\n<li>W3 Total Cache will now automatically use Brotli for supported browsers and Gzip as a fallback for older browsers.<\/li>\n<\/ul>\n<h2 id=\"testing-brotli-compression-on-your-website\">Testing Brotli Compression on Your Website<\/h2>\n<p class=\"\">After enabling Brotli compression, it&rsquo;s important to test whether it&rsquo;s working correctly and improving your site&rsquo;s performance. Here&rsquo;s how you can do it:<\/p>\n<ul class=\"\">\n<li>Open <strong>Browser Developer Tools<\/strong> (Inspect &gt; Network tab) and check the <strong>Content-Encoding<\/strong> field for &ldquo;br&rdquo; to verify that Brotli is being applied.<\/li>\n<li>Use performance testing tools like <strong>GTMetrix<\/strong> or <strong>WebPageTest<\/strong> to compare file sizes and page load times before and after enabling Brotli.<\/li>\n<li>Look for improvements in Core Web Vitals metrics, such as <strong>First Contentful Paint (FCP)<\/strong> and <strong>Largest Contentful Paint (LCP)<\/strong>.<\/li>\n<\/ul>\n<h2 id=\"brotli-compression-vs-gzip-which-should-you-use\">Brotli Compression vs. Gzip: Which Should You Use?<\/h2>\n<p>Brotli and Gzip are both valuable compression algorithms, but Brotli outperforms Gzip in most cases:<\/p>\n<ul class=\"\">\n<li><strong>Compression Ratios<\/strong>: Brotli compresses files more efficiently than Gzip, especially for static assets like JavaScript, CSS, and HTML.<\/li>\n<li><strong>Speed<\/strong>: Brotli often results in faster load times due to smaller file sizes.<\/li>\n<li><strong>Compatibility<\/strong>: While Brotli is supported by modern browsers, Gzip remains essential for compatibility with older browsers.<\/li>\n<\/ul>\n<p class=\"\">For optimal performance, you should enable Brotli for modern browsers and fall back to Gzip where necessary. W3 Total Cache handles this automatically, ensuring that your site is always served with the best compression method available.<\/p>\n<h2 class=\"\" id=\"conclusion\">Conclusion<\/h2>\n<p>Enabling Brotli compression is one of the best ways to optimize your WordPress website&rsquo;s performance. By reducing file sizes and improving page load speeds, Brotli helps deliver a better user experience while enhancing your SEO. Combined with W3 Total Cache&rsquo;s caching and optimization features, Brotli is a powerful tool in your website performance arsenal.<\/p>\n<p>Ready to optimize your site even further? Contact us for a free performance audit or let us help you with your WordPress optimization needs.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>Compressing your WordPress website files is something you can do to improve your sites performance. Traditionally, this is done with Gzip Compression as this has been the standard for quite some time. Recently Google released a new compression algorithm called Brotli. Brotli that optimizes text-based files like HTML, CSS, and JavaScript. It works by reducing [&hellip;]<\/p>\n","protected":false},"author":529,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"bgseo_title":"What is Brotli Compression and Why Do I Need It For My WordPress Site?","bgseo_description":"Compressing your WordPress website files is definitely something you can do to improve your sites performance. This article explains the difference between Brotli Compression and Gzip Compression, and explains why you should implement it on your stack. Hack your websites performance instantly!","bgseo_robots_index":"index","bgseo_robots_follow":"follow","footnotes":""},"categories":[745,692],"tags":[],"class_list":["post-21728","post","type-post","status-publish","format-standard","hentry","category-browser-cache","category-w3-total-cache"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/21728","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/users\/529"}],"replies":[{"embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/comments?post=21728"}],"version-history":[{"count":16,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/21728\/revisions"}],"predecessor-version":[{"id":145250,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/21728\/revisions\/145250"}],"wp:attachment":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/media?parent=21728"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/categories?post=21728"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/tags?post=21728"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}