Fix ‘Leverage Browser Caching’ and ‘Enable Compression’ with htaccess File

I was working on a WordPress site where I needed to improve caching and more importantly Google Page Speed score. Site was on shared hosting and I was using WP Super Cache plugin to cache hits and all the stuff. But when I ran PageSpeed test on the site, it keeps giving me red lights to ‘Leverage Browser Caching’ and ‘Enable Compression’.

Although I had WP Super Cache ‘well’ configured, it doesn’t seem to be helping to enable browser caching and compression. After trying for few minutes, I finally decided to handle it with htaccess file. If you ever in a situation like this, it’s lot easier to handle it with htaccess file rather than messing with WP Super Cache configurations.

What Is htaccess File?

According to Wikipedia,

A .htaccess (hypertext access) file is a directory-level configuration file supported by several web servers, that allows for decentralized management of web server configuration. They are placed inside the web tree, and are able to override a subset of the server’s global configuration for the directory that they are in, and all sub-directories.

So we’ll be editing htaccess file inside your WordPress website’s root directory, same directory with wp-config.php file. Make sure there’s a full stop (.) before the file name. It simply means that the file is hidden. It’s a Linux thing. Connect to your server and open the .htaccess file with a text editor. Make a backup of that file and then make following changes to it.

Leverage Browser Caching with .htaccess

We’re simply going to set expire headers on some static files so the browser don’t have to download same file each time page is loaded. It enables browser caching and reduces the number of HTTP requests sent to server. Append your .htaccess file with following code. You can make changes to the file as necessary. This is the one I used.

[text]## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 2 days"
</IfModule>
## EXPIRES CACHING ##[/text]

As you can see, I’ve set images to expire in 1 year and CSS, PDF, Flash and JavaScript to 1 month. You can play with these settings as you want.

Enabling Compression with .htaccess

With following code on htaccess file, we’ll be enabling Gzip compression on the server. It’ll reduce the size of HTTP response. Almost all web browsers claim to support it. Add following code at the end of .htaccess file to enable compression.

[text]## BEGIN GZIP ##
<ifmodule mod_deflate.c>
AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript
</ifmodule>
## END GZIP ##[/text]

Please note that mod_deflate.c must be enabled on the server for this to work. Contact your hosting provider and ask them to enable it if not. I was working on HostGator shared hosting and they have mod_deflate.c enabled on all their shared servers.

Finally delete all cache and run the Google PageSpeed test again. You should see green lights for Leverage Browser Caching and Enable Compression.