Strange & Erratic CSS Behaviour

  • Hi, I have been experiencing issues with the setup I have and CSS. I use CCSS with AO and Rapidload.

    For debugging I have turned off rapidload temporarily. I use W2TC and Cloudflare API.

    The setup works well and I have (had) good speed metrics etc. However Many pages appear to load correctly, then the headings flash to a different size/colour, then back again. I have tried to debug and clearing all the caches etc and no joy. I have a manual CCSS rule set up for this homepage (is front page).

    It seems to load CCSS css then another set and then a third set (which is why I turned off Rapidload to debug as I thought this may have confused it)?

    You always seem to be able to spot the schoolboy error straight away with these things…?

    Thanks in advance

    The page I need help with: [log in to see the link]

Viewing 7 replies - 16 through 22 (of 22 total)
  • Thread Starter willjames

    (@willjames)

    This seems to load first and that’s what we see I think?

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    autoptimize..9 refers to a file and the file, if critical css is working, is always loaded later, so the critical CSS should take presence really.

    but what do notice is that the font-size issue happens only when JS is active, when I disable JS this does not happen, so you’ll have to start looking into what could be doing that? :-/

    Thread Starter willjames

    (@willjames)

    This is the broken site:

    This is one that is working:

    There is a difference in the script (the working one still has Rapidload running too so not sure if the difference relates to that?

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    I do see the noscript-thingie though in the HTML source;

    Only thing I can think of is adding the !important flag to the two lines of extra CSS maybe?

    h1,.h1,h1.heading-font{font-size:24px !important;}
h2,.h2,h2.heading-font{font-size:22px !important;}
    Thread Starter willjames

    (@willjames)

    So, that works on the homepage to stop the oversizing of the titles. However, I think it is treating the symptoms rather than finding a cure, as all the other changes to the CSS still take place, (colours etc.). The CCSS is working, but it is being overridden by some AO css files as I can see no other css on the source code. The correct page appears thanks to CCSS, then it changes to the odd colours etc. then it changes back to the correct page. I am soooo confused!

    Thread Starter willjames

    (@willjames)

    I have turned off the CCSS and turned on the Rapidload system. At least this looks OK now, but I still have render-blocking css files (albeit small ones) downloading first.

    I tried to simply past the critical CSS into the Eliminate render-blocking CSS? box in AO main tab. This had the same CLS errors as using the CCSS tab for the job.

    I have tried using the Rapidload critical css but it errors as there is a bug in the theme css that I need them to fix (I won’t hold my breath though).

    I can’t see any way through this except to stop using CCSS on this site. It is frustrating as t is almost identical to the https://www.plantpages.co.uk site that works perfectly with AO, CCSS and Rapidload set up (as this site did until recently)

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    I have no idea what’s going on there I’m afraid, maybe re-enable Rapidload and ask them for support, they’re great at digging in?!

Viewing 7 replies - 16 through 22 (of 22 total)
  • The topic ‘Strange & Erratic CSS Behaviour’ is closed to new replies.

Tags