Cache Enabler often stores 2 WebP copies

[redlet]

$ cat wp-content/cache/cache-enabler/x.com/index.html | grep .png

<div class="site-logo faux-heading">
    <a href="https://x.com/" class="custom-logo-link" rel="home">
        <img width="1198" height="214" src="https://x.com/wp-content/uploads/2020/04/cropped-x-1.png.webp" class="custom-logo" alt="X" srcset="https://x.com/wp-content/uploads/2020/04/cropped-x-1.png.webp 1198w, https://x.com/wp-content/uploads/2020/04/cropped-x-1-300x54.png.webp 300w, https://x.com/wp-content/uploads/2020/04/cropped-x-1-1024x183.png.webp 1024w, https://x.com/wp-content/uploads/2020/04/cropped-x-1-768x137.png.webp 768w" sizes="(max-width: 1198px) 100vw, 1198px" />
    </a>
    <span class="screen-reader-text">X</span>
</div>

$ cat wp-content/cache/cache-enabler/x.com/index-webp.html | grep .png

<div class="site-logo faux-heading">
    <a href="https://x.com/" class="custom-logo-link" rel="home">
        <img width="1198" height="214" src="https://x.com/wp-content/uploads/2020/04/cropped-x-1.png.webp" class="custom-logo" alt="X" srcset="https://x.com/wp-content/uploads/2020/04/cropped-x-1.png.webp 1198w, https://x.com/wp-content/uploads/2020/04/cropped-x-1-300x54.png.webp 300w, https://x.com/wp-content/uploads/2020/04/cropped-x-1-1024x183.png.webp 1024w, https://x.com/wp-content/uploads/2020/04/cropped-x-1-768x137.png.webp 768w" sizes="(max-width: 1198px) 100vw, 1198px" />
    </a>
    <span class="screen-reader-text">X</span>
</div>

They're both the same. Doesn't always happen, but most of the time it does.

[bridgettewp]

I was just looking for a solution to this issue so it's coincidental you posted this. From the source, it appears your images need to be in the uploads folder with the extension .jpeg.webp, .jpg.webp, or .png.webp. I made this change since I was storing as only .webp, but the problem persists even after re-converting all images and clearing the cache.

I'm using Nginx 1.7.10 and PHP 7.4.5 along with WebP Express.

[redlet]

@bridgettewp WebP Express says to use "Set .webp" not "Append .webp." Either way, it's broken in both cases.

[bridgettewp]

That's correct -- I may have been wrong. I was reading the Cache Enabler code.

Importantly, I have determined the issue occurs when the page is viewed first in a WebP-capable browser. If I clear all WebP images and the cache then visit from a WebP-incapable browser first, the cache stores correct HTML files.

@svenba Have you experienced this behavior before?

[svenba]

This sounds like a conflict with another plugin. Try to disable any WebP related plugins, purge the CE cache and try again.

[bridgettewp]

@svenba In my test setup, the only two active plugins are WebP Express (varied image mode) and Cache Enabler. I'm wondering if Nginx may be playing a role here in creating this issue. I have Brotli compression enabled (gzip disabled in Cache Enabler). Everything else is fairly standard.

I have these rules in my Nginx config and the WebP Express tests pass:

    location ~* ^/?(?<noext>wp-content/.*)\.(png|jpe?g)$ {
        add_header Vary Accept;
        add_header Cache-Control "public, max-age=31536000, stale-while-revalidate=604800, stale-if-error=604800";
        if ($http_accept !~* "webp") {
            break;
        }
        try_files /wp-content/webp-express/webp-images/doc-root/$noext.webp
                  $noext.webp
                  /wp-content/plugins/webp-express/wod/webp-on-demand.php?xsource=x$request_filename&wp-content=wp-content
                  ;
    }

    location ~* ^/?wp-content/.*\.webp$ {
        add_header Cache-Control "public, max-age=31536000, stale-while-revalidate=604800, stale-if-error=604800";
        try_files $uri
                  /wp-content/plugins/webp-express/wod/webp-realizer.php?xdestination=x$request_filename&wp-content=wp-content
                  ;
    }

[svenba]

Disable WebP Express, purge the CE cache and try again.

[bridgettewp]

I just did that and confirmed the cache generated new files. I am still seeing ".webp" in both files.

Edit: For additional information, I am testing using Firefox (WebP), Chrome (WebP), and Safari (non-WebP). I do not think this affects caching outcomes, but in an effort to resolve this issue, anything could be useful to know.

[redlet]

@bridgettewp If I view the page on Firefox without the image/webp header, the cache is correct, but if I enable the header, the cache is generated incorrectly. This sounds like what you mentioned. I can't currently test without additional plugins because I do not have a test setup, but none of them conflict with webp, caching, or optimization.

[bridgettewp]

If there is no issue with CE on the latest version of PHP running via an Nginx web server, my only thought is the "Alter HTML" section of WebP Express causing issues, but I have it configured exactly as it should be.

[svenba]

That's it: "Alter HTML" section of WebP Express causing issues

[bridgettewp]

@svenba https://i.ibb.co/8mLwkyQ/image.png These are my settings. The reason I use Cache Enabler is because of its support for two cached items per page (one for WebP and one not). Is it not possible to achieve?

[bridgettewp]

Final comment: I see Cache Enabler alters the HTML for me. Everything seems to be working properly. Thank you for working through this @redlet and @svenba.