In an increasingly developing era, customer experience is one of the most powerful and efficient strategies that can be developed by someone to improve their business. In this discussion, we will focus on providing the fastest possible customer experience, i.e. with faster page loads.
According to Google research, about 40% of people leave a website that takes 3 seconds to load and a 1 second delay in page response, which can result in a 7% reduction in conversions.
So that the websites we use can be loaded or accessed more quickly, a file compression tool is needed because we know that every second is important. Therefore we need to save about 2.5 seconds (90th percentile) and 1.2 seconds (50th percentile) by using Brotli compression.
What is Brotli?
 |
| What is Brotli? |
Brotli is a compression algorithm developed by Google for website optimization. Brotli works best for compressing a single text, the reason being Brotli uses a dictionary of keywords and common phrases on the client and server side thus providing a better compression ratio. Brotli is supported by all major browsers as you can see in the image below:
In order for the browser to take full advantage of using Brotli, you have to build support into the browser. Because Brotli is basically a compression algorithm with the number LZ77, where the algorithm number is also used by gzip. Before Brotli was as familiar as it is now, Brotli was only used to compress a font or text. But now Brotli is widely used for data in the form of text.
The history of Brotli's emergence began in 2013. In that year, Brotli was launched for offline compression of website fonts or writing. Then in 2015, Google launched another version for Brotli, namely Lossless Generic data compression. This is because the use of Brotli is specifically for compressing HTTP.
Therefore, Brotli can be said to be an open source where its lossless data compression algorithm contains a better compression density when compared to gzip. Where this can reduce consumption of data transfer or bandwidth and can help load website content faster. This is why you have to apply it to your website.
Brotli is an open source, lossless data compression algorithm with better compression density than gzip which reduces bandwidth consumption and helps load content faster. This is why you should use it.
Brotli advantages for websites
Brotli is designed for text compression and can reduce file sizes by about 20%-30% smaller than gzip. Its encoding speed is indeed slower than gzip (depending on the quality setting), but its decoding speed is arguably on par with gzip.
1. Supports various browsers
One of Brotli's advantages is that almost all browsers support this compression algorithm. To ensure whether the browser you are using supports Brotli, you can check the settings of the browser you are using. Generally, the majority of browsers that are widely used today support Brotli, such as the desktop browser Chrome to mobile browsers such as Opera Mini.
2. Faster compression
Another advantage of Brotli is that it can perform compression faster. When compared to other compression algorithms, Brotli is one of the fastest to perform compression. This has also been proven by several tests that have been carried out by various parties.
3. Relatively smaller compression results
In addition to being superior in terms of faster compression time, Brotli also produces smaller compression files. This means that Brotli's compression results are relatively better than other compression algorithms.
What is the difference between Brotli, Zopfli and gzip?
LinkedIn is one of the websites that has implemented Brotli. LinkedIn itself has benchmarked the performance between Brotli, Zopfli, and gzip on a JavaScript file on the LinkedIn homepage. They found that brotli -11 helps reduce file size by 30% more than gzip -6. The decompression speed itself is faster than gzip and Zopfli.
To test further, LinkedIn also conducted A/B Testing. LinkedIn arranged for 50% of LinkedIn members to get the use of brotli whenever possible. While the other 50% did not get it. LinkedIn then compared the initial feed page loading time for the 90th percentile.
LinkedIn saw a 2-3.6% increase in site speed in the US, and a 6-6.5% increase in India. Brotli offers better results for low-bandwidth clients.
LinkedIn itself saw a bigger increase in India than the US. Additionally, mobile users also saw a speed increase compared to those using desktop.
This number is still likely to grow because the penetration rate is not 100%. Not everyone who was redirected to the Brotli experiment was using a browser that supports it.
Brotli can only help speed up the process of downloading content. To better understand how the process of downloading content contributes to the overall time to load a website page, LinkedIn used Chrome dev tools to break down the timeline into CPU processing categories.
For JavaScript-heavy applications, like LinkedIn’s main website built with Ember.js, Brotli isn’t the only thing that can help solve all your website speed issues. Slow networks, like 3G, are one place where you can really see the benefits of using Brotli.
The process of downloading content alone accounts for ~80% of a page’s loading time (the “empty” part of the pie chart where the CPU is waiting for JavaScript to download). For fast networks like cable, the main bottleneck is usually the CPU evaluating and executing JavaScript (the “scripting” part of the pie chart) to render the page, not the network bandwidth.
LinkedIn’s experiments have shown that using Brotli for static content has seen impressive speed improvements, especially for users from low-bandwidth areas. LinkedIn also believes that Brotli has a lot of potential and encourages every website owner to start using it.
Brotli is considered to be able to help improve the user experience so that visitors to your website want to come and return to your website. With the launch of new browsers and the increase in users to newer browsers, you will see that this algorithm can help increase website traffic.
What is Brotli support?
Browsers that support Brotli will send 'br' in the main request receiving-encoding. If Brotli is enabled on your website server, you will get response in Brotli compressed format.
According to the Caniuse.com website, Brotli is supported by more than 90% of users, where all well-known browser websites already support Brotli's compression algorithm such as: Google Chrome, Mozilla Firefox, Microsoft Edge and Safari. Unfortunately, only Internet Explorer doesn't support Brotli, but during configuration, you can configure your web server to support partial pairing as gzip does.
How Does the Brotli System Work?
In compressing data, can the Brotli system work effectively? So to find out, let's learn more about how Brotli's work system works!
- Users access website applications or websites through a browser running on a server that supports Brotli
- When the user accesses the application or website, the browser will automatically notify the server about what types of content can be compressed using a request format such as the Accept-Encoding Header.
- The server receives the request, then determines which content types need to be compressed.
- After that the server informs the browser about the results and the method it uses via content-encoding
- Then the browser will restore files or data from zip or rar form into separate files or data (decompression) before displaying on the website page.
What are the disadvantages of Brotli?
As we all know, all compression systems have the same goal, which is to make a website accessible faster. With a more efficient data transfer process, the website page loading process will be faster and you don't have to wait a very long time.
What advantages make Brotli very special when compared to other compression systems? Here are some of them:
1. Access Website Pages Faster
When your website data has been compressed to a smaller size, of course you only need less bandwidth or data transfer to load right? The smaller the consumption of bandwidth or data transfer used, the faster accessing web pages will be. That way, your website will later find it easier to rank highest in Google search results (SERP).
2. Better User Experience
With the Brotli system that can help compress website data so that websites can be more easily accessed, it means that users who have tried it immediately will also be happy. Because basically, every company wants the website they manage to work better, be accessed faster and be able to provide an even better user experience.
3. Browser Support
As we explained earlier, that Brotli was initially not supported by most browsers, because the system was considered to be quite complicated. But now the system is changing for the better, so that many browsers have embedded the Brotli system and it can be run easily by its users.
How do I know if a site uses Brotli?
It is quite easy to check Brotli support from a browser. In this example we will use Firefox. The first step, you can open the Application Menu button in the upper right corner, then select More Tools > Web Developer Tools.
In addition to the browser, the server you are targeting must also support compression using Brotli. So, make sure your hosting service uses a server that supports Brotli.
One of the servers that supports Brotli by default is LiteSpeed Server. Erzedka users can enjoy all the advantages of Brotli, because the Erzedka hosting package already uses the LiteSpeed server with Brotli Enabled. This means that the access speed of your website will be more guaranteed.
To prove Brotli support on your website, please enter the URL of your website into the Brotli Test tool from KeyCDN.
If the results in the green column show "Brotli compression is supported", it means that Brotli compression can run well.
Why is Brotli better than gzip?
After knowing the advantages of this Brotli system, of course you know the reasons why you should use this Brotli. Yes, as we all know, Brotli is more effective and efficient than Gzip.
The reason is because with less data or files being transferred, you can reduce the time it takes to deliver data from the sender to the recipient and reduce the budget spent on the CDN (Content Delivery Network). Of course, by installing Brotli on your browser, there is an increase in file size such as:
- JavaScript : increased compression value is smaller than gzip by 14%
- CSS : increased compression value smaller than gzip by 17%
- HTML: smaller compression value increase than gzip by 21%
But what you need to know, Brotli is only used to compress files in text form only. So if you have a file in .JPG or .MP4 format, this type of format doesn't need to be compressed by Brotli because it already has its own or built-in compression system.
Conclusion
When digital technology has become endemic in various parts of the world, it does not only provide convenience, but digital technology must be able to increase comfort for users who use it, for example the ease and convenience of accessing websites. One of the newest digital technologies that can play this very good role is a compression system called Brotli.
When you use Brotli, the process of accessing your website will be faster than usual. Of course, this will make your website visitors feel happy because they no longer have to wait a long time to access page after page on your website.
In order for the Brotli system to run effectively, the main thing you need to do is use a browser that supports the Brotli system and server for your website.