gzip .js and .css files with appended version numbers

158
August 06, 2018, at 7:00 PM

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.

Rent Charter Buses Company
READ ALSO
Remove a div in AMP-Animation on scroll down

Remove a div in AMP-Animation on scroll down

Help required from people working on Google-AMP

206
How to fast-load YouTube embeds keeping 1-click play on mobile phones also?

How to fast-load YouTube embeds keeping 1-click play on mobile phones also?

Embed codes like Labnol's described in this answer, require 2 clicks to play the embedded video from mobile phones, as Labnol clarifies from the start

139
How to set max_nesting_level without using xdebug?

How to set max_nesting_level without using xdebug?

The problem is, I want my production server to throw an error to https://sentryio/ if there is an error because of nesting level more than x step

171
MAGENTO : Wrong attribute group ID

MAGENTO : Wrong attribute group ID

I need some help how can I solve this error, im installing the extension ERP

165