Join the community today
Register Now

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

Discussion in 'Install & Upgrades or Pre-Install Questions' started by Carlo, Jul 9, 2017.

Tags:
  1. Carlo

    Carlo New Member

    9
    3
    3
    Apr 19, 2017
    Ratings:
    +4
    Local Time:
    11:51 AM
    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.

     
  2. eva2000

    eva2000 Administrator Staff Member

    30,632
    6,862
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +10,308
    Local Time:
    11:51 AM
    Nginx 1.13.x
    MariaDB 5.5
    So with PageSpeed Insights your Centmin Mod Nginx Brotli enabled site only has issues when ngx_pagespeed enabled ? Or when ngx_pagespeed disabled too ?

    What about with Think with Google Mobile test site ?

    Is your site by any chance behind a proxy ? i.e. nginx proxy like Cloudflare, Incapsula, Sucuri or utilises a CDN for static assets ? Tried clearing those front end proxy services' cache via a full cache purge first ?

    I had a similar problem on this forum that had me disable Brotli for Centmin Mod Nginx as Sucuri cloudproxy I have in front of the forums doesn't support Brotli and seems to be serving the wrong Brotli compressed assets to browsers that didn't support Brotli Site broken in Internet Explorer/Edge

    But strange as PageSpeed Insights should be Chrome browser.

    What Wordpress plugins you using ? Any do auto gzipping of static assets ? Like KeyCDN Cache Enabler ?
     
  3. Carlo

    Carlo New Member

    9
    3
    3
    Apr 19, 2017
    Ratings:
    +4
    Local Time:
    11:51 AM
    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!
     
  4. eva2000

    eva2000 Administrator Staff Member

    30,632
    6,862
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +10,308
    Local Time:
    11:51 AM
    Nginx 1.13.x
    MariaDB 5.5
    In that case, would be a WP Rocket issue so you will need to contact their support to see what can be done about brotli compression support :)
     
  5. Carlo

    Carlo New Member

    9
    3
    3
    Apr 19, 2017
    Ratings:
    +4
    Local Time:
    11:51 AM
    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?
     
    • Like Like x 1
  6. eva2000

    eva2000 Administrator Staff Member

    30,632
    6,862
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +10,308
    Local Time:
    11:51 AM
    Nginx 1.13.x
    MariaDB 5.5
    • Like Like x 1