How to enable Gzip Compression and Leverage browser caching in Apache and Nginx

Spread The Love

Enable Gzip Compression and Leverage Browser Caching

To make your website loading faster and improve your page speed score, you have to enable gzip compression and leverage browser caching for all static assets.

What is leverage Browser caching?

Every time, When a user hits your website, It has to download all the content or web files from a server to display the webpage. It includes all css, js, images, videos etc.

Some of the web pages may contain only a few small sized files, But some could have a large number of big sized files and these larger size files take time to download from a server. It leads to the slowness of the website. You can easily enable gzip compression and leverage browser caching via Htaccess in WordPress. You just need to add a piece of code in your Htaccess file.

Enable Gzip Compression and Leverage browser caching using the .htaccess file

Plugins Reviews enable gzip compression and leverage browser caching gzip performance

 ## BEGIN GZIP Compression ##
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
AddOutputFilterByType DEFLATE application/x-httpd-fastphp
AddOutputFilterByType DEFLATE image/svg+xml
SetOutputFilter DEFLATE
</IfModule>
## END GZIP Compression ##
## EXPIRES 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 application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
</IfModule>
## EXPIRES CACHING ##

How to Enable Leverage Browser Caching in WordPress:

Enable Leverage Browser Caching by:

  • Adding Expires Headers
  • Adding Cache-Control Headers
  • Turn off ETags

To set your Expires headers add these lines to your .htaccess:

<ifModule mod_expires.c>
  ExpiresActive On
  ExpiresDefault "access plus 1 seconds"
  ExpiresByType text/html "access plus 1 seconds"
  ExpiresByType image/gif "access plus 2592000 seconds"
  ExpiresByType image/jpeg "access plus 2592000 seconds"
  ExpiresByType image/png "access plus 2592000 seconds"
  ExpiresByType text/css "access plus 604800 seconds"
  ExpiresByType text/javascript "access plus 216000 seconds"
  ExpiresByType application/x-javascript "access plus 216000 seconds"
</ifModule>

Adding Cache-Control Headers:

<ifModule mod_headers.c>
<filesMatch "\.(ico|jpe?g|png|gif|swf)$">
Header set Cache-Control "public"
</filesMatch>
<filesMatch "\.(css)$">
Header set Cache-Control "public"
</filesMatch>
<filesMatch "\.(js)$">
Header set Cache-Control "private"
</filesMatch>
<filesMatch "\.(x?html?|php)$">
Header set Cache-Control "private, must-revalidate"
</filesMatch>
</ifModule>

Turn off ETags:

Header unset ETag
FileETag None

Enable Gzip Compression and Leverage browser caching in nginx Server:

In case of nginx Server, Gzip cannot be enabled automatically in the Nginx servers so you have to enable it manually. 

You need to add the following code into nginx.conf to enable gzip on nginx servers.

gzip on;
gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_buffers 16 8k;
gzip_http_version 1.1;
gzip_types image/svg+xml text/plain text/html text/xml text/css text/javascript application/xml application/xhtml+xml application/rss+xml application/javascript application/x-javascript application/x-font-ttf application/vnd.ms-fontobject font/opentype font/ttf font/eot font/otf;
<ifModule mod_expires.c>
  ExpiresActive On
  ExpiresDefault "access plus 1 seconds"
  ExpiresByType text/html "access plus 1 seconds"
  ExpiresByType image/gif "access plus 2592000 seconds"
  ExpiresByType image/jpeg "access plus 2592000 seconds"
  ExpiresByType image/png "access plus 2592000 seconds"
  ExpiresByType text/css "access plus 604800 seconds"
  ExpiresByType text/javascript "access plus 216000 seconds"
  ExpiresByType application/x-javascript "access plus 216000 seconds"
</ifModule>

I hope you liked my article, don’t forget to share it. you can also like my Facebook Page for WordPress latest updates & don’t forget to subscribe my Newsletter for instant updates. 🙂

  • 15
    Shares

Leave a Comment

Your email address will not be published. Required fields are marked *