Why isn't Leverage browser caching not working for Javascript?

Question

When running my site through the Google page speed test it says I need "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."

It then lists my internal Javascript files, why does the below not work and fix this?

This is how much htaccess file looks:

## 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 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>
## EXPIRES CACHING ##

<FilesMatch "\\.(js|css|html|htm|php|xml)$">
SetOutputFilter DEFLATE
</FilesMatch>

<IfModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file \.(html?|txt|css|js|php|pl|jpg|png|gif)$
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>

Thanks

Answer 1

The official mime-type for Javascript is application/javascript , try this instead.

Source http://www.rfc-editor.org/rfc/rfc4329.txt

The x- stands for "experimental" and is not used with Javascripts anymore.

All of those combinations are either deprecated, obsolete or outdated:

text/x-javascript
text/javascript
application/x-javascript
application/ecmascript

There are more wrong mime-types in your config:

Wrong: image/x-icon Right: image/vnd.microsoft.icon

Source: http://www.iana.org/assignments/media-types/image/vnd.microsoft.icon

Wrong: application/x-pdf Right: application/pdf

Source: https://tools.ietf.org/html/rfc3778

Answer 2

You have specified that files of type text/x-javascript should be cacheable, but have you told the webserver how to recognise such files? As DanFromGermany says, the mimetype really should be application/javascript however within your webserver this is just an arbitrary label. Your webserver may already be configured to recognise files ending in .js as javascript, in which case its simply a matter of changing the corresponding line in the mod_expires block. You can see the mimetype being returned by webserver in firebug, iehttpheaders, using wireshark to monitor a connection or with wget / curl from the command line.

If your webserver is returning something other than application/javascript or text/x-javascript then check for an entry in the mime.types file in the directory containing your apache config.

Answer 3

Check your hosting configuration. I was using Cpanel's "SuperCacher services": static cache Dynamic cache Memcache

they were overriding my .htaccess settings and caused this issue. once i disabled them the issue went away.