Tired of seeing a different file size of your JavaScript, HTML and CSS in your local development environment to the production server? You may consider to enable the Gzip compression (that should be available and enabled on every webserver) in Xampp to, so you won't have headaches when you think about the real size of your applications.
In this article we'll show you how to enable the gzip compression in your local Xampp server.
Before continue
To see with your own eyes the change of compression, we recommend you to take a screenshot of the network tab of your browser to see the total size of your assets. In our example, the network screenshot of chrome is the following:
318 KB were downloaded without Gzip compression. Having said that, let's get started !
1. Modify php.ini
The first you need to do is to enable the compression feature of zlib. The zlib extension offers the option to transparently compress your pages on-the-fly, if the requesting browser supports this.
Open your php.ini file (xampp/php/php.ini) and proceed to change the value of the zlib.output_compression option. This property is probably set to Off, so be sure to set its value to On to make the gzip compression available:
; Transparent output compression using the zlib library
; Valid values for this option are 'off', 'on', or a specific buffer size
; to be used for compression (default is 4KB)
; Note: Resulting chunk size may vary due to nature of compression. PHP
; outputs chunks that are few hundreds bytes each as a result of
; compression. If you prefer a larger chunk size for better
; performance, enable output_buffering in addition.
; Note: You need to use zlib.output_handler instead of the standard
; output_handler, or otherwise the output will be corrupted.
; http://php.net/zlib.output-compression
zlib.output_compression=OnSave changes and proceed to modify the httpd.conf file.
2. Modify httpd.conf file
Apache HTTP Server is configured by placing directives in plain text configuration files. The main configuration file is usually called httpd.conf. The location of this file is usually at /xampp/apache/conf/httpd.conf, so open it and uncomment the mod_deflate.so and mod_filter.so extensions by removing any # at the beginning of the line:
# Enable deflate and filter with the following pattern
# LoadModule <action> <file>
# Note that according to your OS, the <action> may change
# so be sure that modules/mod_deflate.so and modules/mod_filter.so
# are uncommented !
LoadModule deflate_module modules/mod_deflate.so
LoadModule filter_module modules/mod_filter.soOnce these lines are uncommented, you will now need to add the following block to the end of the httpd.conf file. This block specifies which directories of xampp should be served using the gzip compression. Tipically, you should apply that to all the htdocs folder content, however it's up to you:
SetOutputFilter DEFLATE
# Set the path to the directory where you wish to apply the gzip compression
# Usually you would like to apply that to the entire htdocs folder, but you can change it
<Directory "C:/xampp/htdocs">
<IfModule mod_deflate.c>
# Add any file type you want
AddOutputFilterByType DEFLATE text/html
</IfModule>
</Directory> Save changes and restart all the services with the Control Panel of Xampp and access your projects in the browser. Now you should see a decrease in the size of every file (you can compare them with the initial screenshot):
Now the total size decreased from 318KB to only 112 KB.
Happy coding !
