How do setup gzip & leverage browser caching properly on Wordpress

May 2, 2014 17k views
tolga640126
By:
tolga640126
Hi, a newbie question, Wordpress on Ubuntu 13.10 one click install. thanks in advance
Log In to Comment
10 Answers
asb MOD May 2, 2014
Did you enable mod_expires and mod_headers? And remember to restart Apache after changing its configuration. Run: 


sudo a2enmod headers

sudo a2enmod expires

service apache2 restart


As for W3, I'm not sure what server side set up you're referring to, but at least for setting up gzip compression it works out of the box on the one-click Wordpress app.
Reply
asb MOD May 2, 2014
The simplest solution is probably to use the W3 Total Cache plugin:

https://wordpress.org/plugins/w3-total-cache/

In the admin panel, go to Plugins -> Add New and search for "w3 cache" and click the install link. Now go to Plugins -> Installed Plugins and click the "activate" link. You should now see a new "Performance" menu in the sidebar of the admin panel. gzip compression should now be enabled. To verify that, go to Performance --> Browser Cache and make sure "Enable HTTP (gzip) compression" is checked. It should look like:

http://i.imgur.com/Ramgb1Y.png

Reply
tolga640126 May 2, 2014
Thanks Andrew! I'll try...
Reply
tolga640126 May 2, 2014
Hi again, w3 is so complex for me, it requires too much thing on server side and i am far from there... i just searched and i found .htaccess modification.

my .htaccess file like this, but browser caching doesn't work.
any advice?
thanks a lot
tolga
-----------------------------------------------------------------------------------
# BEGIN WordPress

RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]


##EXPIRES CACHING##

# Enable expirations
ExpiresActive On
# Default directive
ExpiresDefault "access plus 1 month"
# My favicon
ExpiresByType image/x-icon "access plus 1 year"
# Images
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
# CSS
ExpiresByType text/css "access 1 month"
# Javascript
ExpiresByType application/javascript "access 1 month"



AddType application/x-javascript .js
AddType text/css .css



SetOutputFilter DEFLATE

SetEnvIfNoCase Request_URI \.(?:rar|zip)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI \.(?:gif|jpg|png)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI \.(?:avi|mov|mp4)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI \.mp3$ no-gzip dont-vary


Header append Vary User-Agent env=!dont-vary



# END WordPress
Reply
regalado.joel May 28, 2014
Hi!

I run these three last commands and edited the .htaccess file for my Wordpress installation and now I'm getting a 500 Server Error :( Is there a way to revert this?

Cheers.
Reply
regalado.joel May 28, 2014
Hi again,

I've checked the Apache error log and this is what is causing the problem:

".htaccess expiresactive not allowed here"

I'm trying to find a solution online but can't find clear instructions. Will keep you updated if I finally can solve it.

Thanks.
Reply
kamaln7 MOD May 29, 2014
Try running the following commands: 
sudo a2enmod expires

sudo service apache2 restart
Reply
regalado.joel May 30, 2014
Hi there,

Thanks Kamal for this message. I forgot to add that I finally solved this problem adding 'Indexes' to the "AllowOverride" line in apache2.conf file:


Options FollowSymLinks
AllowOverride FileInfo Indexes


Now it's working fine :) Thanks a lot!

Cheers.
Reply
contact1124306 April 13, 2015

I am having a similar issue here. I have Ubuntu 14.04 with wordpress, apache2, mysql (the default wordpress application image from DO). Do I also need to add AllowOverride Indexes? If so where? I have many places where AllowOverride appears in my apache2.conf.

I am still getting this from google pagespeed:

Leverage browser caching
Setting an expiry date or a maximum age in the HTTP headers for static resources instructs the browser to load previously downloaded resources from local disk rather than over the network.

http://platform.twitter.com/widgets.js (30 minutes)
.../media/js/count.js?ver=4.1.1 (2 days)
.../jetpack/modules/wpgroho.js?ver=4.1.1 (2 days)
.../plugins/monarch/js/custom.js?ver=1.2 (2 days)
.../monarch/js/idle-timer.min.js?ver=1.2 (2 days)
.../powerpress/player.min.js?ver=4.1.1 (2 days)
.../fontawesome-webfont.woff?v=4.2.0 (2 days)
.../fonts/titillium-light-webfont.svg (2 days)
.../fonts/titillium-light-webfont.woff (2 days)
.../fonts/titillium-regular-webfont.svg (2 days)
.../fonts/titillium-regular-webfont.woff (2 days)

Here is the config I put at hte bottom of my apache2.conf (yes expires and headers mods are enabled):

## 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 week"
ExpiresByType application/pdf "access 1 week"
ExpiresByType text/x-javascript "access 1 week"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 month"
ExpiresDefault "access 2 days"
</IfModule>
## EXPIRES CACHING ##

What am I missing? tools.pingdom.com also gives me a terrible score for "leverage browser caching"

Reply
ermdashraf February 22, 2016
[deleted]
Reply
Have another answer? Share your knowledge.