[Resolved] Critical CSS issue on mobile

Home Forums Support Critical CSS issue on mobile

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #1303183
    Umesh

    I have installed wp rocket and when I turn on the Critical CSS option it turns up like this on mobile

    https://ibb.co/37xG0DZ

    And this happens on most of the pages/products where woocommerce is used.

    I am using critical CSS function with generatepress with success on others site, but this issue with my this site

    * tried with the server, browser, wp rocket cache clear.

    * tried with disabling every plugin

    #1303259
    David
    Staff
    Customer Support

    Hi there,

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

    #1303311
    Umesh

    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.

    #1303333
    David
    Staff
    Customer Support

    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.

    #1303342
    Umesh

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

    Thanks for your prompt reply

    #1303446
    David
    Staff
    Customer Support

    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….

    #1304925
    Umesh

    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.

    #1305176
    David
    Staff
    Customer Support

    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.

    #1305298
    Umesh

    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.

    #1305594
    Tom
    Lead Developer
    Lead Developer

    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.

    #1305637
    Umesh

    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.

    #1306608
    Tom
    Lead Developer
    Lead Developer

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

    #1306886
    Umesh

    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?

    #1307097
    Tom
    Lead Developer
    Lead Developer

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

    #1308199
    Umesh

    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.

Viewing 15 posts - 1 through 15 (of 16 total)
  • You must be logged in to reply to this topic.