gzip .js and .css files with appended version numbers

Question

I've added the following code to my .htaccess file and the gzip is working for all the filenames matched below. The only problem I've run into is any files appended with a version or build number don't become gzipped.

Does anyone know of how I can modify the following code to work with the appended version/build information?

.htaccess code

<IFModule mod_deflate.c>
<filesmatch "\.(js|css|html|jpg|png|php)$">
SetOutputFilter DEFLATE
</filesmatch>
</IFModule>

Example of Revolution Slider JS version number not gzipped

/wp-content/plugins/revslider/public/assets/js/jquery.themepunch.tools.min.js?ver=5.4.7.3 

Example of Cookie Notice CSS version number not gzipped

/wp-content/plugins/cookie-notice/css/front.min.css?ver=ff52705092b5c9e7ebd0f25314174bde

Answer 1

This is a Leverage Browser Caching issue, and to fix this you need to add the following four lines to your .htaccess :

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType application/json "access plus 1 month"
ExpiresByType application/x-javascript "access plus 1 month"
</IfModule>

This will cache any files that have js?ver= within it. If you're looking for a full working Leverage Browser Cache, you can use:

## 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 application/x-javascript "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType application/json "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 2 days"
</IfModule>
## EXPIRES CACHING ##

Improvement on your GZIP code:

## GZIP COMPRESSION ##
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/javascript
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 font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf

This will cover everything. Make sure you clear your cache before testing this.