Ok Angus, you can try adding problem CSS/JS to “Ignore List” on the “Pro” tab.
As for the gzip and brotli compression, see below for my crafted htaccess directives which are the best I have seen!
Add them to htaccess before the WordPress default and caching directives.
These directives (incl cache control) will serve compressed css,js and html files, in this order:
– Precompressed Brotli (if file exists and clients accepts)
– Precompressed Gzip (if file exists and clients accepts)
– On-the-fly Compressed Brotli (if server enabled and clients accepts)
– On-the-fly Compressed Gzip (if server enabled and clients accepts)
– Uncompressed (if client does not accept compressed file format)
# ===== BEGIN BROTLI =====
# BROTLI Dynamic - Server Generated on-the-fly
<ifmodule mod_brotli.c>
AddOutputFilterByType BROTLI_COMPRESS text/html text/css text/javascript text/plain application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss
</ifmodule>
<IfModule mod_headers.c>
# BROTLI Static - Precompressed
# Serve Brotli compressed HTML, CSS and JS files if they exist and the client accepts brotli.
RewriteCond "%{HTTP:Accept-encoding}" "br"
RewriteCond "%{REQUEST_FILENAME}\.br" "-s"
RewriteRule "^(.*)\.(html|js|css)" "$1\.$2\.br" [QSA]
# Serve correct content types, and prevent double compression.
RewriteRule "\.html\.br$" "-" [T=text/html,E=no-brotli:1,E=no-gzip:1]
RewriteRule "\.css\.br$" "-" [T=text/css,E=no-brotli:1,E=no-gzip:1]
RewriteRule "\.js\.br$" "-" [T=text/javascript,E=no-brotli:1,E=no-gzip:1]
<FilesMatch "(\.html\.br|\.js\.br|\.css\.br)$">
# Serve correct encoding type.
Header append Content-Encoding br
# Force proxies to cache compressed/uncompressed files separately
Header append Vary Accept-Encoding
</FilesMatch>
<FilesMatch "(\.js\.br|\.css\.br)$">
# Cache Control and Enable CORS
ExpiresActive On
ExpiresDefault "access plus 1 month"
Header set Cache-Control "public, immutable, max-age=2628000, s-maxage=2628000"
Header set Access-Control-Allow-Origin "*"
</FilesMatch>
</IfModule>
# ===== END BROTLI =====
# ===== BEGIN GZIP =====
# GZIP Dynamic - Server Generated on-the-fly
<ifmodule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/css text/javascript text/plain application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss
</ifmodule>
# GZIP Static - Precompressed
<IfModule mod_headers.c>
# Serve gzip compressed CSS and JS files if they exist and the client accepts gzip.
RewriteCond "%{HTTP:Accept-encoding}" "gzip" [OR]
RewriteCond "%{HTTP:Accept-encoding}" "deflate"
RewriteCond "%{REQUEST_FILENAME}\.gz" -s
RewriteRule "^(.*)\.(html|js|css)" "$1\.$2\.gz" [QSA]
# Serve correct content types, and prevent double compression.
RewriteRule "\.html\.gz$" "-" [T=text/html,E=no-gzip:1,E=no-brotli:1]
RewriteRule "\.css\.gz$" "-" [T=text/css,E=no-gzip:1,E=no-brotli:1]
RewriteRule "\.js\.gz$" "-" [T=text/javascript,E=no-gzip:1,E=no-brotli:1]
<FilesMatch "(\.html\.gz|\.js\.gz|\.css\.gz)$">
# Serve correct encoding type.
Header append Content-Encoding gzip
# Force proxies to cache compressed/uncompressed files separately
Header append Vary Accept-Encoding
</FilesMatch>
<FilesMatch "(\.js\.gz|\.css\.gz)$">
# Cache Control and Enable CORS
ExpiresActive On
ExpiresDefault "access plus 1 month"
Header set Cache-Control "public, immutable, max-age=2628000, s-maxage=2628000"
Header set Access-Control-Allow-Origin "*"
</FilesMatch>
</IfModule>
# ===== END GZIP =====
