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

Your filematch expression ends with "css" or with "js". The URL with the "ver" (version) parameter is for preventing the file from the cache. Add the application types. — RobSky
– RobSky, Commented Aug 5, 2018 at 20:43

Joe · Accepted Answer · 2018-08-06 07:56:10Z

3

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.

edited Aug 6, 2018 at 7:56

answered Aug 5, 2018 at 20:19

Joe

4,9175 gold badges34 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Matt Seligman Over a year ago

If I used this method would I need to change the code when updating a css file for example. Say I update style.css?v=1 or something and i've got the text/css "access plus 1 month" would I need to change that to "1 day" or something to force the expiration and reloading of that file? (Some visitors aren't even aware of cache and never clear them)

Joe Over a year ago

Hi Matt. Yes, that's correct. You can also force cache revalidation through .htaccess once you've made a change without making a change to that. I can add that code to this answer if you'd like me to? But either method should work.

Matt Seligman Over a year ago

It seems when applying this the GTMetrix Scan still suggests I apply GZip compression to all of the files mentioning a version or build, does this require server restarting?

Joe Over a year ago

Hi Matt, you need to use both GZIP and Leverage Browser Caching. This leads me to believe that what you're using for GZIP is also not efficient enough. See my edit where I've included a number of things to add to your GZIP, this should then fix the issue.

Collectives™ on Stack Overflow

gzip .js and .css files with appended version numbers

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related