Support » Plugin: WP Cloudflare Super Page Cache » AMP support

  • Resolved janiosarmento

    (@janiosarmento)


    Is this plugin AMP compatible?

    The last time I tried I had to give up the plugin because it inserted scripts in the published pages that broke the AMP validation.

Viewing 15 replies - 1 through 15 (of 23 total)
  • Plugin Contributor Saumya Majumder

    (@isaumya)

    Hi @janiosarmento,
    Yes, it is and in the plugin settings under the cache tab, it does not cache any AMP pages by default. Screenshot: https://i.imgur.com/RMNGsvX.png

    Thread Starter janiosarmento

    (@janiosarmento)

    In such a case, the plugin is not AMP compatible, it just doesn’t act on AMP pages.

    To be compatible, it should allow Cloudflare to cache all pages (including AMP) without inserting elements that prevent AMP validation.

    It’s a reality that several websites don’t have AMP/non-AMP versions anymore; mine, for instance, are all AMP despite the device they are running on.

    Plugin Contributor Saumya Majumder

    (@isaumya)

    Hi,
    On amp pages we cannot add any of our scripts as that will break amp validation. Moreover amp pages are served over Google CDN so cloudflare CDN is really not needed.

    What this plugin does for non amp pages, Google does that automatically for amp.

    @isaumya I also have this question. Can’t we just add an if ( is_amp_endpoint() ) condition to only inject the scripts on non-AMP pages? and convert the scripts AMP-compatible using the amp-script tag?

    I understand that Google caches AMP pages. But for the first visit, the pages will act so slow because it is not cached. In addition, Google frequently checks for the “speed” of the page while fetching changes from AMP pages for ranking purposes.

    So, users might need to cache the AMP pages as well. Or at least make use of the features like “fetching links in the viewport”. So, isn’t it better to add such a condition to add scripts to only non-AMP pages and convert the scripts to AMP compatible form which will be a relatively easy task?

    Also, numerous errors reported by the official AMP plugin are also annoying in the backend.

    Thread Starter janiosarmento

    (@janiosarmento)

    Thank you, @muhammedswalihct, for explaining what’s obvious to me but I didn’t had the energy to put in words.

    AMP pages also need caching because Google only caches and serves cached content in specific conditions, not all the time.

    Plugin Contributor Saumya Majumder

    (@isaumya)

    Hi @janiosarmento & @muhammedswalihct,
    I must admit that I personally don’t use AMP. But upon receiving your request I’ve run some tests on my testing sites with AMP installed and saw that the plugin is caching the AMP pages on Cloudflare perfectly even when Rocket Loader is enabled in Cloudflare.
    Screenshot: https://i.imgur.com/RWcegJZ.png

    Then I tested AMP validation of that very same page and saw that it is validating perfectly. Screenshot: https://i.imgur.com/eTCovwR.png

    I have even dug inside the page source and saw that none of this plugin code is being added to the source for AMP pages. So, I’m sorry to say but it seems like you guys have opened this tread without even actually testing it.

    Thread Starter janiosarmento

    (@janiosarmento)

    Of course I wouldn’t open a ticket without having had issues with the plugin! I used it a lot, and had to deactivate it when I migrated my sites to AMP.

    I’m going to make some new tests, and share any new thoughts with you.

    Thanks for now.

    Thread Starter janiosarmento

    (@janiosarmento)

    Wonderful, I can’t enable Workers on my blog:

    Could not route to /accounts/workers/scripts/swcfpc_worker_1615144261, perhaps your object identifier is invalid? (err code: 7003) - No route for that URI (err code: 7000)

    Okay, I give up.

    Thanks anyway.

    Plugin Contributor Saumya Majumder

    (@isaumya)

    Make sure there is no existing worker with the same route. You can also try with the page rule mode. I run my tests on the page rule mode and it worked as I showed you in the screenshot.

    Thread Starter janiosarmento

    (@janiosarmento)

    https://shares.cdnfacil.com.br/2021/03/URL_validada_por_AMP_—_WordPress_25F57455.png

    My WP is in Portuguese but it’s easy to see the validation errors.

    @isaumya You are not seeing those errors because the “Official AMP” plugin is removing those incompatible scripts by itself. Not because this plugin doesn’t have any invalid scripts. I am sorry to say that you only tested it on the “Frontend” and didn’t test the actual problem here. Which is clearly the script tags that aren’t supported by AMP. I would recommend you to read this article if you need a reference to what I am talking about. https://amp.dev/documentation/guides-and-tutorials/develop/custom-javascript/

    I am attaching a screenshot as well. If you are correct, can you explain why the AMP plugin is reporting this as invalid markup as seen on both of my and @janiosarmento ‘s screenshots?

    https://pasteboard.co/JRz4Kl9.jpg

    Also, about the caching. I’ve tested it multiple times. The pages are being cached because of the “Cache Everything” Page Rule set on Cloudflare. None of the plugin functionality that depends on a script tag works on the AMP versions. I can assure you that. Because the scripts are removed by the AMP plugin even before it is added as I mentioned in my first point. So, “Technically” speaking, the caching is working “only” because of Cloudflare and this plugin doesn’t have any effect on that “If it depends on scripts” to perform tasks. To make it work, you should make the plugin AMP-compatible by using the amp-script tags as I mentioned in my first post. It was one of my requests.

    So, I would ask you to take a look at it again and enlighten me if I am wrong here. I am no expert. Just sharing what I think is the case.

    Plugin Contributor Saumya Majumder

    (@isaumya)

    Can you guys please provide the exact steps to reproduce the issues? Without a proper reproduction steps it’s impossible to recreate the same on my end.

    Plugin Contributor Saumya Majumder

    (@isaumya)

    Hi @muhammedswalihct & @janiosarmento,
    Thanks for more clarification and for helping me to see where to find the issues that you were talking about. I was able to reproduce what you were showing me in the screenshot. I can clearly see that the scripts are being added by the plugin and then the AMP plugin removing them for the actual user. So, when you are logged in as an admin you do see the errors.

    Also as the AMP system was removing the scripts added by the plugin, none of the plugins features like the admin menu bar purge option, prefetching URLs etc. were not working anyways.

    Anyways, I’ve already fixed these issues and send 2 PRs in our internal GitHub repo. So, in the upcoming release, these fixes will be there. But if you wish to use the fix right away you can download the ZIP from here: https://puu.sh/Hn9EK/82bd783f7b.zip and inside /wp-content/plugins/wp-Cloudflare-page-cache/libs/ replace the files with the files present in the ZIP. This will fix the issues. Screenshot: https://i.imgur.com/jiKxRR4.png
    Do test it out and let me know.

    Also from next time, when you open a thread, please provide clear instructions about recreating the issue, so that it can be easily reproduced on our end as well.

    Moreover @muhammedswalihct,

    Also, about the caching. I’ve tested it multiple times. The pages are being cached because of the “Cache Everything” Page Rule set on Cloudflare.

    So, “Technically” speaking, the caching is working “only” because of Cloudflare and this plugin doesn’t have any effect on that “If it depends on scripts” to perform tasks.

    – This is absolutely not true. The pages are being cached not only because of Cloudflare page rules but also because the plugin is adding the proper response headers. If you check any AMP page’s response header which is being cached or bypassed you can clearly see the plugin operating there in the response header: https://i.imgur.com/wHSpu0Z.png

    you should make the plugin AMP-compatible by using the amp-script tags as I mentioned in my first post.

    – That is not going to be possible as I’ve taken a deep look inside the amp-script docs and the way it works, it is best suitable for making minor JS features surrounding some specific tags. The way our script works at a global level, it cannot be converted to AMP script and will always cause issues. So, I’ve decided not to include our scripts on AMP pages as they were getting stripped out by the AMP system anyway but by doing this the admin side validation errors will not occur anymore.

    Hi @isaumya

    Thanks for making those changes. My main focus was to get rid of those admin messages so that the AMP plugin doesn’t have to do the task itself which you told you already fixed. Thanks for that.

    The pages are being cached not only because of Cloudflare page rules but also because the plugin is adding the proper response headers.

    That’s why I mentioned, “If it depends on scripts”… Only the parts that utilize the <script> tags will not work. I didn’t say that PHP scripts won’t as they are added from the backend.

    About the AMP compatibility. I understand that. At least for me, it is not a big thing as I mostly configured the header settings via NGINX instead of this plugin. I don’t know about @janiosarmento though. So, I am not getting into that much.

    Thanks for the help.

    Plugin Contributor Saumya Majumder

    (@isaumya)

    Hi @muhammedswalihct,
    Please try the patch given above and try that. Let me know if it fixes your admin errors. I’ve tested on my end and it si fixed but still try it out if you want to test it.

Viewing 15 replies - 1 through 15 (of 23 total)
  • The topic ‘AMP support’ is closed to new replies.