Critical CSS issue on mobile

Hi there,

Have you spoken to WP Rocket as its their function that is breaking the CSS?

I am talking with wp rocket too regarding this topic, waiting for their reply...

This happen only on those pages/products where woocommerce is getting used, rest simply "about" and "how to buy" pages are working fine.

When WP Rocket is combing all of the various CSS files it is messing up the CSS order.
They will need to provide a fix or be able to tell you how to exclude files from being included within that.

okay, what if I do not combine CSS and JS.

Thanks for your prompt reply

Its generally the Combine / Minify CSS options that create this issue. Try disabling those options.
However, i am not sure how this applies to the Critical CSS option in WP Rocket....

Hi,

Kieran from WP Rocket here, thanks for contacting support.

The Optimize CSS Delivery option doesn't work for every site due to infinite possibilities of themes, plugins and custom code. If you're experiencing an issue with this then I would recommend checking this support article: Critical CSS issues and FOUC which covers editing the Critical CSS that we generate and defining your own.

At this moment in time, WP Rocket doesn't generate Critical CSS for both desktop and mobile devices, however, it is planned to in an upcoming release (either 3.6 or 3.7). Given the nature of the issue you're facing I would expect this to be resolved for you in a future release.

Let me know if you need any further assistance, I am happy to help. :)

This is revert I got from Wp Rocket, Can you guys please help me in this?

I can play with CSS but I don't know how to fix issue in this case.

I am using Critical CSS with my other gpsites, but I don't know whats wrong with this one.

I am not sure what help we can provide ... generating Critical CSS is a complicated process and varies greatly from site to sites, and this requirement is out out of this forums scope.

Personally i would disable the automated Critical CSS and see what actual difference it makes to the site loading before wasting too much to much time on the matter.

What I am able to understand after comparing these to sites (staging) and (live) it is not loading responsive [media="(max-width: 768px)"] CSS from woocommrce related CSS file in to Critical CSS. Why is it so happening I don't know.

I know it is a complicated process to fix the issue in Critical CSS, but it needed to improve FCP and after a recent update of PSI, it seems crucial.

Is it possible to exclude files from the critical CSS functionality? If so, I would exclude those files that rely on the media query inside the request.

No, it is not possible to exclude files from the critical CSS functionality.

But on my staging site homepage products are not part of critical CSS but still, it is messed up on mobile and woocommerce media query is not loading.

I have checked with fresh install too of prime template, And it is still breaking site's woocommerce related stuff.

Have done this just to confirm that I have not done anything wrong with my site.

Can you link me to a page that's broken even with critical CSS turned off?

There is no page that is broken with critical CSS turned off.

It happens only after critical CSS is turned on.

Thanks for your support, I have never seen such good support you guys are awesome. I will wait for wp rocket to push an update.

Thanks for this thread https://generatepress.com/forums/topic/replace-gp-search/ this helped me to replace default search with woocommerce AJAX search. You should add this in generatepress docs, it will help many people, just a suggestion.

But I am having a problem, search results are still displaying even after search is closed.

Sometimes this works fine and sometimes this happens on mobile and desktop both: https://ibb.co/Z6HxT1s

Do you have any fix for this?

I just tried to get it to happen but couldn't. Is there something specific I should try to get it to happen?

I am seeing this issue more often on mobile and tablet view.

1. open the site in mobile view and refresh then try to search.

2. open the site in tablet view and refresh then try to search.

EDIT: I changed the AJAX search plugin, so everything seems fine now.

Thanks for the guide.