Nginx Google PageSpeed Insight shows garbled text when setup with Brotli compression

Please fill in any relevant information that applies to you:

• CentOS Version: CentOS 7 64bit
• Centmin Mod Version Installed:123.09beta01
• Nginx Version Installed: i.e. 1.13.2
• PHP Version Installed: i.e. 7.1.7
• MariaDB MySQL Version Installed: 10.0.24
• When was last time updated Centmin Mod code base ? : Most recent
• 
  I recently upgraded nginx with brotli compression enabled. Everything works well and can confirm file size is lesser when doing webpagetest.org from original without brotli compression. However, when I test the site with Google PageSpeed Insight, the preview on both desktop and mobile is just plain text. Is that normal? Something wrong with the google test? Anyone else experienced this? Site displays correctly on all browsers. Site is wordpress created using option 22.

 

Sorry I chose the wrong tag "Nginx PageSpeed", I'm not actually using ngx_pagespeed. I thought it meant the Google PageSpeed test! I hope the tag can be removed to avoid confusion.

We'll anyway, I've found out what was causing the issue. I am not using any of the free caching plugins that comes with Centmin mod, I am using WP Rocket which I'm quite happy with coming from previous Debian installation. I modified the default conf file a bit to suit what I think should be for another caching plugin.

I also installed the optional rocket-nginx config (GitHub - maximejobin/rocket-nginx: Nginx configuration for WP-Rocket) created by one WP Rocket user Maxime Jobin. It's not an official WP Rocket config so users use it at their own risk. WP Rocket cache works without it. It's supposed to bypass Wordpress to allow files to be served directly by nginx, fetching from the cached flies (which are mostly gzipped already). When the configuration was included, that caused the garbled text in Google PageSpeed test. I also tried it on Think with Google Mobile Test and got the same results.

So when I commented it out, pagespeed test looked normal. What is strange though is that even if it is active, the website loads fine (Chrome, Safari, Firefox, etc.) and actually loads fast. It's only with google pagespeed test that I see those garbled text not in real browsers. Still makes me worry though.

I've pasted my current config, modified hopefully correctly:

Code:

#x# HTTPS-DEFAULT
 server {
  
   server_name example.com www.example.com;
   return 301 https://www.example.com$request_uri;
   include /usr/local/nginx/conf/staticfiles.conf;
 }

server {
  listen 443 ssl http2;
  server_name example.com www.example.com;

  set $redirect_var 0; 
  if ($host = 'example.com') { 
    set $redirect_var 1; 
  }
  if ($redirect_var = 1) { 
    return 301 https://www.example.com$request_uri; 
  }   

  include /usr/local/nginx/conf/ssl/example.com/example.com.crt.key.conf;
  include /usr/local/nginx/conf/ssl_include.conf;

  http2_max_field_size 16k;
  http2_max_header_size 32k;
  # mozilla recommended
  ssl_ciphers EECDH+CHACHA20:EECDH+CHACHA20-draft:EECDH+ECDSA+AESGCM:EECDH+aRSA+AESGCM:EECDH+ECDSA+SHA256:EECDH+ECDSA+SHA384:EECDH+aRSA+SHA256:EECDH+aRSA+SHA384:EECDH+AES128:!aNULL:!eNULL:!LOW:!3DES:!MD5:!EXP:!PSK:!SRP:!DSS:!RC4:!EDH-DSS-DES-CBC3-SHA:!EDH-RSA-DES-CBC3-SHA:!KRB5-DES-CBC3-SHA:!CAMELLIA;

  ssl_prefer_server_ciphers   on;
  #add_header Alternate-Protocol  443:npn-spdy/3;

  # before enabling HSTS line below read centminmod.com/nginx_domain_dns_setup.html#hsts
  #add_header Strict-Transport-Security "max-age=31536000; includeSubdomains;";
  #add_header X-Frame-Options SAMEORIGIN;
  #add_header X-Xss-Protection "1; mode=block" always;
  #add_header X-Content-Type-Options "nosniff" always;
  #spdy_headers_comp 5;
  ssl_buffer_size 1369;
  ssl_session_tickets on;
 
  # enable ocsp stapling
  resolver 8.8.8.8 8.8.4.4 valid=10m;
  resolver_timeout 10s;
  ssl_stapling on;
  ssl_stapling_verify on;

# ngx_pagespeed & ngx_pagespeed handler
#include /usr/local/nginx/conf/pagespeed.conf;
#include /usr/local/nginx/conf/pagespeedhandler.conf;
#include /usr/local/nginx/conf/pagespeedstatslog.conf;

  #add_header X-Frame-Options SAMEORIGIN;
  #add_header X-Xss-Protection "1; mode=block" always;
  #add_header X-Content-Type-Options "nosniff" always;

  # limit_conn limit_per_ip 16;
  # ssi  on;

  access_log /home/nginx/domains/example.com/log/access.log combined buffer=256k flush=5m;
  error_log /home/nginx/domains/example.com/log/error.log;

  include /usr/local/nginx/conf/autoprotect/example.com/autoprotect-example.com.conf;
  root /home/nginx/domains/example.com/public;
  # uncomment cloudflare.conf include if using cloudflare for
  # server and/or vhost site
  #include /usr/local/nginx/conf/cloudflare.conf;
  include /usr/local/nginx/conf/503include-main.conf;

  #include /usr/local/nginx/conf/wpincludes/example.com/wpcacheenabler_example.com.conf;
  #include /usr/local/nginx/conf/wpincludes/example.com/wpsupercache_example.com.conf;
  # https://community.centminmod.com/posts/18828/
  #include /usr/local/nginx/conf/wpincludes/example.com/rediscache_example.com.conf; 

  location / {
  include /usr/local/nginx/conf/503include-only.conf;
 

  # Enables directory listings when index file not found
  #autoindex  on;

  # for wordpress super cache plugin
  #try_files /wp-content/cache/supercache/$http_host/$cache_uri/index.html $uri $uri/ /index.php?q=$uri&$args;

  # for wp cache enabler plugin
  #try_files $cache_enabler_uri $uri $uri/ $custom_subdir/index.php?$args; 

  # Wordpress Permalinks
  try_files $uri $uri/ /index.php?q=$uri&$args;

  # Nginx level redis Wordpress
  # https://community.centminmod.com/posts/18828/
  #try_files $uri $uri/ /index.php?$args;

  }

location ~* /(wp-login\.php) {
    limit_req zone=xwplogin burst=1 nodelay;
    #limit_conn xwpconlimit 30;
    auth_basic "Private";
    #auth_basic_user_file /home/nginx/domains/example.com/htpasswd_wplogin;   
    include /usr/local/nginx/conf/php.conf;
    
    # https://community.centminmod.com/posts/18828/
    #include /usr/local/nginx/conf/php-rediscache.conf;
}

location ~* /(xmlrpc\.php) {
    limit_req zone=xwprpc burst=45 nodelay;
    #limit_conn xwpconlimit 30;
    include /usr/local/nginx/conf/php-wpsc.conf;
    
    # https://community.centminmod.com/posts/18828/
    #include /usr/local/nginx/conf/php-rediscache.conf;
}

  #include /usr/local/nginx/conf/wpincludes/example.com/wpsecure_example.com.conf;
  include /usr/local/nginx/conf/php.conf;
 
  # https://community.centminmod.com/posts/18828/
  #include /usr/local/nginx/conf/php-rediscache.conf;
  include /usr/local/nginx/conf/pre-staticfiles-local-example.com.conf;
  include /usr/local/nginx/conf/pre-staticfiles-global.conf;
  include /usr/local/nginx/conf/staticfiles.conf;
  include /usr/local/nginx/conf/drop.conf;
  #include /usr/local/nginx/conf/errorpage.conf;
  include /usr/local/nginx/conf/vts_server.conf;
  include /usr/local/nginx/conf/rocket-nginx/default.conf;
}

And here's the content of /usr/local/nginx/conf/rocket-nginx/default.conf:

Code:

###################################################################################################
# Rocket-Nginx
#
# Rocket-Nginx is a NGINX configuration to speedup your WordPress
# website with the cache plugin WP-Rocket (http://wp-rocket.me)
#
# Author: Maxime Jobin
# URL: https://github.com/maximejobin/rocket-nginx
#
# Tested with WP-Rocket version: 2.9.11
# Tested with NGINX: 1.11.13 (mainline)
#
# Version 2.0
#
###################################################################################################

# Add debug information into header
set $rocket_debug 0;


###################################################################################################
# Do not alter theses values
#
set $rocket_bypass 1;                # Should NGINX bypass WordPress and call cache file directly ?
set $rocket_encryption "";            # Is GZIP accepted by client ?
set $rocket_file "";                # Filename to use
set $rocket_is_bypassed "No";        # Header text added to check if the bypass worked or not. Header: X-Rocket-Nginx-Serving-Static
set $rocket_reason "";                # Reason why cache file was not used. If cache file is used, what file was used
set $rocket_https_prefix "";        # HTTPS prefix to use when cached files are using HTTPS
set $rocket_hsts 0;                    # Is HSTS is off (0) by default. Will be turned on (1) if request is HTTPS

# HSTS value
set $rocket_hsts_value "max-age=31536000; includeSubDomains";

###################################################################################################
# PAGE CACHE
#

# Is GZIP accepted by client ?
if ($http_accept_encoding ~ gzip) {
    set $rocket_encryption "_gzip";
}

# Is SSL request ?
if ($https = "on") {
    set $rocket_https_prefix "-https";
    set $rocket_hsts 1;
}

# If HSTS is disabled, unset HSTS set for Rocket-Nginx configuration
if ($rocket_hsts = "0") {
    set $rocket_hsts_value "";
}

# File/URL to return IF we must bypass WordPress
# Desktop: index.html or index-https.html
# Mobile:  index-mobile.html or index-mobile-https.html
set $rocket_end "/cache/wp-rocket/$http_host/$request_uri/index$rocket_https_prefix.html$rocket_encryption";
set $rocket_url "/wp-content$rocket_end";
set $rocket_file "$document_root/wp-content$rocket_end";
set $rocket_mobile_detection "$document_root/wp-content/cache/wp-rocket/$http_host/$request_uri/.mobile-active";


# Do not bypass if it's a POST request
if ($request_method = POST) {
    set $rocket_bypass 0;
    set $rocket_reason "POST request";
}

# Do not bypass if arguments are found (e.g. ?page=2)
if ($is_args) {
    set $rocket_bypass 0;
    set $rocket_reason "Arguments found";
}

# Do not bypass if the site is in maintenance mode
if (-f "$document_root/.maintenance") {
    set $rocket_bypass 0;
    set $rocket_reason "Maintenance mode";
}

# Do not bypass if one of those cookie if found
# wordpress_logged_in_[hash] : When a user is logged in, this cookie is created (we'd rather let WP-Rocket handle that)
# wp-postpass_[hash] : When a protected post requires a password, this cookie is created.
if ($http_cookie ~* "(wordpress_logged_in_|wp\-postpass_|woocommerce_items_in_cart|woocommerce_cart_hash|wptouch_switch_toogle|comment_author_|comment_author_email_)") {
    set $rocket_bypass 0;
    set $rocket_reason "Cookie";
}

if (-f "$rocket_mobile_detection") {
    set $rocket_bypass 0;
    set $rocket_reason "Specific mobile cache activated";   
}

# Do not bypass if the cached file does not exist
if (!-f "$rocket_file") {
    set $rocket_bypass 0;
    set $rocket_reason "File not cached";
}

# If the bypass token is still on, let's bypass WordPress with the cached URL
if ($rocket_bypass = 1) {
    set $rocket_is_bypassed "Yes";
    set $rocket_reason "$rocket_url";
}

# Clear variables if debug is not needed
if ($rocket_debug = 0) {
    set $rocket_reason "";
    set $rocket_file "";
}

# If the bypass token is still on, rewrite according to the file linked to the request
if ($rocket_bypass = 1) {
    rewrite .* "$rocket_url" last;
}

# Add header to HTML cached files
location ~ /wp-content/cache/wp-rocket/.*html$ {
    etag on;
    add_header Vary "Accept-Encoding, Cookie";
    add_header Cache-Control "no-cache, no-store, must-revalidate";
    add_header X-Rocket-Nginx-Serving-Static $rocket_is_bypassed;
    add_header X-Rocket-Nginx-Reason $rocket_reason;
    add_header X-Rocket-Nginx-File $rocket_file;
    add_header Strict-Transport-Security "$rocket_hsts_value";
   
   
}

# Do not gzip cached files that are already gzipped
location ~ /wp-content/cache/wp-rocket/.*_gzip$ {
    etag on;
    gzip off;
    types {}
    default_type text/html;
    add_header Content-Encoding gzip;
    add_header Vary "Accept-Encoding, Cookie";
    add_header Cache-Control "no-cache, no-store, must-revalidate";
    add_header X-Rocket-Nginx-Serving-Static $rocket_is_bypassed;
    add_header X-Rocket-Nginx-Reason $rocket_reason;
    add_header X-Rocket-Nginx-File $rocket_file;
    add_header Strict-Transport-Security "$rocket_hsts_value";
   
   
}

# Debug header (when file is not cached)
add_header X-Rocket-Nginx-Serving-Static $rocket_is_bypassed;
add_header X-Rocket-Nginx-Reason $rocket_reason;
add_header X-Rocket-Nginx-File $rocket_file;

# No HSTS header added here. We suppose it's correctly added in the site configuration


###################################################################################################
# BROWSER CSS CACHE
#
location ~* \.css$ {
    etag on;
    gzip_vary on;
    expires 30d;
   
}


###################################################################################################
# BROWSER JS CACHE
#
location ~* \.js$ {
    etag on;
    gzip_vary on;
    expires 30d;
   
}


###################################################################################################
# BROWSER MEDIA CACHE
#
location ~* \.()$ {
    etag on;
    expires 30d;
   
}

Maybe there's conflict somewhere with gzip and brotli settings? I'd appreciate any feedback. Thanks a lot!

 

I checked with WP Rocket and they confirmed that brotli compression will be considered for future development. It was actually an issue with the third-party script for WP Rocket. Found out that the issue had been raised already: Beware: GZIP + Brotli · Issue #48 · maximejobin/rocket-nginx · GitHub

Anyway I guess I'll have to wait until brotli will be fully supported by WP Rocket. So does Cache Enabler support it (even if we don't use their CDN) or WP Super Cache?