Issue configuring prioritize critical css

[David Gomez Saavedra]

hi everyone, 

We are trying to get an speed improvement on our website using the prioritize critical css filter. Unfortunately, we haven't managed to make it work yet. We are running a nginx as reverse proxy of a nodejs server. Our CSS files names get rewrritten by pagespeed but the inline and defer are not happening. 

When loading the page everything looks fine 

<!--Summary computation status for CriticalCssBeacon
Resource 0 https://cdn.checkyeti.com/css/vendor.c3496.css: Computed OK
Resource 1 https://cdn.checkyeti.com/css/app.bc2ea.css: Computed OK
-->

but at the end we get a message with 

<!--
mod_pagespeed on
Filters:
db Debug
hw Flushes html
pr Prioritize Critical Css


Options:
AvoidRenamingIntrospectiveJavascript (aris) True
EnableCachePurge (euci) True
EnableRewriting (e) 1
FileCacheCleanIntervalMs (afcci) 3600000
FileCacheInodeLimit (afcl) 500000
FileCacheSizeKb (afc) 102400
InPlaceResourceOptimization (ipro) True
LRUCacheByteLimit (alcb) 16384
LRUCacheKbPerProcess (alcp) 8192
MaxCombinedCssBytes (xcc) 8388608
MaxCombinedJsBytes (xcj) 8388608
PreserveUrlRelativity (pur) True
RedisTimeoutUs (rdt) 5000
RespectXForwardedProto (rxfp) True
RewriteLevel (l) Pass Through
Statistics (ase) False
StatisticsLogging (asle) False
XHeaderValue (xhv) Powered By ngx_pagespeed


#NumFlushes            0
#EndDocument after     986us
#Total Parse duration  916us
#Total Render duration 10038us
#Total Idle duration   70us
The following filters were disabled for this request:
 CriticalSelectorFilter: No critical selector info in cache
 SupportNoscript
-->

Any idea what the issue could be? here is our configuration for pagespeed and the nginx location for the proxy. Any thoughts/leads are very appreciated

Best

David

pagespeed on;

pagespeed Domain https://cdn.checkyeti.com/css;
pagespeed Domain https://cdn.checkyeti.com/js;
pagespeed Domain https://wwww.checkyeti.com/css;
pagespeed Domain https://wwww.checkyeti.com/js;
pagespeed Domain https://www.google-analytics.com;
pagespeed Domain https://connect.facebook.net;
pagespeed Domain https://www.googletagmanager.com;
pagespeed Domain https://code.jquery.com;
pagespeed Domain https://maxcdn.bootstrapcdn.com;
pagespeed Domain static.hotjar.com;
pagespeed Domain https://script.hotjar.com;
pagespeed Domain https://cdnjs.cloudflare.com;
pagespeed Domain https://unpkg.com;

pagespeed DownstreamCacheRebeaconingKey "cache-secret";
pagespeed DownstreamCachePurgeLocationPrefix http://localhost:80/purge;
pagespeed DownstreamCachePurgeMethod PURGE;

pagespeed MapOriginDomain http://localhost/css https://cdn.checkyeti.com/css;
pagespeed MapOriginDomain http://localhost/js https://cdn.checkyeti.com/js;

pagespeed MapOriginDomain http://localhost/css https://wwww.checkyeti.com/css;
pagespeed MapOriginDomain http://localhost/js https://wwww.checkyeti.com/js;

pagespeed LoadFromFile "http://localhost/css" "/data/assets";
pagespeed LoadFromFile "http://localhost/js" "/data/assets";

pagespeed RedisServer "redis.checkyeti.com:6379";

pagespeed RedisTimeoutUs 5000;

pagespeed FileCachePath /var/ngx_pagespeed_cache;

pagespeed FileCacheSizeKb 102400;
pagespeed FileCacheCleanIntervalMs 3600000;
pagespeed FileCacheInodeLimit 500000;

 pagespeed LRUCacheKbPerProcess 8192;
 pagespeed LRUCacheByteLimit 16384;

 pagespeed MaxCombinedJsBytes 8388608;
 pagespeed MaxCombinedCssBytes 8388608;
 pagespeed CreateSharedMemoryMetadataCache "/var/www/html/ngx_pagespeed_cache" 51200;
 pagespeed DefaultSharedMemoryCacheKB 50000;


pagespeed XHeaderValue "Powered By ngx_pagespeed";
pagespeed LogDir /var/log/pagespeed;


pagespeed Statistics off;
pagespeed StatisticsLogging off;

pagespeed EnableCachePurge on;
pagespeed PurgeMethod PURGE;

pagespeed MessageBufferSize 0;

pagespeed PreserveUrlRelativity on;

pagespeed ProcessScriptVariables on;

pagespeed RewriteLevel PassThrough;

pagespeed RespectXForwardedProto on;

pagespeed ListOutstandingUrlsOnError on;

pagespeed InPlaceResourceOptimization on;

pagespeed EnableFilters prioritize_critical_css;
pagespeed DisableFilters rewrite_images;

set $should_beacon_header_val "";
set $bypass_cache 0;
set_random $rand 0 100;
if ($rand ~* "^[0-9]$") {
 set $should_beacon_header_val "cache-secret";
 set $bypass_cache 1;
}

pagespeed on;
add_header X-Cache-Status $upstream_cache_status;
add_header X-beacon $should_beacon_header_val;
proxy_set_header Cookie $http_cookie;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header Connection "";
proxy_set_header Host $host;
proxy_http_version 1.1;
proxy_redirect off;
proxy_pass_request_headers on;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://nodejs;

proxy_cache_purge PURGE from 127.0.0.1;

proxy_cache_bypass $bypass_cache;
proxy_hide_header PS-ShouldBeacon;
proxy_set_header PS-ShouldBeacon $should_beacon_header_val;

[Longinos]

Hola David

First of all, the pagespeed domain directive, you MUST not set domains with these directive that are not running pagespeed module.

I see you have some domains that don´t run it, like googletagmanager and so.

Why? if, say, https://www.googletagmanager.com/some_url.js  is rewrited to some like https://www.googletagmanager.com/some_url.js.js.someHASH.js, when you request this rewrited url and the domain is not running pagespeed then you get a 404 error.

You are loading resources from javascript snipets, pagespeed module can´t optimize that. The way pagespeed module works is parsing htlm code and the rewrite resource it found in it, so maybe you need some pre-render software that creates the html.

You say "...We are running a nginx as reverse proxy of a nodejs serve" so I think you have:

(Your scenario) user -> cdn -> nginx+pagespeed -> node.js (here cdn is cloudflare not your cdn subdomain)

And you have some directives to work w/ a DonwstreamCache. I think thi´s wrong. Downstream cache is for

user -> nginx proxy/varnish -> apache/nginx + pagespeed

In this scenario, you are able to purge the nginx proxy/varnish cache.

In Your scenario, cloudflare is caching unoptimized resources for a long time (30672000) so no need to to renew it and serves unoptimized resources, maybe lowering the ttl to some time between 10 and 60 secons, pagespeed maybe optimized these resources and then serve it w/ 1 year ttl.

But the big issue here is that you don´t serve plain html for pagespeed module. Don´t have you a pre-render for bots?

[David Gomez Saavedra]

Thank you for the info. The problem was in the caching of CSS files. I changed the configuration to have a very short caching on unoptimized files and now the filter is working fine. 

--
You received this message because you are subscribed to the Google Groups "ngx-pagespeed-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to ngx-pagespeed-di...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/ngx-pagespeed-discuss/74cf2f54-0dcc-4400-a7d5-1dcc2fdb0f1b%40googlegroups.com.

--

—

David Gomez Saavedra, CTO

+41 76 238 83 06

david.gome...@checkyeti.com

www.checkyeti.com

CheckYeti GmbH, Fleischmanngasse 1/26, 1040 Wien | FN 440403b