What is compression
When it comes to generating a page or executing a script, web browsers are not interested in code readability. The Compression removes a code file with all data that is not needed for the file to execute. Unlike traditional compression techniques, minified files do not need to be decompressed before they can be read, modified, or executed.
The Compression is performed after the code for a web application is written, but before the application is deployed. When a user requests a web page, the minified version is sent instead of the full version, resulting in faster response times and lower bandwidth costs. Minification is used on websites ranging from small personal blogs to multi-million user services.
How does compression work?
The Compression works by parsing and rewriting the text-based parts of a website to reduce its overall file size. Minification extends to scripts, Stylesheets and other components used by the web browser to display the website.
A Compression is performed on the web server before a response is sent. After the adjustment, the web server uses the downsized assets instead of the original assets to speed up the distribution to the users.
Here is a step-by-step guide on how to use the Compression works:
- A web developer creates a JavaScript- or CSS file, to be used in a web application. These files are conveniently formatted for the developer, i.e. they use spaces, comments, long variable names and other practices for better readability.
- The developer applies a compression technique (see below) toto convert the file to one that is optimized but harder to read. Common minification techniques include removing spaces, shortening variable names, and replacing verbose functions with shorter, more concise functions.
- The web server uses the reduced file, when responding to web requests, resulting in lower bandwidth usage without compromising functionality.
The advantage of the Compression is that it only needs to be performed when the source file changes. In combination with other compression techniques, miniaturization can significantly reduce bandwidth usage for both the enterprise and the user.
Compression techniques and tools
One of the more comprehensive minification tools is Minify. The so-called Minify takes over the Compression, the Caching and the Compression of CSS, HTML and JavaScript-files. In addition, Minify also offers integration with popular web applications and frameworks such as WordPress and the Zend Framework.
What is HTML compression?
Google offers the extension PageSpeed Insights Chrome, which recommends performance improvements for every website. The tool "PageSpeed Insights" provides a "Minify HTML" rule that creates a smaller version of the opened website.
What is CSS compression?
Since CSS is less likely to be changed frequently, several online tools offer instant CSS-Compression. For example, CSS Minifier is a quick and easy way to compress CSS, while Refresh-SF uses several tools to compress CSS, HTML and JavaScript compress.
What is JavaScript compression?
Google's JavaScript-optimization tool - the Closure Compiler - Creates a more efficient copy of each JavaScript-file. When a developer makes a change to a JavaScript-file, he or she uses the Closure Compilerto compress the code. The new file is transferred to the web server, where it can be accessed using a user's web browser.
Compression advantages
- Users load content fasteras less unnecessary data needs to be downloaded. Users experience an identical service without the extra effort.
- Companies have lower bandwidth costsbecause less data is transmitted over the network. The additional content that is only important to developers is no longer sent to users.
- Companies also have lower resource consumption, since less data needs to be processed for each request. The reduced content - which only needs to be generated once - can be used for an unlimited number of requests.
Data Compression Conclusion
Minification is a quick and easy way to reduce the resource consumption of a web application. Even with standard compression techniques, the Compression improve the time it takes to render a page over 60%. Customizing your website can result in big performance gains without sacrificing usability.
« Back to Glossary Index