Problem with htaccess while using Apache and Cloudflare, and the compatibility

  • Resolved fredpan

    (@fredpan)


    4 years, 11 months ago

    Hi,

    I just installed the plugin, and, initially, I found that the WebP cannot function at all. After doing some researches, I realized that it might be the problem in my .htaccess file. So I edited the .htaccess file manually, and it works now. But I still have some confusion about the plugin setup.

    My situation: Cloudflare CDN, Apache, WP Multisite

    My questions are:

    1. From https://docs.ewww.io/article/16-ewww-io-and-webp-images, it states that “When you enable WebP conversion, the rewrite rules will be displayed, but only if your site does not use Cloudflare.” I want to know how can Cloudflare prevent the plugin from editing the .htaccess file? The .htaccess locates in my webserver and the Cloudflare is just a CDN for my webserver right?

    2. The plugin did not edit the .htaccess file for me, is it because of the Cloudflare prevention? Or is it the plugin intent to avoid editing .htaccess file because it detects I am using Cloudflare?

    3. In the plugin page, it states that “Your site is using Cloudflare, please use JS WebP or <picture> WebP rewriting.” But the fact is, both JS WebP or <picture> WebP doesn’t work for me at all. I finally end up with editing .htaccess to get things to work. Why?

    3. I found a discussion here: https://ww.wp.xz.cn/support/topic/the-htaccess-code-for-webp-is-wrong/ state that the current .htaccess configuration is wrong, so what is the correct one?

    4. below is my current .htaccess config regarding EWWW IO (based on the video in your doc):

    
# BEGIN EWWWIO
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png)$
RewriteCond %{REQUEST_FILENAME}.webp -f
RewriteCond %{QUERY_STRING} !type=original
RewriteRule (.+)\.(jpe?g|png)$ %{REQUEST_FILENAME}.webp [T=image/webp,E=accept:1]
</IfModule>
<IfModule mod_headers.c>
Header append Vary Accept env=REDIRECT_accept
</IfModule>
AddType image/webp .webp
# END EWWWIO

    It is working, but since I added it manually, anything wrong here?

    5. Regarding the rewrite rule RewriteRule (.+)\.(jpe?g|png)$ %{REQUEST_FILENAME}.webp [T=image/webp,E=accept:1] I however see there is another version exists: RewriteRule (.+)\.(jpe?g|png|gif)$ %{REQUEST_URI}.webp [T=image/webp,E=accept:1,L], which added a L at the very end. Which one is correct?

    6. As you can see above, there is a RewriteRule: RewriteRule (.+)\.(jpe?g|png)$ %{REQUEST_FILENAME}.webp [T=image/webp,E=accept:1]. Although, in Chrome Inspector, the img type is webp, why the filename is still .jpg but not .jpg.webp? I suppose this RewriteRule rewrites the img url and redirect to a url end with .jpg.webp right?

    7. I also use easy watermark plugin. Should I add the watermark first before optimizing the image or should I optimize the image first before adding the watermark?

    8. Can this plugin be used with Autoptimize together?

    Sorry for the tons of questions here but I just want to make sure I properly configured the plugins.

    • This topic was modified 4 years, 11 months ago by fredpan.
    • This topic was modified 4 years, 11 months ago by fredpan.
    • This topic was modified 4 years, 11 months ago by fredpan.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Shane Bishop

    (@nosilver4u)

    4 years, 11 months ago

    1. The problem with .htaccess rules and Cloudflare is not that Cloudflare prevents writing to any of your .htaccess file. It is that Cloudflare does not support varying the content based on the Accept header.
    The .htaccess rules are meant to deliver a WebP image to browsers that support WebP, and the original content (PNG/JPG) to browsers that do not support WebP. But Cloudflare does not support this setup, and thus Cloudflare will cache whichever version of the file is delivered first.
    If a non-WebP browser visits a page first, Cloudflare caches the JPG/PNG versions, and everyone else who follows will get those.
    If a WebP browser visits first, Cloudflare caches the WebP versions, and everyone else gets those, even browsers that don’t support WebP, and you’ll have broken images for those folks.

    Note that the situation is a bit more nuanced than that, because Cloudflare has hundreds of global servers, and so the behavior for each person depends on which server is closest to them. However, it will still result in non-WebP browsers seeing broken images on your site at some point.

    2. Thus the intend of the plugin is to avoid using .htaccess because you use Cloudflare, and that’s a broken scenario.
    3. So don’t do that, and let’s dig into why JS WebP didn’t work for you 🙂 There are also paid solutions to use instead of JS WebP, that are a bit more seamless. Notably, our Easy IO service or Cloudflare Pro–in both of these, you don’t need .htaccess rules either, because they do all the WebP delivery/generation for you via a CDN.
    4. Again, don’t do that, see #1.
    5. The rules in the video are likely the “old” ones, so don’t use them either.
    6. Instead of using a redirect, which is slow and “expensive”, the content is just swapped dynamically, so that you get WebP content under a .jpg or .png URL. This is exactly why Cloudflare doesn’t work with this setup, as it won’t cache 2 different versions of the content, only one, whichever comes first.
    7. Yes, you should watermark before WebP conversion.
    8. Yes, I used AO myself for several years, it should work alongside EWWW IO just fine. But don’t use both lazy loaders at the same time, that’d be kind of silly 🙂

    Plugin Author Shane Bishop

    (@nosilver4u)

    4 years, 11 months ago

    Oh, and one last important note, make sure you clear the Cloudflare cache after you get rid of the .htaccess rules, or you’ll have WebP images stuck in their cache for non-WebP browsers.

    Thread Starter fredpan

    (@fredpan)

    4 years, 11 months ago

    Thanks so much for the reply 🙂

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Problem with htaccess while using Apache and Cloudflare, and the compatibility’ is closed to new replies.