1

I have added Nginx http/2 server push to my WordPress site selected files (fonts, CSS and JS). It is working as expected. Although, there is a problem.

If the visitor navigates to another page on my site again Nginx server pushes the same fail even if they are already cached on the visitor's web browser. Each page preview Nginx re-push every server push files.

Is there any way to temporarily disable server push if the files already cached on the visitor device?

Chathu
  • 97
  • 1
  • 12

2 Answers2

3

You captured a known issue with HTTP2/Push and one of the reasons its being deprecated - Chrome is evaluating the removal of HTTP2/Push. I'd caution about spending a ton of engineering time debugging it.

https://groups.google.com/a/chromium.org/g/blink-dev/c/K3rYLvmQUBY/m/vOWBKZGoAQAJ

Brennen Smith
  • 1,742
  • 8
  • 11
1

There is no direct mechanism in nginx to perform push selectively.

One approach would be to push resources only if the client doesn't send a cookie with the request.

This approach can be implemented as follows:

In http level, define a map:

map $http_cookie_preloaded $resources {
    "visited" "";
    default "</style.css>; as=style; rel=preload, </image1.jpg>; as=image; rel=preload";
}

And in server block:

server {
    http2_push_preload on;
    add_header Set-Cookie "preloaded=1";
    add_header Link $resources;
}

This way users will get resources pushed on their first visit. They also get a cookie "preloaded", which then prevents the push on subsequent page loads.

The resources are specified inside the map default mapping.

Tero Kilkanen
  • 36,796
  • 3
  • 41
  • 63
  • Instead of pushing all the CSS, JS, JPG, are there anyway to push only a selected files. For an instance https://example.com/wp-content/theme/test.css https://example.com/wp-content/theme/font.woff2 – Chathu Mar 12 '21 at 08:36
  • It depends on the mechanism you are using for selecting pushed files. – Tero Kilkanen Mar 12 '21 at 15:36
  • Could you please give more details. I use add_header Link "; rel=preload; as=style; onload=this.rel='stylesheet'; crossorigin"; – Chathu Mar 14 '21 at 08:59
  • Don't specify `rel=preload` attribute on resources that you don't want to preload. – Tero Kilkanen Apr 09 '21 at 14:33