When considering the performance of a web application, speed is the key aspect. In the world of internet where we are having progressive web apps and lightning fast web applications it has become mandatory to keep in mind about the speed of loading of your web app. If you want to standout and compete in your market you have to tune up your app for faster speed.
One of the mechanism to optimize the performance of your web app is enabling the gzip compression. Gzip compression as its name suggests is a compression technology that works at server side.
How gzip compression works ?
When a user requests a site from the server using its browser the server returns the file. Bigger the size of file longer it takes to return the file to the destination and render it on the screen of host machine. Gzip technology compresses the files at server end before sending it to the requesting machine. What gzip do is it looks for the similar strings within a file and replaces them temporarily to reduce the file size by up-to 70%. Files like CSS, HTML, Js contains high amount of repeated text. Gzip replaces that repeated text hence reducing the file size and making it load faster.
Gzip is available on the servers but it has to be enabled by user in order to optimize the performance. The reason it is not enabled by default is that some applications do not require to compress the assets hence server gives the option to either enable it or let it remain disabled.
Whenever a user requests a webpage, the server first checks whether gzip is enabled or not, if it is, it returns the compressed version of file, reducing the latency hence optimizing the performance.
How to enable gzip compression ?
Different servers have different methods to enable gzip compression. In this post I’ve covered the apache server. To enable gzip compression you need to open your .htaccess file. In the file paste the following code –
# Enable Compression
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
</IfModule>
<IfModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</IfModule># Leverage Browser Caching
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg “access 1 year”
ExpiresByType image/jpeg “access 1 year”
ExpiresByType image/gif “access 1 year”
ExpiresByType image/png “access 1 year”
ExpiresByType text/css “access 1 month”
ExpiresByType text/html “access 1 month”
ExpiresByType application/pdf “access 1 month”
ExpiresByType text/x-javascript “access 1 month”
ExpiresByType application/x-shockwave-flash “access 1 month”
ExpiresByType image/x-icon “access 1 year”
ExpiresDefault “access 1 month”
</IfModule>
<IfModule mod_headers.c>
<filesmatch “\.(ico|flv|jpg|jpeg|png|gif|css|swf)$”>
Header set Cache-Control “max-age=2678400, public”
</filesmatch>
<filesmatch “\.(html|htm)$”>
Header set Cache-Control “max-age=7200, private, must-revalidate”
</filesmatch>
<filesmatch “\.(pdf)$”>
Header set Cache-Control “max-age=86400, public”
</filesmatch>
<filesmatch “\.(js)$”>
Header set Cache-Control “max-age=2678400, private”
</filesmatch>
</IfModule>
To check whether the gzip is enabled or not you can log on to GTmetrix to verify. If gzip is enabled, you will get the following result –
