Strange & Erratic CSS Behaviour

I had a quick look (about to leave on a short holiday) but I don’t see this happening? When you encounter that behavior, are you logged in by any chance? Can you try as an anonymous user in a “private” browser window?

frank

I always use inprivate and never logged in. It is most pages and first load. If you hard refresh browser it happens again, however…?

It appears to be downloading two different AO files for the CSS on the page with conflicting info on them? I don’t recall seeing this before? Google Pagespeed is picking up the CLS of 0.222 as a result

OK, it looks like stm-skin-custom-css is causing the issue here (at least on mobile, where it seems to result in a too big a font for the “Used Trucks for Sale (5284)” title), which is then corrected by stm-wpcfto-styles-css?

The problem disappears when I clear the AO cache however?

• This reply was modified 1 year, 6 months ago by willjames.

well, clearing AO’s cache also clears (most) page cache(s) and will also clear all of Rapidload’s cache, so hard to say what makes this work now. maybe just wait and see if this happens again? ??

Hi, This is still causing issues – the file https://www.truckpages.co.uk/wp-content/cache/rapidload/min-css/skin-custom-eeab046a1a6f.min.css is being processed by AO to give https://www.truckpages.co.uk/wp-content/cache/autoptimize/css/autoptimize_single_9cdbdc893780e3def645be4d73474c0a.css?ver=174 The first file passes the css validator but there is an error in the h4 and h5 in the AO file that is causing some issues?

Thanks

hmmm; AO does not re-minify css-files that end in .min.css as those are considered minified already, so AO will not touch https://www.truckpages.co.uk/wp-content/cache/rapidload/min-css/skin-custom-eeab046a1a6f.min.css

but from what I see in the developer tools the AO-file you mention does not get loaded immediatly, but gets the “unused CSS” treatment ending up as

https://www.truckpages.co.uk/wp-content/cache/rapidload/min-css/uucss-acd57addd86e8064e996c25c88d2bc71-d2f241722270.min.css

which later (by rapidload JS) is replaced by

https://www.truckpages.co.uk/wp-content/cache/autoptimize/css/autoptimize_single_9cdbdc893780e3def645be4d73474c0a.css?ver=174

as configured in this inline Rapidload JS block;

View post on imgur.com

So what is likely happening;
* the page loads, no CSS that sets those fonts is loaded yet
* rapidload loads the uucss version
* rapidload then replaces the uucss version with the original AO CSS file

What you’ll have to do is ensure that one file is not lazyloaded like that by Rapidload OR add some custom CSS (in the Customizer) to force the fonts in the right size?

hope this helps ??
frank

I have turned off rapidload & Critical css and everything works well. (apart from css is render blocking)

I turned on critical css and immediately the issue reappeared (large flash of font and change of color with cache busting ?random text in the URL.

Oddly I have a similar site with the same settings and this does not happen: https://www.plantpages.co.uk/ this uses AO, CCSS & Rapidload and we are not seeing the issues.

you’ll have to add the relevant CSS selectors for the H1/H2 fonts under Settings -> Autoptimize -> Critical CSS -> “Add CSS to all rules”, likely (something like) this;

h1,.h1,h1.heading-font{font-size:24px;}
h2,.h2,h2.heading-font{font-size:22px;}

I have done this – added to the homepage only. I have also put a fix in the css file that had an error in the font. So now at https://www.truckpages.co.uk/ using a ?intheurl and a hard refresh still shows a larger h1 font on initial load, as though something loads before the CCSS – I have looked at the CCSS and there is no large font in the css in it?

It seems to load three AO css files. With no CCSS running it works fine?

you need to add the CSS to Settings -> Autoptimize -> Critical CSS -> “add CSS to all rules”, then click “submit” and then click “save changes” ??

Hi, thanks for coming back. I had already added that to all rules. It is as though the CCSS is being ignored on initial load and something else is taking precedence (I am struggling to see what it can be even with the site throttled in dev tools). It is as though CCSS cannot do its job correctly?

when checking the HTML source, so you see the critical CSS (<style id="aoatfcss" media="all">) and does that critical CSS have the extra CSS you added?

Yes, it does, but the page load still does something else first/after to override this. Not sure if the theme is trying to do something similar to CCSS?