serpentdriver

Leave these settings for “WebP Attribute to Replace” field untouched. There is no need to change these settings.

The location doesn’t matter, but LiteSpeed cache plugin also writes all converted images in the same directory where all other images are located. The difference is that cache plugin changes the file extension of each image and modifies the source of <img> tag. This method is quite different to almost any other plugin that creates webp images.

Shortpixel also generates .webp images, but leaves the source of the <img> tag unchanged and uses a server function to provide webp. This means that the source remains the same, but the MIME-type is changed. This makes it look like the original image is being loaded, but it is actually the webp variant. If you see .webp images in the /upload directories, then the images with *.jpg.webp images are generated by LiteSpeed and not by Shortpixel, at least that’s what the Shortpixel documentation says.

The advantage of this method is that not only is this method different, but it is not tainted with the bugs of other plugins. Shortpixel uses the Accept header to determine if a browser supports webp images. However, this method is very faulty and does not work fully with the Apple Safari browser. This means that certain Safari versions (have to) load webp images, even though these versions do not support webp at all.

Ultimately, this has nothing or almost nothing to do with your problem. It’s just that PHP is required for image conversion when it happens on-the-fly when a page is requested, but when a page is cached there is no more PHP. This fact has never changed.

Without guaranteeing that I might be right, but it looks like Shortpixel creates the webp images on-the-fly. This requires PHP. When a page is cached, there is no more PHP. The output in the browser then only comes from a static file on the server. This is how any HTTP cache works. In your case, this means that you cannot use Shortpixel if Shortpixel does not create the webp images in advance using a separate service.

But as already mentioned, this is only an assumption, but a very probable one.

Because the cache plugin and the code from above expects *.jpg.webp

Why would it affect only this particular page?

As already said, the maker of your theme uses different CSS at this URL depending on browser or User-Agent. The UCSS Generator doesn’t know this, therefore he uses the CSS for default browser.

The plugin is not the problem. The problem seems to be UCSS. The creator of your theme seems to use different styles depending on the user-agent. The UCSS generator cannot know this, so the easiest way to solve the problem is to exclude the affected URL from using UCSS. You can find the exclusion function under Page Optimization -> Optimize CSS. If done, purge the cache and check if it works.

The cache plugin doesn’t modify any css. If there are CSS-related issues, then all browsers must be affected. Therefore, check whether the problems also occur in other browsers.

It seems your theme is either a “webp” theme or you or anybody else has added this code. Check upload directory and all subdirectories if there is a .htaccess. If yes, check if there is such code in these/this .htaccess.