Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Redis full page caching & webp conditional image serving #95

Closed
Dereksmith590 opened this issue Jun 24, 2019 · 6 comments
Closed

Redis full page caching & webp conditional image serving #95

Dereksmith590 opened this issue Jun 24, 2019 · 6 comments
Labels

Comments

@Dereksmith590
Copy link

@Dereksmith590 Dereksmith590 commented Jun 24, 2019

Latest Pagespeed (Lighthouse) tool's update, suggests webp content type to be served onto supported browsers.

Since major browsers like Safari are not supporting webp yet, a conditional cached version is required both for webp supporting browsers and a second for non-webp supporting ones.

Are there any solutions for this problem yet? If a page is cached from a webp supporting browser, non-webp browsers will see this cached version aswell.

@ggloveswp

This comment has been minimized.

Copy link

@ggloveswp ggloveswp commented Jun 25, 2019

Mapping useragent in nginx an appending the variable to cache key, after conditionally checking the variable, might do the trick.

IE:

http config:

map $http_user_agent $webpsupport {
    default 0;
    "~MSIE" 1;
    "~IEMobile" 1;
    "~Safari" 1;
}

server config:

if ($webpsupport != '0') {

location ~* ^/wp-content/.+\.(png|jpg)$ {
  add_header Vary Accept;
...

}

}

Then, just append $nowebpsupport in your cache key, depending on the config you are using ( /etc/nginx/common/redis-php73.conf for Redis/PHP7.3 ):

location ~ \.php$ {
  set $key "nginx-cache:$scheme$request_method$host$request_uri--webp$webpsupport";
...

@VirtuBox or @jeroenlaylo might have better answers for this. Just sharing the first workaround came in mind.

@VirtuBox

This comment has been minimized.

Copy link
Member

@VirtuBox VirtuBox commented Jul 3, 2019

Hello @Dereksmith590,

WebP images support is already implemented in WordOps :

It work properly with full page caching, as we are not serving images with the .webp extension, but directly with their original extension and the proper content-type header depending on the browser request headers.

@VirtuBox VirtuBox added the question label Jul 3, 2019
@andremacola

This comment has been minimized.

Copy link

@andremacola andremacola commented Jul 9, 2019

This configuration do not work with Cloudflare.

You can use the approach below to customize the thumbnail output.

Recommend to use some plugin like EWWW Image optimizer

<picture class=''>
	<source type='image/webp' srcset='image.webp'>
	<img src='image.jpg' title='' alt='' class=''> 
</picture>
@VirtuBox VirtuBox closed this Sep 6, 2019
@rsmith4321

This comment has been minimized.

Copy link

@rsmith4321 rsmith4321 commented Nov 4, 2019

I think it's great that the webp is served if the image is available. However this will cause serious problems if someone is using cloudflare or any kind of cdn. The cdn will cache the webp version of the .jpeg and serve it to non compatible browsers. So I don't know if this should be on by default, it should be an installation choice.

@andremacola

This comment has been minimized.

Copy link

@andremacola andremacola commented Nov 23, 2019

@VirtuBox The webp.conf file needs to be optional. I have to disable to work with cloudflare.
Because the common configuration uses try_files $uri$webp_suffix $uri =404; the nginx fail to start if we delete or comment the content from webp.conf.

@VirtuBox

This comment has been minimized.

Copy link
Member

@VirtuBox VirtuBox commented Nov 24, 2019

@andremacola I will add an additional directive to set webp_suffix variable empty if Cloudflare header is passed to Nginx

@VirtuBox VirtuBox mentioned this issue Dec 3, 2019
VirtuBox added a commit that referenced this issue Dec 3, 2019
- PHP 7.4 support
- Improved Webp images support with Cloudflare (Issue [#95](#95)). Nginx will not serve webp images alternative with Cloudflare IP ranges.
- Stack upgrade for adminer
- Check acme.sh installation and setup acme.sh if needed before issuing certificate
- Add `--ufw` to `wo stack status`
- Add Nginx directive `gzip_static on;` to serve precompressed assets with Cache-Enabler or WP-Rocket. (Issue [#207](#207))
- Previous `--php73` & `--php73=off` flags are replaced by `--php72`, `--php73`, `--php74` to switch site's php version
- phpMyAdmin updated to v4.9.2
- Adminer updated to v4.7.5
- Replace dot and dashes by underscores in database names (Issue [#206](#206))
- Increased database name length to 32 characters from domain name + 8 random characters
- typo error in motd-news script (Issue [#204](#204))
- Install Nginx before ngxblocker
- WordOps install/update script text color
- Issue with MySQL stack on Raspbian 9/10
- Typo error  (PR [#205](#205))
- php version in `wo debug` (PR [#209](#209))
- SSL certificates expiration display with shared wildcard certificates
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
5 participants
You can’t perform that action at this time.