Image carousel disappears on mobile devices when cached

that can be hard to troubleshoot … some questions first:
* what do you mean with “When a product page is not cached” vs “When a product page is cached”? cached = wp super cache or more broadly all you different optimization levels?
* what is AOC?

Yes, I mean if I clear the WP Super Cache the first time the page is viewed on the mobile device the images appear. If I hard refresh the page and view the cached version, they disappear.

I meant ACU (Asset Clean Up)

Thanks

OK, we’ll have to disable things one at a time to be able advance here .. does the problem go away when WP Super Cache is off?

I think you are correct – I started to do that and noticed that the images reappeared when turning off the CCSS – so I reached out to them. However, it may have been becasue I cleared the cache each time I changed the settings that it may have just looked as though it worked?

Tonight is the busiest for the site as a emailshot has gone out today. I shall have to start switching things off tomorrow. What do you think is most likely – js or css?

Clearing the pagecache does not clear critical CSS’s rules, but it does clear Rapidload’s, so Rapidload’s “used CSS” would be me best guess really.

Hi
The CCSS team came back with a simple suggestion of:

Please, try force-including //.owl

Which I have done. Unfortunately it does not fix the problem.

So, I have cleared all caches, turned off CCSS and tested. Works perfectly, however it is not a long term solution for me.

I have tried the Rapidload option for critical css, which largely seems to work (the image on mobile device issues goes away and there is no CLS), but I get the message on Google pagespeed that the CSS file being loaded (either the UUCCSS one or the AO one) is a render blocking resource. I am not sure how this element works so don’t know what to check to see if it is working

Could this be a setting issue? Would I need to deactivate CCSS to test the Rapidload properly (I just unticked the Eliminate render-blocking CSS? option in the main AO screen).

So, I have cleared all caches, turned off CCSS and tested. Works perfectly, however it is not a long term solution for me.

if you clear all caches, all rapidload rules are removed as well, so you’re not (only) testing the impact of disabling CCSS.

I would suggest to disable rapidload and clear your caches, which will not impact the CCSS rules and then test if the problem persists (make sure “Eliminate render-blocking CSS” is on). if it does persist then indeed it is with CCSS and we can try the force-include (which only applies to new rules, not the existing ones). if it does not, the problem is with rapidload?

I deactivated Rapidload

I have made sure “Eliminate render-blocking CSS” is on

I have cleared the caches (using AO cache clear)

I have the force include of //.owl included

I have regenerated the manual rule for the listings page and checked that the page is using it.

The problem is still there on mobile devices.

The only time it is not is when CCSS is turned off. The issue has to be with CCSS (IMHO)

So should I send this thread to the CCSS people so they can see what we have done to test? Or do you have any other suggestions?

In the meantime, do you know the recommended configuration for AO and Rapidload doing the critical CSS without having it render blocking, as this seems to be a viable alternative?

Thanks

I have regenerated the manual rule for the listings page and checked that the page is using it.

what page (url) is that willjames so I can have a look?

Any product page: https://www.truckpages.co.uk/trucks-for-sale/2007-mercedes-actros-2536-11946cc-for-auction-on-2021-12-21-at-1000/

I have changed it back to rapidload – will put back to CCSS now

Check now – I have deactivated rapidload and put CCSS back

https://www.truckpages.co.uk/trucks-for-sale/iveco-stralis-330-2017-17-euro-6-r209/

Enable the force-include in the AO CCSS settings page has no impact for CCSS you generate manually/ direclty on criticalcss.com, what you could do is delete the manual rule and then edit the page and in the Autoptimize metabox of the edit screen press “generate Critical CSS” to put that page in the queue. To speed things up even more you can then go to Autoptimize -> Critical CSS -> Job Queue to click the “manually process job queue”-button. When that is done you should have an AUTO rule that takes the force-include into account (which should result in more CSS for the OWL carousel being present in the CCSS).

frank

Unfortunately there is no option to do anything AO related on the product page edit (it is a CPT) I can see the option on the normal posts pages and I have looked at the screen options and it is not hidden.

Previously I generated the rule on https://criticalcss.com/generate and it seemed to have more of the ‘owl’ css in it when I compared it to the previously generated file (it still didn’t work though).

I am struggling to get CCSS to build the file automatically. CCSS always treats the ‘listings’ CPT pages the same as the normal post pages. They are hugely different in their CSS needs.

than you’ll have add the force-include manually on criticalcss.com (click on “show advanced settings” to see the force-include input field) to generate the CCSS for that type and copy/paste the resulting CCSS into a manual listings CPT rule?