Ramanan on "[Plugin: W3 Total Cache] Disable on AMP pages"

Actually, in AMP pages generated by AMP Plugin, W3TC still prints the minfied and concatenate CSS and JS but it shouldn't. It makes AMP validation to fail.

W3TC still should cache HTMLn, and do HTML and inline CSS minification, but not to include all the CSS from theme and plugins.

https://wordpress.org/plugins/w3-total-cache/

+1

Same problem here. In my case the included minified CSS breaks even the design of AMP pages.

Unfortunately W3TC seems abandoned. The developer has not been active for 4 months, the compatible version has not been update since WordPress 4.3.3 and there are users who has bought Pro license but they don't recieve support.

I'm afraid that we need to look for another solution. WP Rocket seems good but it is not free and it is also not compatible with AMP.

Hi,

Jonathan from WP Rocket here.

WP Rocket is 100% compatible with AMP since today and the 2.6.16 version :)

Have a nice day!

Thank you WP Media for the update. Unfortunately a paid service is not affordable for everyone, even if it is the best service.

A very quick fix for W3TC. In the file plugins/w3-total-cache/lib/W3/Plugin/Minify.php, line 139:

if( function_exists('is_amp_endpoint') && is_amp_endpoint() ) { $add_script_and_style = false;
} else { $add_script_and_style = true;
}
if ( function_exists('is_feed') && ! is_feed() && $add_script_and_style ) {

Please, note that it is a very quick fix; there can be a better solution.

@cybmeta This fixed worked for me. However I still get a

NS_ERROR_UNEXPECTED:

After my 'amp validation successful' message.

Thoughts?

@Coop920 that error has nothing to do with the issue we are talking about; I think it is better if you start a new thread for that.

@cybmeta, i figured it out. It's a generic FF error:

http://stackoverflow.com/questions/25630367/ns-error-unexpected-error-in-firefox-using-dojo

Please @Coop920, start a new thread if you want to talk about something different, this thread was open to talk about W3TC conflict with AMP plugin. Stop talking about another non-related things. I hope you understand that making a thread open to every issues is not good for any user who come here looking for help about AMP plugin and W3TC. Your issue had nothing to do with W3TC and AMP plugin.

@cybmeta Thanks for that solution.

I'm wondering if there would be a way to deregister the stylesheet and script file after W3TC creates them, so that the plugin doesn't have to get patched directly.

Good point @teaperson200

As I said, the solution is a "very quick" fix, it is intended to fix the problem until a proper solution is found.

I've not looked very deeply into W3TC code but it seems that minified CSS and JS files generated by W3TC are not enqueued nor registered, they are injected into the document DOM, so they can not be deregistered.

Of course, you can set "/amp" (or the amp endpoint you use) in the "Never minify the following pages". It fix the problem with CSS and JS files without hacking the pllugin, but the HTML minification is also disable.

@cybmeta Thank you! The latter solution is the simple thing I was looking for. My pages are pretty small so HTML minification is not a serious issue.

For me using Tidy CSS minifier solve my problem. It's in option panel of W3 TC

The issue here is not about minifiyng CSS, JS or HTML. It is about they being added to AMP pages when that pages should not include any CSS file and only allowed JS. I can not imaging how chaning the minify method can fix the issue. @dinhtungdu Can you explain it? I've tested and, as I expected, it didn't work.

@cybmeta:
I read your question again and I think you may set minify mode is manual.

For me, I set auto mode for Minify, my AMP page doesn't come with css from theme. But I come with another problem: the minifier auto stripped last semi-colon of css, so it breaks AMP validation. After I change CSS Minifier, my last semi-colons are kept in my minified HTML => AMP works!.

Sorry because of too quick answer. :)

I always use manual minification mode and that doesn't fix the issue. I'm sorry but I have to say once again that it seems you are talking about a different issue.

Read de AMP docs, loading a CSS file is not allowed. All CSS styles should be in <style amp-custom> tag but W3TC adds the minified CSS file to AMP pages in a <link> tag, which is not allowed in AMP specification. That is the problem we are talking about in this thread.

Same applies for JS. W3TC add the mifified JS file to AMP pages but it shouldn't.

So, we are discussing about how to disable this behaviour of W3TC and avoid those minified CSS and JS files being added to AMP pages. Changing the minification method can not help with this. It seems you talk about another issue.

Hi,

my solution is adding an action to pre_amp_render_post and setting
$wp_query->is_feed = 1

No css and js and html minified. To have the AMP page cached, feed caching in
Page Cache settings must be checked

// Avoid minified css and js beeing added to AMP pages
add_action( 'pre_amp_render_post', 'amp_avoid_w3tc_minified_css_js' );
function amp_avoid_w3tc_minified_css_js() { global $wp_query; $wp_query->is_feed = 1;
}

Interesting Marco. But not sure if this can produce issues in the future, but interesting.

Hi guys, I had a similar problem, W3 Total Cache was adding a <script> tag with the path for a minified JS and this was invalidating my APM blog posts.

I solved (still waiting Google to display the AMP pages in the search results, anyway from console there are no error but one message that says:"Powered by AMP ⚡ HTML")

My solution was to go in W3 Total Cache > Minify > Advanced > Never minify the following pages and type /amp/ in the text area.

NOTICE: My permalinks are set as "Post Name" so they look like a folder sequence https://mywebsite.com/sample-post/

The AMP plugin by default just add the text /amp/ to the post link, so now every link ending by /amp/ are not minified by W3 Total Cache.
Not a big deal as an AMP page is supposed to be quite small anyway.

Hope this will help.

Hello @pandorino. That solution is already commented in a previous comment. The problem is that it skips HTML cache as well. Note that caching HTML for AMP pages is a desired feature (I mean, caching the document), including JS and CSS are not.

Hi @cybmeta!

I just wanted to thank you from the bottom of my heart. Your piece of code (quick fix) works great on my side. You have saved me a lot of time and headaches.

Cheers!

This occurs in manual minification and is obviously a bug.

Won't happen in automatic because in automatic W3TC sees all the scripts enqueued and minifies and concatenates them. Since it won't see the scripts in automatic, it won't add the minified js file(s).

There is another solution for manual.

I haven't tried but in templates, manually keep adding JS files for different templates instead of choosing "All Templates".

Involves some work and I am not sure as well. Anyone wishes to try?