htaccess for Leverage browser caching not working

Question

I am having issues with Leverage browser caching. I have created this .htaccess file and am using it on my server but it doesnt appear to be working, i copied this from here "http://www.samaxes.com/2011/05/improving-web-performance-with-apache-and-htaccess/". I am most likly making a basic mistake so any help would be nice. here are some details. I am working on a subdomain lets call it "sub" and the main domain "example". so i want everything in http://sub.example.com/ for the htaccess file to work on. on my server i placed the .htaccess file in sub's main directory which is seperate to the main one for example.

I am running an apache2 server with both mod_headers and mod_expires enabled also.

Cheers.

<ifModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/xml text/css text/plain
AddOutputFilterByType DEFLATE image/svg+xml application/xhtml+xml application/xml
AddOutputFilterByType DEFLATE application/rdf+xml application/rss+xml application/atom+xml
AddOutputFilterByType DEFLATE text/javascript application/javascript application/x-javascript application/json
AddOutputFilterByType DEFLATE application/x-font-ttf application/x-font-otf
AddOutputFilterByType DEFLATE font/truetype font/opentype
</ifModule>
<ifModule mod_expires.c>
 ExpiresActive On
 ExpiresDefault "access plus 5 seconds"
 ExpiresByType image/x-icon "access plus 2592000 seconds"
 ExpiresByType image/jpeg "access plus 2592000 seconds"
 ExpiresByType image/png "access plus 2592000 seconds"
 ExpiresByType image/gif "access plus 2592000 seconds"
 ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
 ExpiresByType text/css "access plus 604800 seconds"
 ExpiresByType text/javascript "access plus 216000 seconds"
 ExpiresByType application/javascript "access plus 216000 seconds"
 ExpiresByType application/x-javascript "access plus 216000 seconds"
 ExpiresByType text/html "access plus 600 seconds"
 ExpiresByType application/xhtml+xml "access plus 600 seconds"
 </ifModule>
 <filesMatch "\\.(ico|pdf|flv|jpg|jpeg|png|gif|swf|mp3|mp4)$">
 Header set Cache-Control "max-age=2592000, private"
 Header set Expires "Sun, 17 July 2013 20:00:00 GMT"
 </filesMatch>
 <filesMatch "\\.(css|css.gz)$">
 Header set Cache-Control "max-age=604800, private" 
 </filesMatch>
 <filesMatch "\\.(js|js.gz)$">
 Header set Cache-Control "max-age=604800, private"
 </filesMatch>
 <filesMatch "\\.(xml|txt)$">
 Header set Cache-Control "max-age=216000, private, must-revalidate"
 </filesMatch>
 <filesMatch "\\.(html|htm)$">
 Header set Cache-Control "max-age=7200, private, must-revalidate"
 </filesMatch>
 FileETag None

Solution

looks very messy.

You also have redundant rules like

ExpiresByType application/javascript "access plus 216000 seconds"

and

<filesMatch "\\.(js|js.gz)$">
Header set Cache-Control "max-age=604800, private"
</filesMatch>

Try using the cleaner (and up to date) rules from the html5-boilerplate or checkout all the h5bp server configs